A végeredmény itt megtekinthető.

A menü alapelve a következő:

  • egy menüpont két részből áll, az egyik alap állapotban jelenik meg, a másik pedig a hover esemény bekövetkezésekor
  • a hover állapot az alapállapot “fölött” jelenik meg, és a CSS-ben meghatározott pozíciónak, magasságnak és overflownak köszönhetően alap esetben nem látható
  • a hover esemény bekövetkezésekor a normál állapothoz és a hover állapothoz tartozó rész is lentebb csúszik, az overflow miatt pedig csak a hover marad látható
  • out eseménykor a folyamat visszafelé játszódik le és mindkét rész visszakerül az eredeti pozíciójába

Az elkészítés menete

  1. A dokumentum modell létrehozása:
    A megszokott webszerkesztő programunk segítségével (Dreamweaver, Notepad++, Intype, stb) hozzunk létre egy új html dokumentumot, a következő tartalommal:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<!-- begin content -->
<!-- end content -->
</body>
</html>

    A tartalmi részben alakítsuk ki a menünk szerkezetét, ami alapvetően egy lista, ahol a listaelemek két részből állnak, egy alap állapotból és egy hover állapotból:

    <!-- begin content -->
		<div id="content">

			<!-- begin menu -->
			<ul id="menu">
				<li>
					<p class="hover">
					<a href="#">Home</a>
					</p>

					<p class="normal">
					<a href="#">Home</a>
					</p>
				</li>

				<li>
					<p class="hover">
					<a href="#">Blog</a>
					</p>

					<p class="normal">
					<a href="#">Blog</a>
					</p>
				</li>

				<li>
					<p class="hover">
					<a href="#">Porftolio</a>
					</p>

					<p class="normal">
					<a href="#">Portfolio</a>
					</p>
				</li>

				<li>
					<p class="hover">
					<a href="#">Contact</a>
					</p>

					<p class="normal">
					<a href="#">Contact</a>
					</p>
				</li>

			</ul>
			<!-- end menu -->

		</div>
		<!-- end content -->
  2. Szükséges scriptek elhelyezése a dokumentumban:
    A </body> tag elé írjuk be a következő sort: 
    <!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- end jQuery-->

    A dokumentum végére helyezett script “include” elősegíti a weboldalunk gyorsabb betöltődését.

  3. A CSS megírása:
    Ebben a példában nem hoztam létre külön css filet, a szükséges stílusinformációkat a header részben helyeztem el a </head> tag előtt:

    <style type="text/css">
		/* BODY */
		body{
			color: #eee;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			margin: 0px;
			padding: 0px;
		}

		a{
			color: #eee;
			font-weight: bold;
			outline: none;
			text-decoration: none;
		}

		/* MENU */
		#menu{
			float: left;
			height: 30px; /* a menu magassaganak meghatarozasa, hogy csak a hover vagy a normal allapotot lassuk */
			list-style-type: none;
			margin: 0px;
			overflow: hidden; /* csak a 30px magas resze latszik a menupontoknak */
			padding: 0px;
			position: relative; /* fontos, hogy a jQuery hasznalataval manipulalni tudjuk az egyes lista elemeket */
		}

		#menu li{
			float: left; /* a lista elemek vizszintes sorba torteno rendezesehez */
			height: 60px; /* a hover es a normal allapot egyuttes magassaga */
			overflow: hidden;
			position: relative; /* fontos, hogy a jQuery hasznalataval manipulalni tudjuk az egyes lista elemeket */
			top: -30px; /* igy a menupont hover resze kikerul a lathato teruletrol es a normal allapot jelenik meg */
		}

		#menu p{
			line-height: 30px;
			margin: 0px;
			padding: 0px 10px 0px 10px;
		}

		.hover{
			background: #003495;/* bongeszok, amik nem tamogatjak a css-ben meghatarozott gradientet */
			background: -webkit-gradient(linear, left bottom, left top, from(#1b4eb3), to(#003495)); /* safari, chrome */
			background: -moz-linear-gradient(top, #1b4eb3, #003495); /* firefox */
			border-left: 1px solid #275fcd;
			border-left: 1px solid #022c7a;
		}

		.normal{
			background: #2d2d2d; /* bongeszok, amik nem tamogatjak a css-ben meghatarozott gradientet */
			background: -webkit-gradient(linear, left bottom, left top, from(#595959), to(#2d2d2d)); /* safari, chrome */
			background: -moz-linear-gradient(top, #595959, #2d2d2d); /* firefox */
			border-left: 1px solid #727272;
			border-right: 1px solid #212121;
		}

		</style>

    Aki korábban foglalkozott CSS-el, annak túl sok újdonság nincs a fenti kódban.
    A fontosabb részek mellé külön odaírtam, hogy melyikre miért van szükség.

  4. Az animáció kialakítása:
    A létrehozott menünk, az eddig megírt kóddal is teljesen műkőképes, de a hover animáció hozzáadása még csak most következik. Viszont ha valaki kikapcsolja a javascript futtatását a böngészőjében, az a jelenlegi állapotot fogja látni.A jQuery script beillesztése alá írjuk be a következő kódrészletet:

    <!-- menu script -->
		<script type="text/javascript">
		$(function(){
          //ide jon a kod, ami csak a dokumentumfa teljes betoltodeset kovetoen kerul futtatasra
         $("#menu li").hover(
			     function(){
				     //hover esemeny bekovetkezesekor lefuto animacio
				     $(this).animate({
					     'top': '0px' //az animacio lefutaskor modositani kivant tulajdonasg es ertek - lentebb toljuk a lista elemet, igy a jelenleg -30px-nel kezdodo hover resz valik lathatova
					 },{
					     duration: 150, //animacio sebessege
						 queue: false //erre azert van szukseg, hogy ha valaki oda vissza mozgatja az egeret a menupontok folott, akkor is csak egyszer jatszodjon le az animacio
					 });
			     },
			     function(){
				     //out esemeny bekovetkezesekor lefuto animacio
				     $(this).animate({
						 'top': '-30px' //visszamozgatjuk a lista element a kezdo allapotba
					 },{
						 duration: 150 //animacio sebessege
					 });
			     });
	    });
		</script>
<!-- end menu script -->

    A fenti kódban mghatározzuk, hogy melyik elem milyen eseményét szeretnénk figyelni ($(“#menu li”).hover), illetve, hogy az esemény bekövetkezésekor milyen funkciókat szeretnénk futtatni. A jQuery lehetőséget biztosít arra, hogy a hover és out eseményeket “egyszerre” kezeljük:

    
  .hover(hover_esemeny_bekovetkezesekor, out_esemeny_bekovetkezesekor)

Ez a menü csak egy egyszerű példa arra, hogy viszonylag kis idő ráfordításával, mennyivel látványosabbá tehetjük a weboldalaink statikus elemeit.

A forrás letölthető innen.