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

---

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

По-моему, нормально получилось. Для установки меню копируем код ниже, далее вставить дизайн-добавить гаджет HTML/JavaScript, сохранить в нужном месте макета блога.

HTML код

<style type='text/css'>  #v_mnu_01 ul {  list-style: none; margin: 0;  padding: 0;  font-family: Arial;  font-size: 16px;  font-style: italic; text-decoration: none;  }  

  #v_mnu_01 {background-color: #0a9e08;  width: auto; margin: 3px; }

                                                          

 #v_mnu_01 li a:link, #v_mnu_01 li a:visited {  color: #FFFFFF; display: block ;  background-color: #000;  border-radius:10px;-moz-border-radius:10px;

-webkit-border-radius:10px; outline: 2px dashed #fff; outline-offset: -7px; padding: 10px; min-height: 35px; padding:15px 0 0 15px;}

 #v_mnu_01 li a:hover {color: #FFFF00;  background:  #03b4cc; padding:15px 0 0 15px;}</style> 

<div id="v_mnu_01">

  <ul>

<li><a href="адрес ссылки">Главная</a></li>

<li><a href="#">Контакты</a></li>

<li><a href="#">Карта блога</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Социальные сети</a></li></ul>

</div>

Настройки: выделено жирным: размер шрифта; italic-наклонный шрифт (курсив). если нужно обычный. замените на normal; ширина меню автоматически; margin:3px-расположение меню от левого края;

Выделено жирным сиреневым цветом: color: #FFFFFF цвет шрифта названия ссылок;  background-color: #000; цвет поля вкладки (черный);  border-radius:10px; радиус закругления углов поля; 2px dashed #fff; размер, форма и цвет прошивки; outline-offset: -7px выводим рамку внутри элемента; padding:10px; отступ пунктира от полей; 

Если вместо черного фона вкладок вставить фон градиент, получится супер меню, посмотрите в демо блоге. По ссылке ниже почитайте статью "меню для блоггер с фоном градиента". 

Выделено зеленым цветом: цвет ссылки и поля вкладки при наведении мыши; padding:15px 0 0 15px; расположение текста (названия ссылок) верх-низ, слева-справа;

Выделено синим: url адрес ссылки и пишем название. Вместо решеток также вставьте адрес ссылок;

Выделено красным: вставьте любой цвет, и меню будет с внешним фоном, пример

Немного неудачно получился коллаж скриншотов, такой вид будет иметь меню с добавлением внешнего фона. Меню корректно отображается в браузерах Гугл Хром, Опера, Мазила, Яндекс браузер. В ИЕ11 у меня не отображается прошивка.

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

Читать также:

• Меню для блоггер с фоном градиента;
• Простое горизонтальное выпадающее меню для блогов blogspot;
• Горизонтальное фиксированное многоуровневое меню для блоггер;
• Анимированное меню;

Рекомендуемый контент: