darmowe szablony stron www

Menu pionowe zmieniające kolor po najechaniu kursorem

Zobacz przykład

Menu ma postać listy nienumerowanej:

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

kod CSS:

#menu {
   width: 160px;  
}

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

#menu ul li {
    display: block;
    margin: 0 0 2px 0;
}

#menu ul li a {
   display: block;
   margin: 0;
   padding: 0 20px 0 0;
   height: 25px; 
   font: bold 12px/25px Arial, sans-serif;
   text-decoration: none;
   text-align: right;
   color: White;
   background: #6A5ACD;  
}

#menu ul li a:hover {
   text-decoration: none;
   color: #D07300;
   background: #F1D67A;
}

Formatowanie listy poprzez arkusz stylów odbywa się na podobnej zasadzie jak w przykładzie z menu poziomym. Podstawowa różnica to brak właściwości "float" dla elementów listy, w związku z czym poszczególne pozycje menu układają się jedna pod drugą.

Przyciski oddalone są w pionie o 2px, co zapisane jest w #menu ul li. Tekst wyrównany jest do prawej strony, oddalony od krawędzi o 20px:

    padding: 0 20px 0 0;    
    ...
    text-align: right;

Pobierz przykład