jQuery Menü Yapımı

jQuery ile gerçekten 3 – 5 satır kod ile inanılmaz şeyler yapabiliyoruz. biraz da css (style) bilgisi ile web sitenizi zenginleştirebilirsiniz. 2 örnegim olan jQuery menu kodlaması gayet basitir.
1.Adım ——
Bir Adet html sayfası oluşturalım.
sonra editorümüz aracılıgıyla bu sayfayı açalım (not defteri , dreamweaver vs.)
head taglarının arasına gerekli dosyaları çagıralım.

 
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script src="jquery-1.2.3.min.js" type="text/javascript"></script> <script src="menu.js" type="text/javascript"></script>  

2.Adım ——
Bir Adet text dosyası açıp icine şu kodları ekleyin. sonra uzantısını (*.txt) silip yerine (*.js) yazalım ÖRNEK : menu.js 

 
function mainmenu(){
$(" #menu ul ").css({display: "none"}); // Opera Fix
$(" #menu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
} 

$(document).ready(function(){
mainmenu();
}); 

3.Adım ——
Aynı şekilde bir txt dosyası açıp şu kodları girelim. sonra uzantısını (*.txt) silip yerine (*.css) yazalım ÖRNEK : style.css 

 
#menu, #menu ul{
margin:0;
padding:0;
list-style-type:none;
position:relative;
line-height:1.5em;
height: 30px;
width: auto;
}

#menu a{
display:block;
padding:0px 5px;
border:1px solid #ff0000;
color:#fff;
text-decoration:none;
background:url(button.png);
}

#menu a:hover{
border:1px solid #000000;
color:#fff;
background:url(button.active.png);
}

#menu li{
float:left;
position:relative;
}

#menu ul {
position:absolute;
display:none;
width:auto;
top:1.5em;
}

#menu li ul a{
width:190px;
height:30;
float:left;
} 

#menu ul ul{
top:auto;
} 
#menu li ul ul {
left:190px;
margin:0px 0 0 10px;
} 

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menuli li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
} 

4.Adım ——
Sayfamızın içine (body tagları arasına) gerekli kodları girelim. 

burada alt menun alt menusu ve onunda alt menusu ekleyebilrisiniz 😀 bunu dahada ileri görtürmek siizn elinizde. 

 
<ul id="menu"> 
 <li><a href="#">örnek 1</a>  <ul>   <li><a href="#">örnek 1.1</a>  <ul>   <li><a href="#">1.1.1</a></li>   <li><a href="#">1.1.3</a></li>  </ul>  </li>  </ul>  </li>   <li><a href="#">örnek 1</a></li>   <li><a href="#">örnek 2</a></li>   <li><a href="#">örnek 3</a></li>   <li><a href="#">örnek 4</a></li>   <li><a href="#">örnek 5</a></li>  </ul> 

Bu Örnegi
BURADAN inceleyebilirsiniz
BURADAN indirebilirsiniz