darmowe szablony stron www

Menu poziome zmieniające kolor po najechaniu kursorem

Zobacz przykład

Menu zmieniające kolor po najechaniu kursorem można w łatwy sposób wykonać z pomocą css, bez użycia JavaScriptu. 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="#">Kontakt</a></li>
        </ul>

</div>

I kod CSS:

#menu {
    height: 40px;
    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;
    float: left;
    padding: 0 25px 6px 25px;
    font: bold 13px/34px Arial, sans-serif;
    text-decoration: none;
    color: White;
    border-right: 1px solid #2C4D93;
}

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

Jak widać menu jest listą nienumerowaną <ul>, a poszczególne jego elementy kolejnymi elementami listy <li>.

Kluczową sprawą dla zamiany listy na menu poziome jest zapis "float: left; " oraz "list-style: none;" usuwający znaki wypunktowania.
Jeśli chcemy wyrównać menu do prawej krawędzi dodajemy: "float: right;" do #menu ul.

Wygląd pojedynczych elementów menu. Szerokość ich zależy od długości napisów oraz odstępu od krawędzi bocznych, który możemy regulować - linia "padding: 0 25px 6px 25px;" (pierwsze 25px - odstęp od prawej krawędzi, drugie 25px - od lewej krawędzi).
Wysokość całego menu wynosi 40px, tyle też wynosi wysokość pojedynczego elementu menu #menu ul li a: 34px (wysokość linii) + 6px (padding dolny)

Pobierz przykład