Вертикальное меню с фоновыми изображениями в опрокидывании

В первой из этих статей мы увидели, как использовать CSS вертикальное меню с эффектом наведении курсора мыши , используя разные цвета фона, чтобы отметить элемент, который вы перемещая мышь.

Мы возвращаемся к этому примеру и расширяется, добавив две ключевые особенности этого меню: улучшение доступа с помощью пуль и более высокую производительность с точки зрения дизайна.

Вот результат мы хотим получить:

На скриншоте пример указатель мыши находится в неподвижном положении на второй ссылке в меню.

Эти два изображения используются, например, дать имя и menu_1.gif menu_2.gif:

где размер (150X22 пикселей), были сделаны специально для ширины окна, размера шрифта и отступы назначены отдельные элементы.

Я приглашаю читателей создавать собственные изображения в планировку и размеры, имеющих отношение к его потребностям.

Давайте практике, начиная рисовать меню. Мы анализируем HTML-код:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Страница 1 </ A> </ LI>



        



 <li> <a href="#"> Страница 2 </> </ LI>



        



 <li> <a href="#"> Страница 3 </> </ LI>



        



 <li> <a href="#"> Страница 4 </> </ LI>



        



 <li> <a href="#"> Страница 5 </> </ LI>



    



 </ UL>







 </ P>

Все меню будут в коробку с надписью "меню", в которой мы будем строить маркированный список, содержащий ссылки.

Не назначайте любого идентификатора и ни один класс для связи с любым из пунктов меню (список, список, ссылки), основанные исключительно на идентификации по вложенности элементов.

Следует CSS сопровождаться соответствующими замечаниями:

 / * Стилизованный общем DIV теги * /









 р







 {



    



 Размер шрифта: 10px;



    



 семейство шрифтов: Verdana;







 }









 / * Присваиваем фона и ширина окна в меню * /









 # Меню







 {



    



 фон: # CCDDEE;



    



 Ширина: 150px;







 }









 / * Удалить стиль по умолчанию с UL теги, содержащиеся в меню * /









 # Меню уль







 {



    



 поле: 0px 0px 0px 0px;



    



 Список стиле типа: нет;







 }









 / * Стилизованный списки в меню * /









 # Меню будет







 {



    



 поле: 0px 0px 0px 0px;



    



 границы вниз: 1px твердых # FFFFFF;







 }









 / * Присваиваем стиль ссылки в список меню * /









 # Меню ли, их: наведите







 {



    



 дисплей: блок;



    



 положение: родственника;



    



 текст-отделка: нет;



    



 цвет: # 192939;



    



 начертание шрифта: жирный;



    



 обивка: 5px 5px 5px 5px;







 }









 / * Установка фона ссылки, по умолчанию, и наведении курсора мыши * /









 # Меню там







 {



    



 фонового изображения: URL (menu_1.gif);







 }







 # Меню будет: наведите







 {



    



 фонового изображения: URL (menu_2.gif);







 }

Операций вложенность элементов, как упоминалось выше, убедитесь, что только пули, которые появятся с этой стилизации меню, в результате вложения внутри коробки с ID "меню".

Все остальные пули сайт будет иметь свой образ по умолчанию или явно заданный через CSS.