Всем здравствуйте. Сегодня информация о горизонтальном фиксированном меню с выпадающими вкладками плюс подменю. Для установки меню в блоги, придется уважаемые вебмастера серьезно потрудиться с настройками.
Вид меню на скриншоте
Живой пример сходите посмотреть в тестовый блог. Для корректного отображения меню HTML код установите дизайн добавить гаджет выше заголовка. Нужно будет разблокировать гаджет Navbar и Заголовок. Рекомендуемые статьи, как реализовать:
- Переместить или удалить заблокированный гаджет в макете блога blogspot;
- Как поднять/опустить заголовок и вставить гаджет сверху заголовка;
- Скрыть navbar atom attribution с помощью CSS Сохранить гаджет без названия заголовка;
Гаджет Navbar разблокируйте и сохраните внизу макета блога. При желании скройте с помощью CSS. Установка HTML кода меню ниже заголовка не даст желаемого результата, выпадающие вкладки не будут открываться. При тестировании пришла к выводу, что на код меню влияют настройки гаджета "страницы" в шаблоне блога.
HTML код
<nav id="access">
<ul id="menu-navigation" class="menu">
<li class="menu-item current_page_item"><a href="#">Название</a></li>
<li class="menu-item"><a href="#">Название</a>
<li class="menu-item"><a href="#">Название</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li></ul>
<li class="menu-item"><a href="#">Название</a></li>
<li class="menu-item"><a href="#">Название</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Заголовок ссылки</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#"><span class="caps">ссылка 2</span></a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item"><a href="#">Название</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li>
<li class="menu-item"><a href="#">Заголовок ссылки</a></li></ul>
<li class="menu-item"><a href="#">Название</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li>
<li class="menu-item"><a href="#">Заголовок</a></li></ul>
<li class="menu-item"><a href="#">Название</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">ссылка 1</a></li>
<li class="menu-item"><a href="#">ссылка 2</a></li>
<li class="menu-item"><a href="#">ссылка 3</a></li>
<li class="menu-item"><a href="#">ссылка 4</a></li>
<li class="menu-item"><a href="#">ссылка 5</a></li>
<li class="menu-item"><a href="#">ссылка 6</a></li>
<li class="menu-item"><a href="#">ссылка 7</a></li>
<li class="menu-item"><a href="#">ссылка 8</a></li>
<li class="menu-item"><a href="#">ссылка 9</a></li>
<li class="menu-item"><a href="#">ссылка 10</a></li>
</ul>
<li class="menu-item"><a href="#">Название</a></li>
</li></li></li></li></li></ul></nav>
Закрыть ссылки от индексации для поисковых систем
<li><a href="#"rel="nofollow">название</a></li>
Открыть ссылки в новом окне
<li><a href="адрес"target="_blank">название</a></li>
Все вместе
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
Добавить/удалить ссылку
<li class="menu-item"><a href="#">Название</a></li>
При добавлении/удалении ссылок внимательно следите за количеством открывающих/закрывающих тэгов <ul></ul> и <li></li>.
CSS код
<style>html, body {
font-size: .875em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegiblity;
}
a {
text-decoration: none;
font-weight: 400;
}
#access {
text-transform: uppercase; *// заглавные буквы заголовков
letter-spacing: .2em;
position: relative;
z-index: 5;
width: 100%; *// ширина меню
border:1px solid #03b4cc; *// размер, форма. цвет рамки
position: fixed;
top: 0;
left:0;
}
#access ul {
float: left;
display: block;
width: 100%;
background: #222; *// фон меню
margin: 0 auto;
list-style: none;
padding:0;
}
#access li {
float: left;
display: list-item;
position: relative;
}
#access a, #access .sub-menu a {
color: #fff; *// цвет шрифта
font-size:12px; *// размер шрифта
padding: .625em 1.25em;
margin: 0;
display: block;
font-weight:700;
}
#access .sub-menu {
background: #222; *// фон выпадающей вкладки
background: rgba(0,0,0,.9);
position: absolute;
width: auto;
height: 0;
overflow: hidden;
opacity: 0;
}
#access .sub-menu li {
float: none;
display: block;
}
#access li:hover .sub-menu {
left: 0;
height: auto;
overflow: visible;
opacity: 1;
}
#access li:hover .sub-menu .sub-menu {
overflow: hidden;
opacity: 0;
height: 0;
}
#access .sub-menu .sub-menu {
background: #03b4cc; *// фон вкладки подменю
border:2px dashed #222; *// размер, цвет, форма границы рамки вкладки подменю
width:250px; *// ширина вкладки подменю
}
#access .sub-menu .sub-menu a {
color: #fff; *// цвет шрифта ссылок
font-size:12px; *// размер шрифта ссылок
}
#access .sub-menu li:hover .sub-menu {
left: 100%;
top: 0;
opacity: 1;
overflow: visible;
height: auto;
}
.sub-menu a {
white-space: nowrap;
}
#access .current_page_item a {
background: #EA4C88; *// цвет фона ссылок во вкладках при наведении
color: #fff; *// цвет шрифта
}
#access li a:hover {
background: #b62a66; *// цвет фона при наведении заголовков
color: #fff !important; *// цвет шрифта
}
</style>
font-size: .875em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegiblity;
}
a {
text-decoration: none;
font-weight: 400;
}
#access {
text-transform: uppercase; *// заглавные буквы заголовков
letter-spacing: .2em;
position: relative;
z-index: 5;
width: 100%; *// ширина меню
border:1px solid #03b4cc; *// размер, форма. цвет рамки
position: fixed;
top: 0;
left:0;
}
#access ul {
float: left;
display: block;
width: 100%;
background: #222; *// фон меню
margin: 0 auto;
list-style: none;
padding:0;
}
#access li {
float: left;
display: list-item;
position: relative;
}
#access a, #access .sub-menu a {
color: #fff; *// цвет шрифта
font-size:12px; *// размер шрифта
padding: .625em 1.25em;
margin: 0;
display: block;
font-weight:700;
}
#access .sub-menu {
background: #222; *// фон выпадающей вкладки
background: rgba(0,0,0,.9);
position: absolute;
width: auto;
height: 0;
overflow: hidden;
opacity: 0;
}
#access .sub-menu li {
float: none;
display: block;
}
#access li:hover .sub-menu {
left: 0;
height: auto;
overflow: visible;
opacity: 1;
}
#access li:hover .sub-menu .sub-menu {
overflow: hidden;
opacity: 0;
height: 0;
}
#access .sub-menu .sub-menu {
background: #03b4cc; *// фон вкладки подменю
border:2px dashed #222; *// размер, цвет, форма границы рамки вкладки подменю
width:250px; *// ширина вкладки подменю
}
#access .sub-menu .sub-menu a {
color: #fff; *// цвет шрифта ссылок
font-size:12px; *// размер шрифта ссылок
}
#access .sub-menu li:hover .sub-menu {
left: 100%;
top: 0;
opacity: 1;
overflow: visible;
height: auto;
}
.sub-menu a {
white-space: nowrap;
}
#access .current_page_item a {
background: #EA4C88; *// цвет фона ссылок во вкладках при наведении
color: #fff; *// цвет шрифта
}
#access li a:hover {
background: #b62a66; *// цвет фона при наведении заголовков
color: #fff !important; *// цвет шрифта
}
</style>
Код CSS вставьте в тему (старое название шаблон) блога выше строки ]]></b:skin>, удалите с кода <style></style>, или дизайн добавить гаджет, сохраните внизу макета.
Меню прекрасно работает в браузерах: IE11, Опера, Yandex браузер, Mozilla Firefox, Google. Меняйте размеры, цветовые фоны, оформляйте под дизайн своих блогов. На все вопросы отвечу в комментариях или обращайтесь через контактную форму. Всем всего доброго.
Читайте также:
Читайте также:
Рекомендуемый контент:
Привет, Ольга. Да, менюшки выпадающее не работают под заголовком в блоггере из - за вкладок. Вообще лазейка есть. чтобы заставить их выпадать. недавно проэкспериментировала. Надо будет написать.
ОтветитьУдалитьВика, от шаблона зависит. В одном из тестовых блогов вкладки выпадают. https://application-2.blogspot.com/
УдалитьНо, в основном не работают. Поэтому в статье написала, чтобы устанавливали над заголовком.
Да, Оль, та же самая история. У меня был начат уже пост, почему не выпадают под заголовком. Сегодня закончила. Там всё просто. Некоторые не очень хотят фиксированное меню в верху. Не знаю почему, мне нравятся такие.
УдалитьВика, мне тоже фиксированное меню нравится, удобно. Я сейчас допишу в статье для тех, кто не хочет такое меню. Там одну строку всего надо удалить.
Удалить