Wielopoziomowe meni z dodatkiem jQuery Multi Level CSS Menu #2
Jest to wielopoziomowe poziome menu w CSS stworzone przy użyciu zwykłego kodu HTML, w pełni funkcjonalne menu za pomocą CSS i odrobiną jQuery. Wysuwanie menu po na jechaniu myszką, które również automatycznie przesuwa się poziomo, lecz nie zbyt blisko prawej krawędzi okna przeglądarki.
Jedno chyba z najbardziej funkcjonalnych menu - łatwe do zrobienia, przejrzyste i bardzo funkcjonalne.
W sekcji HEAD:
| <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> |
W sekcji BODY:
| <div id="myslidemenu" class="jqueryslidemenu"> < ul> < li><a href="http://www.dynamicdrive.com">Item 1</a></li> < li><a href="#">Item 2</a></li> < li><a href="#">Folder 1</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> < li><a href="#">Item 3</a></li> < li><a href="#">Folder 2</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="http://www.dynamicdrive.com/style/">Item 4</a></li> < /ul> < br style="clear: left" /> < /div> |
Oczywiście układ zakładek musimy sobie zredagować wedle własnych potrzeb
W załącznikach pliki jQuery (załączniki widoczne tylko dla zalogowanych użytkowników - podobno:) )
