Простое вертикальное меню для сайта

Как правило обычно  все меню html имеют примерно одинаковую структуру. Поэтому, для верстки простого вертикального меню мы воспользуемся той же разметкой, что и для горизонтального меню. Напомню, как она выглядит:

посмотреть результат

 

Теперь добавим код CSS:

посмотреть результат

 

В итоге получилось простое и довольно таки симпатичное вертикальное меню. Полный код выглядит так:

 

Также здесь для украшения меню, в качестве фона можно использовать картинку. В начале с помощью программы Photoshop создадим две картинки. Вы можете создать свои картинки, я же воспользуюсь картинками, которые мы использовали для создания простого горизонтального меню. Напомню, как они выглядят:

Безимени-199Безимени-200

 

 

 

 

Далее, в файле стилей поменяем background для элементов ul#set-v a и ul#set-v a:hover. Вот, что у нас получится:

посмотреть результат

 

Всё довольно таки просто. Данный вид меню отображается во всех браузерах (Mozilla, Opera, IE).

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Оставить комментарий

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика