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

Trafilem zupelnie przypadkiem na cos bardzo ciekawego. Wg twórców, rozwiązanie to powinno skonwertować Twoją statyczną stronę do strony AJAX. Jeśli mam być szczery to nie testowałem tego jeszcze na własnej skórze, ale efekt na stronie demo jest imponuący.

Demo, skrypt do pobrania oraz dokumentacja (ang):

przejdź do strony

Skrypt zmienia zdjęcia po kliknięciu w odpowiedni link. Można zdefiniować różne efekty przejścia między plikami graficznymi.

Przykład:

http://ajaxorized.com/image-transition-manager/

Pliki:

• prototype.js
• scriptaculous.js
• transition.js

Kod (head):

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”transition.js”></script>

Kod (body):

<style>
#leftCol, #rightCol {
float:left;
margin:10px;
}
</style>
<div id = “sampleDiv”>
<div id = “leftCol”>
<ul>
<li><a href=”image1.jpg” rel=”transition[switchoff]“>image1.jpg</a></li>
<li><a href=”image2.jpg” rel=”transition[slidedown]“>image2.jpg</a></li>

<li><a href=”image3.jpg” rel=”transition[blinddown]“>image3.jpg</a></li>
<li><a href=”image4.jpg” rel=”transition[slideright]“>image4.jpg</a></li>
<li><a href=”image5.jpg” rel=”transition[appear]“>image5.jpg</a></li>
<li><a href=”image6.jpg” rel=”transition[switch]“>image6.jpg</a></li>
<li><a href=”image7.jpg” rel=”transition[blinddown]“>image7.jpg</a></li>
<li><a href=”image8.jpg” rel=”transition[grow]“>image8.jpg</a></li>

<li><a href=”image9.jpg” rel=”transition[shrink]“>image9.jpg</a></li>
</ul>
</div>
<div id = “rightCol”>
<div id=”holder” style=”border: 5px solid #999; width: 640px; height: 480px;float:left”>
<img src=”image1.jpg” width=”70%”/>
</div>
</div>

</div>
<script type=”text/javascript”>
oTransition = new Transition( ‘holder’, ‘image1.jpg’ );
</script>

Źródło:

http://freeajaxscripts.net/directory/Ajax_Image_Galleries/Ajax_Image_Transition_Manager/details.html

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/

W tym miejscu postaram sie zebrać przydatne informacje na temat wykorzystania kaskadowych arkuszy stylu - css, oraz bibliotek jquery i moo. Pewnie od czasu do czasu odbiegnę od tematyki, ale mam nadzieje, że wszystkie znalezione tu informacje będą pomocne tym, którzy szukają ciekawych rozwiązań na swoją stronę www.