Kolejne rozwijane menu poziome (horyzontalne), wykorzystujące bibliotekę jquery. Tutaj dodatkowo zastosowano efekt rozwijania pozycji poziomu 1+.

Demo (skrócone):

Pliki:

• myslidemenu.css
• myslidemenu.js
• ikonki ( )

Kod (css):

<link rel=”stylesheet” type=”text/css” href=”jqueryslidemenu.css” />

<!–[if lte IE 7]>
<style type=”text/css”>
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]–>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
<script type=”text/javascript” src=”jqueryslidemenu.js”></script>

Kod (html):

<div id=”myslidemenu” class=”jqueryslidemenuu”>
<ul>
<li><a href=”#”>Folder 1</a>
<ul>
<li><a href=”#”>Sub Item 2.1</a></li>
<li><a href=”#”>Folder 2.1</a>
<ul>
<li><a href=”#”>Sub Item 2.1.1</a></li>
<li><a href=”#”>Sub Item 2.1.2</a></li>
<li><a href=”#”>Folder 3.1.1</a>
<ul>
<li><a href=”#”>Sub Item 3.1.1.1</a></li>
<li><a href=”#”>Sub Item 3.1.1.2</a></li>
<li><a href=”#”>Sub Item 3.1.1.3</a></li>
<li><a href=”#”>Sub Item 3.1.1.4</a></li>
<li><a href=”#”>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href=”#”>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>

<li><a href=”#”>Folder 2</a>
<ul>
<li><a href=”#”>Sub Item 1.1</a></li>
<li><a href=”#”>Sub Item 1.2</a></li>
<li><a href=”#”>Sub Item 1.3</a></li>
<li><a href=”#”>Sub Item 1.4</a></li>
</ul>
</li>
</ul>
<br style=”clear: left” /></div>

Źródło:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/