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

---

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

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

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

<style>

#main-nav {

width: 100%;

background: url(https://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(https://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(https://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(https://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(https://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; код иконки, измените на свою при необходимости;

На вопросы по настройке и установке меню отвечу в комментариях. Удачи и всего доброго.

Почитайте статьи по теме: 

• Как поднять/опустить заголовок и вставить гаджет сверху заголовка;
• Горизонтальное меню с выпадающими вкладками для blogger;
• Простое горизонтальное выпадающее меню для блогов blogspot;
• LightBox в блоггер Изменить фон с использованием CSS;

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