Горизонтальное фиксированное выпадающее меню для BLOGGER

Привет, друзья. Горизонтальное липкое меню, которое предлагаю вам сегодня, будет всегда на виду при скроллинге страницы. Это очень удобно для пользователей, так как в любой момент можно перейти по другой вкладке, не возвращаясь к началу страницы.
В выпадающие вкладках каждого пункта меню можно разместить массу ссылок на нужные подстраницы / подпункты, назовите как хотите.

Прекрасно подойдёт такая менюшка для кулинарных блогов. Блогов рукодельниц и учителей. Обычно возникают вопросы у начинающих блогеров, что и куда вставлять в коды такого выпадающего меню. Сегодня подробнее на этом остановимся. На самом деле это всё достаточно просто. Сам код устанавливается в гаджет HTML/JavaScript, лучше где-нибудь в подвале блога. Не беспокойтесь, отображаться оно будет в самом верху.

Посмотрите на тестовом блоге это фиксированное меню. Я сделала второй пункт в качестве примера для кулинарного блога. Понятно, что вы это всё поменяете на свои пункты и подпункты.

Прежде чем приступить к созданию вашего меню, у вас должны быть созданы соответствующие страницы и подстраницы (подпункты, вкладки). Прочитайте про страницы здесь и про создание подстраниц здесь.

Теперь, когда у нас есть названия страниц и подстраниц, и их URL адреса, можно начать делать именно ваше меню.

Скопируйте предложенный ниже код в черновик или блокнот. И разберём что и куда вставлять.

<div id="navfixed"><div id="navfixedinner"><div id="navtop-wrapper"><div id="navtopbar"><ul id="navtop">
<style>
#navfixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#navfixedinner{text-align:center;background:transparent;height:30px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #navfixedinner{margin-right:-145px;voice-family: "\"}\""; voice-family:inherit; }* html #navfixedinner{margin-right:17px;}
* html #navfixed {position:absolute
;}
#navtop-wrapper{background:#EEE5DE;width:100%;display: float: left;;margin:0 auto;padding:0 auto;-moz-box-shadow: inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
border-bottom:3px solid #4682B4  ;border-top:3px solid #4682B4;}
#navtopbar{width:1140px;height:30px;margin:0 auto}
#navtop a{display:block;text-decoration:none;font:normal 12px Georgia;text-transform:none;color:#8b008b; padding:8px 11px 8px}
#navtop a.arrow{);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#navtop li{float:left;position:static;width:auto}
#navtop li ul,#navtop ul li{width:300px;}
#navtop ul li a{text-align:left;color:#fff;font-size:16px;font-weight:400;text-transform:none;font-family:Georgia;border:none;padding:5px 10px}
#navtop li ul{z-index:100;position:absolute;display:none;background: #FFFFF0;padding-bottom:0px;-moz-box-shadow: inset 0 0 5px #000000;
   -webkit-box-shadow: inset 0 0 5px #000000;
   box-shadow:         inset 0 0 5px #000000;}
#navtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#CDC5BF;color:#fff}
#navtop li:hover ul,#navtop li.hvr ul{display:block}
#navtop li:hover ul a,#navtop li.hvr ul a{color:#404040;background-color:transparent;text-decoration:none}

#navtop ul a:hover{background-color:rgb(211, 196, 182)!important;color:#fff!important;text-decoration:none }
#navtop a span,#navtop a.arrow span{font:normal 16px Georgia;color:#000;display:block;line-height:16px;text-transform:uppercase;}
#navtop li:hover a span,#navtop li:hover a.arrow span{color: #1c8fce}</style>


<li><a href="###"><span>Главная</span></a></li>

<li><a href="###"><span>Вторые блюда</span></a>
<ul>

<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><a href="###"><span>Пункт 2</span></a>
<ul>

<li><a href="адрес">Подпункт 1</a></li>
<li><a href="адрес"  >Подпункт 2</a></li>
<li><a href="адрес">Подпункт 3</a></li>
<li><a href="адрес" >Подпункт 4</a></li>
<li><a href="адрес" >Подпункт 5</a></li>
</ul></li>

