Her zaman kullanıcı dostu (user-friendly) navigasyon menüler kullanıcıların web sitesi içerindeki gezintisine yardımcı olur, hedefe ulaşmasında ziyaretçiyi sıkmayan bir görev [...]
Her zaman kullanıcı dostu (user-friendly) navigasyon menüler kullanıcıların web sitesi içerindeki gezintisine yardımcı olur, hedefe ulaşmasında ziyaretçiyi sıkmayan bir görev üstlenir. Bu yüzden geniş içeriğe sahip, menüleri oldukça karmaşık yapıya sahip sitelerde kolay, basit ve sabit bir menü her zaman site sahibi olarak kullanıcıyı size + (artı) bir değer doğrultusunda kazandıracaktır.
Elimizde bulunan HTML, CSS ve JQuery ile kullanacağınız Javascript kodlarıyla basit bir şekilde facebook menü oluşturabileceğiniz eğitimi sizlerle paylaşmak istiyorum.
Projelerinizde eğitim olarak verilen bu CSS kodlarını dilediğiniz gibi özelleştirip kullanabilirsiniz. Tabi en azından aynısını değil de, başkalaştırıp size özel drop down menüler oluşturabilirsiniz.
Navigasyon Bar Yapısı
…ve burada bunu uygulamak için kullanabileceÄŸiniz standart HTML yapısı bulunmaktadır.
HTML olarak sitenize ekleyeceÄŸiniz (
tag’leri arasına) yapı aÅŸağıda bulunmaktadır:Menünüze ek ana baÅŸlık ve alt baÅŸlıklar ekleyebilirsiniz. Hatta sınırsız ÅŸekilde…
CSS Yapısı
Şimdi Css kodumuza bir göz atıyoruz. Burada kapsayıcımıza ait css kodunu görüntüleyebilir, arkaplan rengi, yükseklik vb. değerler üzerinde özelleştirme yapabilirsiniz.
#nav{
height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}
#nav ul,
#nav ul li {
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
display:block;
}
AÅŸağıda gezinti çubuÄŸumuza ait baÄŸlantıların css kodlarını görüntüleyebilirsiniz.. #nav ul li {…} kodu ile ana menü öğelerinizi belirleyebilirsiniz. (örneÄŸin bu çalışmamızda Web Tasarım, Haberler, Sosyal AÄŸ). #nav ul li ul li {…} ile de alt menü öğelerinizi tanımlayabilirsiniz.
#nav ul li a:link,
#nav ul li a:visited{
color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
}
#nav ul li a:hover{
color:#EBEFF7;
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
}
JQuery Yapısı
Şimdi mouseover ve mouseleave kullanarak bu basit JQuery kodlarıyla menü öğelerini gösterip gizlemeye bir gözatalım. Kod, içerdiği ana öğe ve alt menülerin sayısına bağlı kalmaksızın çok basit ve çok hızlı bir şekilde çalıştığını göreceksiniz. Öncelikle JQuery dosyamızı < /head > etiketinin üzerine ekliyoruz.
Hemen arkasından bu kodları ekliyoruz:
Bu kodları harici JS dosyasında yine aynı ÅŸekilde < /head > etiketinden önce harici olarak ekleyebilirsiniz. Hepsi bu kadar!… Umarım faydalı bir bildiri olmuÅŸtur. Etkili çalışmalarınız varsa yorumlarınızda bizlerle paylaÅŸabilirsiniz.
Benzer makaleler:
- Digg.com Navigasyon Menüsünü İnceleyelim Digg.com, dünya üzerinde popülaritesini kanıtlamış, kullanıcılar tarafından tutulan, benimsenen, sevilen...
- Web Geliştiricileri için 10 Kullanışlı Kod Parçası CSS, PHP, HTML, Ajax ve jQuery çalışmalarımızda çoğu kez kullandığımız,...
- Harikulade 50 Adet Navigasyon Menü Grafikerler veya tasarımcılar bir şablon tasarlarken her zaman ilham olabilecek...
Related posts brought to you by Yet Another Related Posts Plugin.
Yorum yaz