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;
    height: 40px;
    padding: 0 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;" (0 - odstęp w pionie, 25px - odstęp w poziomie).

Pobierz przykład