Naše menu bude definováno následovně:
<div id="div_menu_container">
<div id="div_menu_hover">
<div id="div_menu_hover_left">
</div>
</div>
<a href="">domů</a>
<a href="" id="selected">kdo jsme</a>
<a href="">galerie</a>
<a href="">kontakty</a>
<a href="">přihlásit se</a>
</div>
#div_menu_container - Prvním prvkem pro nastylování je obal (#div_menu_container) našeho menu. Vlastnost position je nastavena na relative jelikož budeme uvnitř tohoto prvku poziciovat prvky absolutně a chceme, aby byly jeho nulové body stejné jako našeho obalu:
#div_menu_container{
float:left;
position:relative;
width:486px;
height:36px;
background-image:url('../images/bg_menu_container.png');
overflow: hidden;
}
#div_menu_container a - Dále mám styl definovaný pro naše odkazy a Tady nenstavujeme žádné zvláštní vlastnoti, pouze line-height:36px; a vertical-align:middle, aby byl text na středu řádku. CSS:
#div_menu_container a{
float:left;
width:auto;
height:36px;
line-height:38px;
vertical-align: middle;
font-size:11px;
color:white;
text-transform: uppercase;
margin:0px 15px 0 15px;
font-family: 'Arial CE', 'Helvetica CE', Arial, helvetica, sans-serif;
position:relative;
font-weight: bold;
}
#div_menu_hover - Nyní vytvoříme styl pro náš bílý objekt, respektive jeho hlavní část. Prvek je pozicionván absolutně a na střed řádku. Pozadí je poziciovano doprava, jelikož natahovat se bude směrem doleva. CSS:
#div_menu_hover{
float:left;
position:absolute;
width:auto;
height:26px;
left:5px;
top:5px;
background-image:url('../images/bg_menu_hover.png');
background-position: right top;
}
#div_menu_hover_left - Jako poslední styl vytvoříme levou část našeho bílého prvku. Ten bude zarovnán doleva, aby překryl levou část bílého prvku. CSS:
#div_menu_hover_left{
float:left;
width:6px;
height:26px;
background-image:url('../images/bg_menu_hover_left.png');
}
V poslední části si vytvoříme script pro naše menu. Menu se pohybuje po najetí na prvek a vrací se vždy na prvek vybraný (s id="selected"). Přilinkujeme si jQuery, jQuery plugin pro animaci barev (ten je potřeba pro možnost animovat vlastnost color našeho odkazu) a náš externí javaScript soubor. Náš kód bude vypadat takto:
//nastavení rychlosti přesouvání
var animSpeed = 300;
// odsazení kraje bílého prvku od textu
var hoverPadding = 10;
var hoverMargin = 15;
var selectedHref = $("#selected");
//funkce pro přesun na pozici objektu
function moveTo(selObject){
//nastavení šířky našeho efektu + přičtení odsazení.
var selWidth = selObject.width()+(hoverPadding*2);
//nastavení pozice zleva - odsazení
var selLeft = selObject.position().left + (hoverMargin-hoverPadding);
//animace prvku na danou pozici a velikost
$("#div_menu_hover").stop().animate({width: selWidth+'px', left: selLeft+'px'}, animSpeed);
//nastavení bílé barvy prvku vybraného před tímto.
selectedHref.stop().animate({color: 'white'}, animSpeed);
//nastavení barvy pro vybraný prvek
selObject.stop().animate({color: 'black'}, animSpeed);
//nastavíme právě vybraný prvek.
selectedHref = selObject;
}
$(document).ready(function(){
//událost po najetí myši na odkaz
$("#div_menu_container a").hover(function () {
moveTo($(this));
});
//událost po přechdu myši mimo naše menu
$("#div_menu_container").hover(
function () {},
function () {
moveTo($("#selected"));
});
});
$(window).load(function(){
//počáteční přesun efektu na pozici vybraného odkazu
moveTo($("#selected"));
});