Jak zrobić takie przyciski (css)

Dla specjalistów Webmastering
#1

Jak wykonać takie przyciski menu?

http://kinkywiztattoo.wix.com/kinkywizardtattoo

nie mam pojęcia a bardzo mi się podobają, będzie ktoś umiał mi pomóc? :smiley:

#2

tak na szybko coś takiego skleciłem:

http://jsfiddle.net/mS4YE/

#3
#4

Nie przyjrzałeś się dobrze (albo po prostu nie zauważyłeś tego triku) :slight_smile:

li {

     display:inline-block;

    padding: 20px;

    border-top: solid 1px white;

}


li:hover{

    border-top-width:3px;

        padding-top:18px;

}

w momencie najechania myszką na element w moim przykładzie zwiększam grubość górnej ramki o 2 piksele (z 1px na 3px). I dla równowagi tekstu odejmuje te 2 piksele od paddingu a więc padding-top równy jest 18.

#5

Aby zmieniać tło podlinkuj jquery i użyj :

$(document).ready(function(){

    $('#menu li').click(function() {

        $(this).siblings('li').removeClass('active');

        $(this).addClass('active');

    });

});

dalej już tylko zdefinuj sobie co ma się dziać po naciśnięciu np:

li.active {background:red;}
#6

Heh dobry trik, wgl nie zauważyłem patentu :-o świetne.