[jQuery] Bold i hover na elementach poziomego menu

Data dodania wpisu: 18-05-2011

Przejdźmy od razu do rzeczy. Wiele stron posiada nawigacyjne menu poziome. W topie strony, czy gdzie tam indziej. Czasami niestety webdesignerów poniesie fantazja i elementy menu po ich wskazaniu mają nie tylko zmienić kolor. Ma również posiadać bold (wytłuszczenie) :)

A jak na taki element menu wskażemy i zostanie on wyboldowany - oczywiste jest, że jego szerokość ulegnie zmianie i przesunie o kilka pikseli pozostałe elementy tego poziomego menu. A będzie to wyglądać np. tak:

Co zrobić, aby elementy menu się jednak nie przesuwały? Wystarczą trzy linijki kodu w jQuery i regułka w CSS dla tagu <a>:)

$(document).ready(function() {
    $('ul li a').each(function() {
        $(this).css('width', $(this).width() + 10);
    });
});
// każdemu elementowi (odnośnikowi) w menu "mierzymy" szerokość 
// i do niej dodajemy kilka (np. 10) pikseli
// co daje gwarancję wystarczającej szerokości nawet dla dłuższych
// elementów menu

Dodatkowo wystarczy tagowi <a> nadać w CSS własność display:block; żeby upewnić się, że nadana szerokość będzie na tym elemencie stała (element musi być blokowy).

I dzięki powyższej operacji, menu po wskazaniu nie rozjeżdża się, i wygląda tak:

Proste?:)

Komentarze

Ten wpis nie posiada jeszcze komentarzy

Comments closed...