Меню за блог с шаблон от трети страни

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

В такива шаблони менюто е по-лесно за инсталиране и конфигуриране, отколкото в тези на Blogger. Но и в родните блогерски шаблони също може да се инсталира, макар, че понякога стои некоректно, размества се.

Описание

Менюто заема цялата ширина на блога и не е фиксирано. В шаблоните на нашия Blogger можете да добавите притурка над заглавката или в долния колонтитул, където тя ще заема цялата ширина на блога. Ако го поставите под заглавката, където обикновено стои менюто "страници", оформлението на разделите ще се промени и е трудно да се конфигурира. Тогава ще трябва да изтриете в кода на шаблона приспособлението PageList. За да разгледате предлаганото меню копирайте посочения по-долу код и използвайте този инструмент.

Код на менюто

<style>

#main-nav {

width: 100%;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk6Aj2Jlz1-p5yyzGizbvqlwy9pUxpLIs5_bQ5zt6ZsYZFgwzTgog6A29482zUNGQkktc72P8wV6C0wvzYEd115pOk2ojB5ioqkRyj1zKt-W3olpva5gULk5x4W7hiYPoVdxnyrpz46Gb6/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbuUfsNhxbwB6bDXCnoA8CUNimqkHuzX-gJSjOehDTgs5iQdib33_kPr3KIyZeRzc1g3QiEegD4j4tl-ayaM5xD1TWW7R7HbYHKMmbZeatsXbXAZoWi2FeCl4H3X0e0NCEmRPKo_3JTS8P/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lXVaKn3Qz9GHYsGKpSy-TEuK2S2Dy8ljUvJ5s8coKk7wlVEYMVcGLmp8-AymJ9APFJdLV3NvpXnsrSexJkuoELVUz3WXSvju6UsUWi24wy0rHWYmzHytUp_VbBtb8_tdiHCoicvWQOBr/s1600/menuback1.png);

color: #03b4cc;

}

ul#main-nav li.home a:hover {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lXVaKn3Qz9GHYsGKpSy-TEuK2S2Dy8ljUvJ5s8coKk7wlVEYMVcGLmp8-AymJ9APFJdLV3NvpXnsrSexJkuoELVUz3WXSvju6UsUWi24wy0rHWYmzHytUp_VbBtb8_tdiHCoicvWQOBr/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu-lXrBo5y-IAvNH6agA3evI5YpiOZx47OizyogXkKDOzijyFksMSULAV-idMd1UnFS1KE5D_LdSFRfLIbrl7dIF5xH-AWo0924pAQHamIdcO2bSwLj02Yr4Ez3LjTjb0hesQvO7TIGBy3/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; на иконата ▼ променете, ако смятате, че е необходимо;


Ще отговоря на въпросите ви в коментарите относно настройките и инсталирането на менюто. Успех в работата над менюто и всичко най-добро.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: