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



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

По моему нормально получилось. Для установки меню копируем код ниже и вставить дизайн-добавить гаджет 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 у меня не отображается прошивка.

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

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

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 7/15/2017 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Оленька приветик! Сто лет в обед , как я не появлялась... здорово ты придумала, надо будет заняться усовершенствованием своего блога..но уже по осени... Оленька а как комментарии сделать в блоге?

    ОтветитьУдалить
    Ответы
    1. Валя, здравствуй. Спасибо, что заглянула и за отзыв. По комментам, у тебя в блоге включены комментарии Google+, надо отключить.

      Настройки-перейти Сообщения, комментарии и настройки доступа. Далее "Включить комментарии Google+ в этом блоге"-поставить Нет.
      В блоге появятся комментарии блоггер, а в админке строка "Комментарии"

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *