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

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

<ul id="set-v">
<li><a href=" сылка на страницу сайта">работа на дому</a></li>
<li><a href=" сылка на страницу сайта">работа на дому</a></li>      
<li><a href=" сылка на страницу сайта">работа на дому</a></li>
</ul>

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

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

ul#set-v,
ul#set-v li,
ul#set-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}
ul#set-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}
ul#set-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}
ul#set-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #663333;
color: #FFCCCC;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#set-v a:hover,
ul#set-v li:hover a,
ul#set-v li.iehover a {
background: #FFCC99;
color: #663333;
}

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

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

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

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

ul#set-v,
ul#set-v li,
ul#set-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}
ul#set-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}
ul#set-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}
ul#set-v a{
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: url(http://rabotalegko.com/wp-content/uploads/2014/08/foto-231.gif);
color: #FFCCCC;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#set-v a:hover,
ul#set-v li:hover a,
ul#set-v li.iehover a {
background: url(http://rabotalegko.com/wp-content/uploads/2014/08/foto-232.gif);
color: #663333;
}

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

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

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

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

Похожие записи

  • Полный код простого вертикального меню. На этой странице размещен полный код простого вертикального меню для вашего сайта. Вы можете воспользоваться этой версией, а можете, при внесении некоторых настроек в коде, сделать […]
  • Полный код вертикального выпадающего меню. На этой странице размещен полный код вертикального выпадающего меню для вашего сайта. Вы можете, по своему желанию, внеся некоторые изменения в код, создать свое меню. Все зависит от […]
  • Полный код горизонтального выпадающего меню На этой странице размещен полный код горизонтального выпадающего меню для вашего сайта. Вы можете, по своему желанию, внеся некоторые изменения в код, создать свое меню. Все зависит от […]
  • Полный код простого горизонтального меню. На этой странице размещен полный код для создания простого горизонтального меню для сайта. Вы можете внести некоторые изменения в код меню, создав свое меню, по своему […]
  • Простое горизонтальное меню для сайта Простое динамические меню, отличается от всех типов меню своей простотой и хорошей индексацией поисковиков, а, используя современные методы CSS и JavaScript, можно придать своему меню […]
  • Плагин WordPress Content Slide — простой и удобный слайдер для блога. Многие вебмастера задаются следующим вопросом – как на свой сайт или блог можно вставить красивый слайдер? Слайдер – это специальный модуль с меняющимися картинками (слайдами). Можно […]

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

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

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