Na początek, ciekawe moim zdaniem rozwijane menu poziome (horyzontalne), wykorzystujące bibliotekę jquery. Na pierwszy rzut oka nie powala wyglądem, ale ma duży potencjał. Przy odrobinie chęci można stworzyć naprawdę fajne menu.

Demo (skrócone):

Pliki:

• jquerycssmenu.css
• jquerycssmenu.js
• ikonki ()

Kod (css):

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

<!–[if lte IE 7]>
<style type=”text/css”>
html .jquerycssmenu{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=”jquerycssmenu.js”></script>

Kod (html):

<div id=”myjquerymenu” class=”jquerycssmenu”>
<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_horizontal_blue/