Здравствуйте друзья и читатели. Для Ваших блогов еще вариант горизонтального меню с выпадающими вкладками. Для корректной установки придется уделить время. В заголовке статьи я обратила внимание на сторонние шаблоны, в них легче установить и настроить.
На родных шаблонах блоггер можно добавить гаджет над заголовком, или у кого в футере есть возможность добавить гаджет на всю ширину блога. Если установите под заголовком, где обычно меню "страницы", расположение вкладок изменится, настроить трудно. Надо в шаблоне удалять настройки 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'>▼</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'>▼</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'>▼</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'>▼</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'>▼</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>
Настройки: выделено зеленым цвет и размер шрифта вкладок; синим цвет вкладки главной страницы; бардовым цвет заголовков при наведении мыши; коричневым отступ от края слева ( этому значению уделите внимание), голубым цвет и размер иконки; сиреневый цвет удалить или добавить вкладку и ссылки в выпадающем меню; лиловым размер шрифта названий ссылок в выпадающей вкладке;
Вместо решеток вставьте адреса ссылок; ▼ код иконки, измените на свою при необходимости;
На вопросы по настройке и установке меню отвечу в комментариях. Удачи и всего доброго.
Почитайте статьи по теме:
Почитайте статьи по теме:
Рекомендуемый контент:
Привет,Ольга. Красивое элегантное меню. Иногда смотришь, столько из глаз радует, что в выборе трудно определиться.
ОтветитьУдалитьЗдравствуй Викуля. спасибо, что зашла. Меню мне самой нравится, только устанавливать уже некуда. В рабочих блогах не хочу ничего менять, остается любоваться в тестовых. Изменила бы в этих блогах на меню с одной кнопкой или плавающее боковое, но пока ничего нет.
ОтветитьУдалитьОль, где-то у меня было меню, о котором ты говоришь. Протестирую и если рабочее кину тебе. Но не сейчас. С компом ещё проблемы.
ОтветитьУдалитьСейчас надо гуляю по твоему блогу.
Вика, подожду. Решай свои проблемы.
ОтветитьУдалитьОльга ввообще непонятно как установить на сторонний шаблон... Оно просто не встаёт вверху блога.
ОтветитьУдалитьЧто значит "Надо в шаблоне удалять настройки PageList" ?
Я удалил этот виджет с шаблона.Всё тоже самое.
Нужно код меню вместо него поставить ?
Павел здравствуйте. Это меню для блогов на платформе блогспот. Для стороннних шаблонов на этой платформе дизайн-добавить гаджет. Для родных блоггеровских шаблонов корректно работает только если установить гаджетом внизу сообщения или в футере.
УдалитьЕсли установить внизу заголовка, будет конкурировать с настройками меню в шаблоне.