Горизонтальное фиксированное многоуровневое меню для блоггер

---

Всем здравствуйте. Сегодня информация о горизонтальном фиксированном меню с выпадающими вкладками плюс подменю. Для установки меню в блоги, придется уважаемые вебмастера серьезно потрудиться с настройками.

Вид меню на скриншоте

Живой пример сходите посмотреть в тестовый блог. Для корректного отображения меню 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>

Код CSS вставьте в тему (старое название шаблон) блога выше строки ]]></b:skin>, удалите с кода <style></style>, или дизайн добавить гаджет, сохраните внизу макета.

Меню прекрасно работает в браузерах: IE11, Опера, Yandex браузер, Mozilla Firefox, Google. Меняйте размеры, цветовые фоны, оформляйте под дизайн своих блогов. На все вопросы отвечу в комментариях или обращайтесь через контактную форму. Всем всего доброго.

Читайте также:

• Меню горизонтальное с соц кнопками для блоггер Проще не бывает;
• Простое горизонтальное выпадающее меню для блогов blogspot;
• Горизонтальное меню с выпадающими вкладками для blogger;
• Анимированное меню;

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