Kā jau tu, iespējams, zini, pirmās 20 sekundes lapas apmeklētājam liek izšķirties, palikt lapā, vai doties prom. Tas nozīmē, ka tavai web lapai jābūt pilnai ar labu un interesantu informāciju un jābūt labam dizainam. Protams, daļa no dizaina ir skaista navigācija jeb izvēlne!
Šajā rakstā pastāstīšu, kā izveidot skaistu horizontālu izvēlni izmantojot XHTML, CSS un jQuery.


XHTML

<div id="ji-konteineris">
<ul id="ji">
<li><a href="#" class="normal">Sākums</a></li>
<li><a href="#" class="normal">Pakalpojumi</a></li>
<li><a href="#" class="selected">Mūsu klienti</a></li>
<li><a href="#" class="normal">Uzņēmums</a></li>
<li><a href="#" class="normal">Par mums</a></li>
<li><a href="#" class="normal">Kontakti</a></li>
</ul>
</div>

jQuery
Tev būs nepieciešama jQuery JavaScript bibliotēka, to tu vari lejupielādēt šeit: http://jquery.com/

$(document).ready(function(){
    $('#ji li .normal').each(function(){
        $(this).before($(this).clone().removeClass().addClass('hover'));
    });
    $('#ji li').hover(function(){
        $(this).find('.hover').stop().animate({marginTop:'0px'},200);
    },

    function(){
        $(this).find('.hover').stop().animate({marginTop:'-25px'},200);
    });
});

CSS

ul{
    height:25px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0;
    padding:0;
}

ul li{
    border:1px solid #444444;
    display:inline-block;
    float:left;
    height:25px;
    list-style-type:none;
    overflow:hidden;
}

ul li a, ul li a:hover,
ul li a:visited{
    text-decoration:none;
}

.normal, .normal:visited,
.hover, .hover:visited,
.selected,.selected:visited {
    outline:none;
    padding:5px 10px;
    display:block;
}

.hover,.hover:visited,
.selected,.selected:visited {
    margin-top:-25px;
    background:url(img/grey_bg.gif) repeat-x #eeeeee;
    color:#444444;
}

.selected,.selected:visited {
    margin:0;
}

.normal, .normal:visited{
    color:white;
    background:url(img/dark_bg.gif) repeat-x #444444;
}

Tas arī viss! :)

Demo: http://demo.niknais.lv/jIzvelne/
Lejupielāde: http://demo.niknais.lv/jIzvelne/jIzvelne.zip