darmowe szablony stron www

Menu poziome o stałej szerokości przycisków, zmieniające kolor po najechaniu kursorem

Zobacz przykład

Kod html:

<div id="menu">
    <ul>
    	<li><a href="#">Strona główna</a></li>
    	<li><a href="#">O mnie</a></li>
        <li><a href="#">Wydarzenia</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Archiwum</a></li>
        <li><a  id="ostatni" href="#">Kontakt</a></li>
    </ul>
 </div> 

I kod CSS:

#menu {
    height: 25px;
    background: #FFAF4D url(images/menu.png);
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    float: left;
}

#menu ul li a {
    display: block;
    width: 132px;
    font: bold 12px/25px Arial, sans-serif;
    text-decoration: none;
    text-align: center;
    color: White;
    border-right: 1px solid #FF9411;
}

#menu ul li a:hover {
    color: #D07300;
    background: #F1D67A url(images/menu_over.png);
}

#menu ul li a#ostatni {
    width: 135px;
    border-right: none;
}

Przykład podobny do poprzedniego. Tu jednak menu rozciągnięte jest na całą szerokość strony, czyli 800px.

Jedyna istotna różnica to dodanie identyfikatora "ostatni" do ostatniego elementu menu.
Pozostałe zmiany dotyczą arkusza stylów. Szerokość poszczególnych elementów menu będzie stała, a zatem będzie określana szerokość poszczególnych elementów menu (#menu ul li a), a nie padding boczny.

Ustalenie szerokości przycisków. Musi być dokładnie dopasowana do szerokości strony. W naszym przykładzie strona ma szerokość 800px, a elementów w menu jest 6. Najpierw odliczamy obramowania przycisków (border-right). Pomiędzy przyciskami jest ich 5 o szerokości 1px, czyli pozostaje 795px. Ta szerokość podzielona przez 6 wynosi 132px z resztą 3px. Taka też szerokość (width: 132px;) jest zapisana w "menu ul li a". Resztę, natomiast, dodajemy (niekiedy trzeba odjąć) do ostatniego przycisku z id "ostatni" likwidując też niepotrzebne obramowanie po prawej:

#menu ul li a#ostatni {
    width: 135px;
    border-right: none;
}

Należy uważać, by nie robić przycisków zbyt wąskich w stosunku do zawartej tam treści, w przypadku zamiany czcionki na komputerze użytkownika całe menu może się rozsypać. Niektóre dawne przeglądarki tworzą obramowanie do wewnątrz, więc w nich menu nie będzie rozciągnięte na całą szerokość.

Pobierz przykład