Menu rozwijane z użyciem JQuery i CSS

Niezbędnym elementem każdej strony internetowej jest menu. Może to być menu proste, składające się z pojedynczych odnośników, ale również wielopoziomowe (rozwijane). Spróbujmy zbudować takie rozijane menu przy pomocy JQuery oraz włściwie zbudowanego pliku HTML i CSS. Zakładamy, że menu musi być zbudowane zgodnie ze standarami, a wartstwa struktury menu(xHTML), wyglądu (CSS) oraz zadarzeń (Javascript, JQuery) powinny być odseparowane.

Umożliwi to późniejsze modyfikacje i dostosowanie menu do naszych potrzeb.

Menu

Przykład menu:

Zobacz demo MENU

Struktura menu - xHTML

<div id="menu">
 <ul >
  <li>Menu 1
      <div id="m1" class="menu1">
	<ul>
	  <li><a href="#">Menu 1.1</a></li>
	  <li><a href="#">Menu 1.2</a></li>
	</ul>	
      </div>
  </li>
  <li>Menu 2
      <div id="m2" class="menu1">
	<ul>
	  <li><a href="#">Menu 2.1</a></li>
	  <li><a href="#">Menu 2.2</a></li>
	  <li><a href="#">Menu 2.3</a></li>
	  <li><a href="#">Menu 2.4</a></li>
	</ul>	
      </div>
  </li>
  <li>Menu 3
      <div id="m3" class="menu1">
	<ul>
	  <li><a href="#">Menu 3.1</a></li>
	  <li><a href="#">Menu 3.2</a></li>
	</ul>	
      </div>
  </li>
  <li>Menu 4
      <div id="m4" class="menu1">
	<ul>
	  <li><a href="#">Menu 4.1</a></li>
	  <li><a href="#">Menu 4.2</a></li>
	</ul>	
      </div>
  </li>
</ul>	
</div>

Łatwo zauważyć, że zewnętrznym kontenerem, w którym umieszczone jest menu jest element div#menu. W tym kontenerze umieszczamy główną listę nienumerowaną, która tworzy menu poziome. Zaś w elementach li tej listy menu pionowe zależne od pozycji kursora, które umieszczone jest w elementach div.menu1

Każdy z elementów div jest opatrznu identyfikatorem, który jest potrzebny do indywidualnego ustawienia pionowej listy względem menu nadrzednego(w plikach css).

Wygląd menu - CSS

Wygląd menu jest uzależniony tylko od zawartości pliku css.

body {
	margin: 0px;
	padding: 0px;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#m1 {
	left: 0px;
}
#m2{
	left: 69px;
}
#m3{
	left: 138px;
}
#m4{
	left: 207px;
}
#menu {
	border: 1px solid Black;
	color: yellow;
	background-color: Blue;
	width: 100%;
	float: left;
}
#menu > ul{
	border: 0px;
	background-color: Blue;
	display: inline;
}
#menu > ul > li {
	float: left;
	padding: 5px 10px 5px 10px;
	list-style: none;
	border-right: 1px solid Silver;
	background: Blue;
	color: yellow;
	font-weight: bold;
}
#menu > ul > li:hover{
	background: Navy;
	color: Yellow;
	font-weight: bold;
}

.menu1 {
	background: Yellow;
	display: none;
	position: absolute;
	top: 25px;
	border: 1px solid Black;
	padding: 0px;
	margin: 0px;
}
.menu1 ul{
	background: Yellow;
	display: block;
	padding: 0px;
	margin: 0px;
}
.menu1 ul li{
	padding: 5px 0px 5px 0px;
	border-top: 1px solid Gray;
	margin: 0px;
	display: block;
	list-style-type: none;
	float: none;
}
.menu1 ul li a {
	padding: 5px 10px 5px 10px;
	background: Yellow;
	text-decoration: none;
	color: Blue;
}
.menu1  ul  li a:hover{
	background: Black;
	color: white;
}

Zdarzenia - javascript i JQuery

Aby nasze menu zadziałało niezbędne jest użycie skryptów, które będą reagowały na zdarzenia. Do działania menu użyjemy funkcji JQuery $(selektor).mouseover(), która będzie reagowała na najazd myszki nad element menu poziomego.

$(document).ready(function(){
   
//reakcja na najazdy myszki nad element li
 
   $('#menu > ul >li').mouseover( function(){
     var index = $("#menu > ul > li").index(this);
     $('.menu1').eq(index).toggle();
   });
   $('#menu > ul >li').mouseout( function(){
     var index = $("#menu > ul > li").index(this);
     $('.menu1').eq(index).toggle();
   });
   
//korekta pozycji pionowej menu
   var pleft=$("#menu").offset().left;
   var ptop=$("#menu").offset().top;
   $(".menu1").css("top", ptop+25);
}); 

Nie będę zbyt wiele komentował, dodam tylko, że funkcją, która bezpośrednio rozwija menu jest funkcja toggle(). Działanie tej funkcji było już przeze mnie opisane w artykule na temat JQuery. Krótko mówiąc, każde najechanie myszką na element li powoduje zminę stanu argumentu css dla elemnetu div.menu1: display:none na display:block.

Informacje dodatkowe

Opisane menu jest tylko próbą przedstawienia jednego ze sposobów na zbudowanie własnego menu. Na pewno ma ono wiele wad. Zmieniaj, usprawniaj, poprawiaj. A jeśli uda Ci się udoskonalić, wyślij do mnie. Może komuś się przyda.

Głównym celem artykułu było pokazanie możliwości użycia JQuery do budowy niektórych elemntów strony. Przecież jest wiele przykładów na zudowanie menu tylko przy użyciu CSS...

JQuery to narzędzie pomocne przy budowaniu aplikacji internetowych. Usprawnia i standaryzuje prace. Warto ten framework poznać. Minimalizuje użycie czystego JavaScript, co ucieszy osoby nie przekonane specjalnie do jego używania. Łatwa do opanowania składnia, dużo plugin'ów to jego siła.

CSS to potężne narzędzie, które daje nam możliwośc uniezależnić strukturę dokumentu od jego wyglądu. CSS'a trzeba się uczyć, a najlepszym sposobem jest praktyka. Należy jednak uważać na CSS ze względu na różne zachowania przeglądarek. Twórz i testuj.