To menu jest naprawde warte uwagi.. byc moze nie pasuje do stron a standardowym ukladzie, jednak jesli ktos bedzie potrafil ladnie to wszystko skomponowac to efekt bedzie piorunujacy…

stan spoczynku

po wybraniu elementu

Pobranie i opis instalacji: http://www.phatfusion.net/imagemenu/index.htm

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/

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/