<li><a href="###"><span>Пункт 3</span></a>
<ul>

<li><a href="адрес" >Подпункт 1</a></li>
<li><a href="адрес" >Подпункт 2</a></li>
<li><a href="адрес" >Подпункт 3</a></li>
<li><a href="адрес" >Подпункт 4</a></li>
<li><a href="адрес" >Подпункт 5</a></li>

</ul></li>

<li><a href="###"><span>Пункт 4</span></a>
<ul>

<li><a href="адрес">Подпункт 1</a></li>
<li><a href="адрес"">Подпункт 2</a></li>
<li><a href="адрес">Подпункт 3</a></li>
<li><a href="адрес">Подпункт 4</a></li>
<li><a href="адрес">Подпункт 5</a></li>

</ul></li>

<li><a href="###"><span>Пункт 5</span></a>
<ul>

<li><a href="адрес">Подпункт 1</a></li>
<li><a href="адрес">Подпункт 2</a></li>
<li><a href="адрес">Подпункт 3</a></li>
<li><a href="адрес">Подпункт 4</a></li>
<li><a href="адрес">Подпункт 5</a></li>

</ul></li>

<li><a href="###"><span>Пункт 6</span></a>
<ul>

<li><a href="адрес" >Подпункт 1</a></li>
<li><a href="адрес" >Подпункт 2</a></li>
<li><a href="адрес" >Подпункт 3</a></li>
<li><a href="адрес" >Подпункт 4</a></li>
<li><a href="адрес" >Подпункт 5</a></li>
</ul></li>

<li><a href="###"><span>Пункт 7</span></a>
<ul>

<li><a href="адрес" >Подпункт 1</a></li>
<li><a href="адрес" >Подпункт 2</a></li>
<li><a href="адрес" >Подпункт 3</a></li>
<li><a href="адрес" >Подпункт 4</a></li>
<li><a href="адрес" >Подпункт 5</a></li>
</ul></li>

<li><a href="###"><span>Пункт 8</span></a>
<ul>

<li><a href="адрес" >Подпункт 1</a></li>
<li><a href="адрес" >Подпункт 2</a></li>
<li><a href="адрес" >Подпункт 3</a></li>
</ul></li>

<li><a href="###"><span>Об авторе</span></a></li>

</ul></div><div style="clear:both;"></div></div></div></div>

В коде вместо решёток ### пишем URL адрес страниц. В строке Пункт - название страницы. То, что отмечено розовым цветом это подпункты меню (подстраницы). Также адрес каждой подстраницы и её название.

Если у вас предполагается меньше пунктов меню, убирайте из кода вот такой участок

<li><a href="###"><span>Пункт</span></a>
<ul>

<li><a href="адрес" >Подпункт 1</a></li>
<li><a href="адрес" >Подпункт 2</a></li>
<li><a href="адрес" >Подпункт 3</a></li>
<li><a href="адрес" >Подпункт 4</a></li>
<li><a href="адрес" >Подпункт 5</a></li>
</ul></li>

Если хотите больше пунктов то, соответственно - добавляйте. То же самое, с подпунктами. Добавляйте или убирайте строку

<li><a href="адрес" >Подпункт</a></li>

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

Тут главное понять что и где должно быть прописано в коде и всё пойдёт как по маслу.

Хочу ещё добавить. Некоторые не хотят, чтобы страницы индексировались поисковиками. Для этого нужно добавить тег rel="nofollow" в коде у каждого пункта или подпункта.

<li><a href="адрес"rel="nofollow" >Подпункт</a></li>

Если нужно, чтобы страница открывалась в новой вкладке браузера, добавляем target="_blank".

<li><a href="адрес"rel="nofollow" target="_blank" >Подпункт</a></li>

Цвет меню можно подогнать под дизайн вашего блога. Кто уже знает где в коде эти стили разберутся без труда. Кто пока только начинает, обращайтесь в комментариях.

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

Всем удачи и до встречи. Спасибо.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email