Takip Et 
Yorum Bırak
Reklam
CSS ile menü yapımı
-
Tweet
Bu yazım diğer yazılardan farklı olacak. Yani görsel olmayacak. Video kayıtlara alıştım ben de fakat böyle yazılar da yazmak istiyorum. Küçük css kodları kullanarak bazı kolaylıkları kendim öğrendikce sizlere aktarmak istiyorum.
Şimdi bazı sitelerde görmüşsünüzdür çok güzel effektli menüler oluyor ve hızlı çalışıyor. Bunu nasıl yapmışlar, nasıl olmuş falan diye düşünüyor insan. Aslında çok kolay. Şimdi bu menülerden bir örnek göstereceğim.
Önce bir XHTML (veya HTML. yani .html uzantılı) sayfası oluşturuyoruz.
<head></head> tag`leri arasında aşağıdaki CSS kodumuzu yazıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<!-- ul.sidenav { font-size: 1.2em; float: left; width: 200px; margin: 0; padding: 0; list-style: none; background: #005094; border-bottom: 1px solid #3373a9; border-top: 1px solid #003867; } ul.sidenav li a{ display: block; color: #fff; text-decoration: none; width: 155px; padding: 10px 10px 10px 35px; border-top: 1px solid #3373a9; border-bottom: 1px solid #003867; } ul.sidenav li a:hover { background: #003867 no-repeat 5px 7px; border-top: 1px solid #1a4c76; } ul.sidenav li span{ display: none; } ul.sidenav li a:hover span { display: block; font-size: 0.8em; padding: 10px 0; } -->
Ardından sayfamızda <body></body> tag’leri içerisinde <ul></ul> liste elemanlarını kullanarak menüler ve <span></span> etiketleri içerisine de menü açıklamalarını gireceğiz. Sonra css ile oluşturduğumuz sınıfları CLASS yardımı ile liste elemanlarına uygulayacağız.
Yani kısacası şöyle bir kod yazacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<ul class="sidenav"> <li> <a href="#">Ana Sayfa <span>Tanıtım yazısı. </span> </a></li> <li> <a href="#">Blog <span>Blog Sayfaları hakkında. </span> </a></li> <li> <a href="#">Derslikler <span>Eklenen derslikler hakkında. </span> </a></li> <li> <a href="#">Derslikler <span>Eklenen derslikler hakkında. </span> </a></li> <li> <a href="#">Derslikler <span>Eklenen derslikler hakkında. </span> </a></li> </ul>
İşte bu kadar. Yukarıda eklediğimiz CSS kodlarını CLASS yardımı ile (class=”sidenav”) listeleme elemanı içerisinde tanımlamış olduk.Sonuç olarak karşınıza aşağıdaki gibi bir menü çıkacaktır. Yani fareyi menü başlıklarının üzerine getirdiğinizde açıklamaların gözükmesi için menü kayacaktır. Uygulama yapmanızı tavsiye ederim.
Örnek uygulamaya buradan ulaşabilirsiniz.
Kolay gelsin
Tweet
Reklam
6 Yorum
Yorum Bırak
Fotoğraflar
burmeh yaza lida fx15 biber hapı ile formda girin
- fx15′in biber hapı seslenişleri
- burmeh yaza lida sansüre karşı!
- Zayıflama yolları üzerine araştırma yapın
- burmeh yaza lida fx15 12 eylül anayasası
- fx15 biber KPSS iptal edilecek mi burmeh?
- zayıflamak için fx15 biber hapı ile formda girin
- burmeh yaza lida’da 2. sayfadayız
- bu bir burmeh yaza lida denemesidir
- burmeh yaza lida yarışması fx15 biber hapı
- Yeter burmeh dedik
Google Analytics
115 | Tekil Ziyaretçi |
Powered By 
Temmuz 19, 2010 am31 00:24
TEŞEKKÜRLER ANAR HOCAM KISA AMA OLDUKÇA GÜZEL BİR ÇALIŞMA..
Temmuz 26, 2010 am31 16:15
css ile uğraşmaya yeni başladım, videonuzu izledim gerçekten çok faydalı oldu tşk. ederim. css ile sayfa tasarımı nasıl yapılır,2-3 sayfalık bir web site tasarımı yapsanız çok güzel olur..emeğiniz için tşk. ederim.sevgiler.
Ağustos 9, 2010 am31 20:07
peki bu menüyü nasıl yanyana yapacağız
Ağustos 10, 2010 am31 13:16
güzel bir soru
ama hiç denemedim 
zaten bunu yapsan anlamsız olur ama bu tarz yan yana menü var css ile yapılan. yakında birkaç menü örneği ekleyeceğim 
Ağustos 20, 2010 am31 22:46
merhaba, yine ben:)
Allah razı olsun öncelikle cevapladığınız için…
bir sorum olcak yeri burası mı bilmiyorum ama en uygun bu bölümü bulabildim.ben bir site tasarladım sadece divlerden oluşuyor,içerik kısmı sayfanın ortasında.şimdi ben istiyorum ki menümde bir butona bastığımda sayfalar arası gidip gelme olmasın anasayfamda butona bastığımda içerik kısmında butona ait bilgiler orada gözüksün.bunu iframe ile yapmayı denedim ama düzgün olmadı.divin içine iframeyi nasıl yerleştiririm,iframenin backcolourunun rengini değiştirebilirmiyim? bir fikriniz var mı?? karışık mı oldu:/
Ağustos 20, 2010 am31 23:53
Merhaba, değiştirebilirsiniz default olara bir sayfa belirlersiniz örneğin
buradaki ornek.html sayfasinin arka fon rengini istediginiz renk olarak ayarlarsiniz.. ama biraz eski yonetim olur.ama istediginiz div`in icersini ayax ile yenileye bilirsiniz.
yapmak istediğiniz örnek ve uygulamanın eğitimini şuradan öğrenebilirsiniz: Dynamic Ajax Content