Digg.com, dünya üzerinde popülaritesini kanıtlamış, kullanıcılar tarafından tutulan, benimsenen, sevilen veya nefret edilen yazıların paylaşıldığı bir platformdur. Detaylı bilgi [...]
Digg.com, dünya üzerinde popülaritesini kanıtlamış, kullanıcılar tarafından tutulan, benimsenen, sevilen veya nefret edilen yazıların paylaşıldığı bir platformdur. Detaylı bilgi almak için tıklayabilirsiniz.
Tasarımcı olarak bizi ilgilendiren tarafı Digg.com’un sahip olduÄŸu içerik deÄŸil, bünyesinde barındırdığı kullanıcı dostu menüsüdür. Aklınızdaki düşünceleri gerçekleÅŸtirmek için bu tarz çok tutulan web sitelerinin menülerinin yapımındaki mantığı daha iyi kavramak adına yararlı olacağını düşünerek bu dersi hazırladık..
1. HTML yapısı
HTML yapısı oldukça basit bir taslak üzerine inşa edilmiş olup, iki adet < ul > etiketi içermektedir.
Öncelikle aşağıda gördüğünüz kodları HTML dosyanızın içine kopyala-yapıştır ediniz.
2. CSS Yapısı
Anamenüye ait css kod yapısı aşağıdaki gibidir. Anamenüdeki yapıyı bu kodları css dosyanıza kopyala/yapıştır diyerek ekleyip, test edebilir, gerekli değişiklikleri yapıp üzerinde oynamalar yapabilirsiniz.
ul, li{margin:0; border:0; padding:0; list-style:none;}
#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:4px;
height:30px;
}
#middlebar .menu li {
background:url(lm.png) left top no-repeat;
height:30px;
float:left;
margin-right:10px;
}
#middlebar .menu li a{
color:#3b5d14;
text-decoration:none;
padding:0 10px;
height:30px;
line-height:30px;
display:block;
float:left;
padding:0 26px 0 10px;
background:url(rm.png) right top no-repeat;
}
#middlebar .menu li a:hover{
color:#666666;
}
…ve burada da alt menüye ait css yapısını inceleyebilirsiniz.
#middlebar ul .submenu {
border:solid 1px #c9dea1;
border-top:none;
background:#FFFFFF;
position:relative;
top:4px;
width:150px;
padding:6px 0;
clear:both;
z-index:2;
display:none;
}
#middlebar ul .submenu li{
background:none;
display:block;
float:none;
margin:0 6px;
border:0;
height:auto;
line-height:normal;
border-top:solid 1px #DEDEDE;
}
#middlebar .submenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
color:#105cbe;
line-height:normal;
}
#middlebar .submenu li a:hover{
background:#e3edef;
}
3. Javascript ile açılır/kapanır kısmını çalıştırma
Basit bir javascript kodu ile kullanıcıların menüdeki öğeye tıklayıp alt menüyü açacağı aşağıda görebilirsiniz.
var last_clicked="";
function showlayer(layer){
var myLayer=document.getElementById(layer);
if (last_clicked==""){
last_clicked=document.getElementById(layer);
}
if((myLayer.style.display=="none" || myLayer.style.display=="") && last_clicked.style.display=="block"){
last_clicked.style.display="none";
myLayer.style.display="block";
last_clicked = myLayer;
} else if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
last_clicked = myLayer;
} else {
myLayer.style.display="none";
}
}
Hepsini kaydedip denemenizi görebilirsiniz. Son olarak söylenecek söze gelince asıl olan şey, aynısını yapmak değil. Zaten sakın böyle birşey ile sitenizi inşa etmeyin! Amacımız daha çok size mantığı gösterip, aslında bizlerin de yabancılar tarafından örnek oluşturabilecek, bu şekilde incelenebilecek siteler oluşturabilmemizi sağlayabilmektir. Bizler öğrenmek istediğimiz zaman onlardan daha yetenekli olduğumuzu gün gelince gösterebilecek güce sahibiz. Yanılıyor muyuz 
Benzer makaleler:
- Facebook Navigasyon Menü Yapalım Her zaman kullanıcı dostu (user-friendly) navigasyon menüler kullanıcıların web sitesi...
Related posts brought to you by Yet Another Related Posts Plugin.
Yorum yaz