Горизонтальное меню для блогов блоггер на сторонних шаблонах



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

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

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


Код для копирования

<style>
#main-nav {
width: 100%;
background: url(http://2.bp.blogspot.com/-yivLN06w_WA/UkxpIj3VACI/AAAAAAAAEig/PacgqW5kpKU/s1600/main-nav-back.png);
}
ul#main-nav li {
    float: left;
    position: relative;
    display: inline;
}
ul#main-nav li a {
    position: relative;
    width: 110px;
    height: 26px;
    display: block;
    background: url(http://3.bp.blogspot.com/-PO-F77FBhHM/UkXZaQtDfYI/AAAAAAAAEdk/p5e_SWob5K8/s1600/menuback4.png);
    background-position: center center;
    color: #404040;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    padding-top: 12px;
    text-align: left;
    padding-left: 26px;
    font-weight: normal;
    text-shadow: 0 0.6px 0 rgba(255, 255, 255, 0.2), 0 -0.6px #000;
}
ul#main-nav li.home a {
background-image: url(http://1.bp.blogspot.com/-DQKnY9FNBqc/UkXUydz_GTI/AAAAAAAAEdQ/fKEC_e69JI0/s1600/menuback1.png);
color: #03b4cc;
}
ul#main-nav li.home a:hover {
background-image: url(http://1.bp.blogspot.com/-DQKnY9FNBqc/UkXUydz_GTI/AAAAAAAAEdQ/fKEC_e69JI0/s1600/menuback1.png);
color: #f7f7f7;
}
ul#main-nav li.current a {
    background-position: top;
    color: #ffffff;
}
ul#main-nav li a:hover {
    background-position: bottom;
    color: #c2c2c2;
    background: url(http://2.bp.blogspot.com/-IozuG8WB-q0/Ukb654mwScI/AAAAAAAAEd0/8KMul9KuR6M/s1600/menuback5.png);
    padding-left: 25px;
    cursor: pointer;
}
ul#main-nav li.current a:hover {
    background-position: top;
    color: #ffffff;
}
ul#main-nav li.current {
    z-index: 100;
}
ul#main-nav li.home {
    z-index: 100;
}
ul#main-nav li.web-design {
    z-index: 99;
}
ul#main-nav li.web-development {
    z-index: 98;
}
ul#main-nav li.blogging {
    z-index: 97;
}
ul#main-nav li.blogger-tips {
    z-index: 96;
}
ul#main-nav li.widgets {
    z-index: 95;
}
ul#main-nav {
margin-left: 10px;
}
ul#main-nav li {
    float: left;
    position: relative;
    margin-left: -20px;
    display: inline;
}
.mbt_navigation1 {
        position:absolute;
        display:none;
.mbt_navigation1 li {
        clear:both;
}
ul#mbt_navigation1 li a {
background: #242424;
width: 196px;
padding-left: 10px;
color: #c2c2c2;
opacity: 0.9;
font-family: arial;
font-size: 14px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
ul#mbt_navigation1 li a:hover {
background: #535353;
color: #f7f7f7;
margin-left: -22px;
}
#main-nav li ul {
    background: #242424;
    border-left: 2px solid #2b2b2b;
    border-right: 2px solid #2b2b2b;
    border-bottom: 2px solid #2b2b2b;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.9;
    position: absolute;
    width: 177px;
    z-index: 200;
    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;
/*top:1em;
/*left:0;*/
}
#main-nav li:hover ul {
    display: block;
    background-image: none;
}
#main-nav li li {
    display: block;
    float: none;
    padding: 0px;
    width: 245px;
}
.searchbutton1:hover{
opacity: 0.9;
border: none;
}
.icon-right2 {
  color: #4e4e4e;
  font-size: 7px;
}
</style>
<ul id='main-nav'>
<li class='home'><a href='#'>Главная</a></li>
<li class='web-design'><a>Название<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
</ul></li>
<li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>

<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Название</a></li>
</ul></li>


<li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Название</a></li>
</ul></li>
<li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Название</a></li>
</ul></li>
<li class='blogging'><a href='#'>Название</a></li>
<li class='widgets'><a href='адрес'>Виджеты</a></li>
<li class='main-nav'><a>Заголовок <span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>SEO</a></li>
<li><a href='#'>HTML Code</a></li>
<li><a href='#'>HTML Code</a></li>
<li><a href='#'>Заголовок</a></li>
<li><a href='#'>Generator</a></li>
<li><a href='#'>Кнопки</a></li>
</ul></li>
</ul>


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

Вместо решеток вставьте адреса ссылок; &#9660; код иконки, измените на свою при необходимости;



Автор статьи ✎ Olga Protasova Выпуск ✹ 2/11/2016 Ярлыки ►


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

6 коммент. :

  1. Привет,Ольга. Красивое элегантное меню. Иногда смотришь, столько из глаз радует, что в выборе трудно определиться.

    ОтветитьУдалить
  2. Здравствуй Викуля. спасибо, что зашла. Меню мне самой нравится, только устанавливать уже некуда. В рабочих блогах не хочу ничего менять, остается любоваться в тестовых. Изменила бы в этих блогах на меню с одной кнопкой или плавающее боковое, но пока ничего нет.

    ОтветитьУдалить
  3. Оль, где-то у меня было меню, о котором ты говоришь. Протестирую и если рабочее кину тебе. Но не сейчас. С компом ещё проблемы.
    Сейчас надо гуляю по твоему блогу.

    ОтветитьУдалить
  4. Вика, подожду. Решай свои проблемы.

    ОтветитьУдалить
  5. Ольга ввообще непонятно как установить на сторонний шаблон... Оно просто не встаёт вверху блога.
    Что значит "Надо в шаблоне удалять настройки PageList" ?
    Я удалил этот виджет с шаблона.Всё тоже самое.
    Нужно код меню вместо него поставить ?

    ОтветитьУдалить
    Ответы
    1. Павел здравствуйте. Это меню для блогов на платформе блогспот. Для стороннних шаблонов на этой платформе дизайн-добавить гаджет. Для родных блоггеровских шаблонов корректно работает только если установить гаджетом внизу сообщения или в футере.

      Если установить внизу заголовка, будет конкурировать с настройками меню в шаблоне.

      Удалить


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

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

Имя

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

Сообщение *