Main » Articles » Web tutorijali » Navigacija
Horizontalni padajući meni (jquery + css)
Ovaj tutorijal će vas naučiti kako da primenite padajući meni sa sajta http://www.sohtanaka.com/web-design/examples/drop-down-menu/ .

1. Skinemo rar folder sa svim fajlovima.

2. Ekstraktujemo u rut direktorijum vašeg sajta (/)

3. Sledeci kod ubacimo izmedju i u vasoj html stranici gde zelite da vam se nalazi meni.

Code
<link href="css/horizontalnimeni.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>            
<script type="text/javascript" src="js/horizontalnimeni.js"></script>


4. Kod menija ubacujemo izmedju i :

Code

<ul class="topnav">             
               <li><a href="#">Home</a></li>             
               <li>             
                   <a href="#">Tutorials</a>             
                   <ul class="subnav">             
                       <li><a href="#">Sub Nav Link</a></li>             
                       <li><a href="#">Sub Nav Link</a></li>             
                   </ul>             
               </li>             
               <li>             
                   <a href="#">Resources</a>             
                   <ul class="subnav">             
                       <li><a href="#">Sub Nav Link</a></li>             
                       <li><a href="#">Sub Nav Link</a></li>             
                   </ul>             
               </li>             
               <li><a href="#">About Us</a></li>             
               <li><a href="#">Advertise</a></li>             
               <li><a href="#">Submit</a></li>             
               <li><a href="#">Contact Us</a></li>             
</ul>             


Izmena menija i dodavanje vasih linkova:

Code
<li><a href="#">Home</a></li>


Code
<li>             
                   <a href="#">Tutorials</a> <!-- 1 nivo -->
                   <ul class="subnav">             
                       <li><a href="#">Sub Nav Link</a></li>  <!-- 2 nivo 1 elemenat -->
                       <li><a href="#">Sub Nav Link</a></li>  <!-- 2 nivo 2 elemenat -->
                   </ul>             
</li>  
- meni sa podmenijem
Category: Navigacija | Added by: Vladar (25.May.2011)
Views: 2973 | Tags: navigacija, horizontalni meni, jQuery, CSS | Rating: 5.0/3
Total comments: 0
Only registered users can add comments.
[ Sign Up | Login ]