Yatay menüler günümüz sitelerin yaygın olarak kullanılamktadır ve ayrıca bu her li tagı arasında birde win8 tarzında bir icon ile süsleyince çok güzel sonuçlar elde edilebilmektedir. Şimdi bu kodlar içerisinde oluşacak olan yatay menü tek boyutludur. ancak bundan sonra ona şekil vermek sizin elinizdedir. İsterseniz kendi kodlarınızı ekleyerek onu çok boyutlu bir menüye çevirebilirisiniz. Burada bahsettiğimiz boyut kavramı menü üzerine gelince açılır menüleri üretmesidir. Ancak unutmayın günümüzün modası tek boyutlu olan menüler ve tıklandığında hernagi bir yerde ekstra alt menüler açan yöntem popülerdir. İşinize yaraması dileğiyle


function YatayListMenu(div,text,id,url,img){
 var lisayisi=text.length; var lnksayisi=url.length; var imgsayisi=img.length;
 var li="";
 $('#'+div).html("");
 $('#'+div).html('<ul id="'+div+'Ul"></ul>');
 for(i=0;i<lisayisi;i++){
 var lnk=url[i];
 var res=img[i];
 var txt=text[i];
 var idm=id[i];
 if(lnk!=="" && lnksayisi>0){$('#'+div+'Ul').append('<a href="'+lnk+'" id="'+idm+'" onmouseenter="tiklama(\''+idm+'\');"><li id="'+div+'Li'+i+'"></li></a>');}
 else{$('#'+div+'Ul').append('<li id="'+div+'Li'+i+'"></li>');}
 if(res!=="" && imgsayisi>0){$('#'+div+'Li'+i).html('<img src="'+res+'" alt="'+txt+'"><br>'+txt);}
 else{$('#'+div+'Li'+i).html(txt);}
 }

 }

 text=["Anasayfa","Hakkında","Iletisim"];
 img=["icon/anasayfa.png","icon/arama.png","icon/uyeler.png"];
 lnk=["index.html","hakkinda.html","iletisim.html"];
 idm=["anasayfa","hakkinda","iletisim"];
 YatayListMenu("tuslar",text,idm,lnk,img);

// ayrıca mutlaka bir icon resmi ve link içermek zorunda değildir. Bu duruma göre

// parametreleri eksik girerek gereksiz bir kodlamadan kaçınmış olursunuz.
// sizin belirlediğiniz text dizisine göre biçim alacaktır
// tuslar div id li bir tag içerisine yerleşecektir.

burada kullandıktan sonra direk olarak izlerseniz eğer yatay bir menü oluşmayacaktır. Bu kodlardan önce birde bir css sitil şablonu oluşturmanız gerekmektedir. mesela benim yazdığım bir css kodu


#tuslar{

position:absolute;

top:35px; left:360px; width:600px; height:47px;

}

#tuslar ul{ margin:0px; padding:0px;}

#tuslar li{

 list-style-type: none;

 display:inline-block;

 padding:5px;

 margin:5px;

 color:#FFFFFF;

 font-size:13px;

 font-family:Arial, Helvetica, sans-serif;

 text-align:center;

 opacity: 0.7;

 filter: alpha(opacity=70);

 -webkit-transition: opacity .1s ease-in-out;

 -moz-transition: opacity .1s ease-in-out;

 -o-transition: opacity .1s ease-in-out;

 transition: opacity .1s ease-in-out;

}</pre>
<pre>

Facebook'dan yorumla