Pionowe menu z obrazów tła w rollover

W starym artykule zobaczyliśmy jak z CSS pionowe menu z mocą mouseover przy użyciu innego koloru tła, aby zaznaczyć element, który przesunięcia myszy.

Mamy ponownie i rozszerzyć ten przykład, dodając dwie najważniejsze funkcje tego menu: zwiększenie dostępności za pomocą kul i lepszą wydajność w zakresie projektowania.

Oto rezultat chcemy osiągnąć:

W przykładowym zrzucie ekranu wskaźnika myszy jest zamrażane na drugi link w menu.

Są to dwa obrazy używane na przykład przypisać nazwę i menu_2.gif menu_1.gif:

których rozmiar (150X22 pikseli) przeprowadzono specjalnych badań w zależności od szerokości okna, rozmiar czcionki i wypełnienia przypisanych do poszczególnych elementów.

Zapraszam czytelników do tworzenia własnych obrazów do rozmieszczenia i wymiarów istotnych dla jego potrzeb.

Praktyki Załóżmy, począwszy zwrócić menu. Analizujemy kod HTML:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Strona 1 </ a> </ li>



        



 <li> <a href="#"> Strona 2 </ a> </ li>



        



 <li> <a href="#"> Page 3 </ a> </ li>



        



 <li> <a href="#"> Page 4 </ a> </ li>



        



 <li> <a href="#"> Strona 5 </ a> </ li>



    



 </ Ul>







 </ Div>

Wszystkie menu będą w pudełku z napisem "menu", w którym będziemy budować listy punktowanej, która zawiera łącze.

Nie przydziela identyfikator klasy a nie linki do wszystkich elementów menu (lista, lista, linki), wyłącznie w oparciu o identyfikację przez zagnieżdżanie elementów.

Towarzyszy CSS po odpowiedniej uwagi:

 / * Stylizowane ogólnie tag DIV * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Przypisywanie tła i szerokość pola w menu * /









 Menu #







 {



    



 background: # CCDDEE;



    



 width: 150px;







 }









 / * Eliminuje domyślny styl z UL tag zawarte w menu * /









 # Menu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stylizowane list znajdujących się w menu * /









 # Menu będzie







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Przypisywanie stylu do linków na liście menu * /









 # Menu li, że: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Ustawiamy tło link, a po najechaniu myszką domyślnie * /









 # Je do menu







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu będzie a: hover







 {



    



 background-image: url (menu_2.gif);







 }

Zagnieżdżanie operacji z elementów, jak już wspomniano, zapewnia, że ​​tylko kula, która pojawia się z tej stylizacji jest menu, z powodu zagnieżdżenia w polu z ID "menu".

Wszystkie inne kule tego miejsca będzie ich sposób domyślny lub wyraźnie przypisane przez CSS.