Простое горизонтальное выпадающее меню для блогов blogspot



Здравствуйте читатели, друзья и гости. В статье Горизонтальное меню с выпадающими вкладками для blogger информация о фиксированном меню, которое при прокрутке страницы всегда сверху. 

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

Для этого с кода я убрала значение fixed, а точнее свойство fixed-top, с помощью которого фиксировался (не менял своего положения при прокрутке страниц) гаджет меню. На скриншоте виджет установлен, как обычное меню (страницы), можно сходить посмотреть в демо блоге. У меня правда там все вкладки всплывающие, стоит скрипт для примера, у Вас такого не будет.

Простое горизонтальное меню для blogger с выпадающими вкладками
Простое горизонтальное меню для blogger с выпадающими вкладками

Код меню устанавливайте дизайн добавить гаджет. А вот с оформлением под дизайн своих блогов придется потратить время и усердно поработать. Не во всех шаблонах blogger меню будет корректно отображаться. В частности касается шаблона "Корпорация Чудеса". В этом шаблоне вкладки не работают. Также не подойдет для сторонних шаблонов. В моих трех блогах ни в одном не работает.

В других шаблонах blogger при оформлении фона меню, вкладок и цвета текста, в коде меню ниже, при изменении цвета ничего не происходит. Цвета зависят от оформления в дизайнере шаблонов. Поэтому настраивайте в дизайнере, и в коде меню.

Выделите мышью и скопируйте код меню

<style>#sbtop-wrapper{background:#000;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:10px double #00b27d;border-top:10px double #00b27d;border-radius:12px;}#sbtop a{display:block;text-decoration:none;font:normal 12px Georgia;text-color: #03b4cc; padding:7px 10px 7px}#sbtop li ul,#sbtop ul li{width:300px;}#sbtop ul li a{text-align:left;color:#333;font-size:16px;font-weight:400;text-transform:none;font-family:Georgia;border:none;padding:5px 10px}#sbtop li ul{z-index:100;position:absolute;display:none;background: #00b27d;border:2px dotted #f8fcff;padding-bottom:10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color: #eee;color:#f8f8ff;}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:0px solid #000;border-top:0px solid #fff;display:block;font-size:1px;height:0;line-height:0;margin:100px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#eee!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 14px Georgia;color:#fff;display:block;line-height:16px;text-transform:uppercase;}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color: #0e5198;}</style>

<div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop">
<li><a href="http://demo-q.blogspot.com"><span>Главная</span></a></li>
<li><a href="#"><span>Название</span></a><ul>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li></ul></li>
<li><a href="#"><span>Название</span></a><ul>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li>
<li><a href="#"><span>Название</span></a><ul>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li>
<li><a href="#"><span>Название</span></a><ul>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li></ul></li>
<li><a href="#"><span>Название</span></a><ul>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li></ul></li>
<li><a href="#"><span>Название</span></a><ul>
<li><a href="адрес"rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li>
<li><a href="#"><span>Название</span></a><ul>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li>
<li><a href="адрес" rel="nofollow" target="_blank">название</a></li></ul></li>
<li><a href="#"><span>Название</span></a></li>
</ul></div><div style="clear:both;"></div></div>



Темный зеленый цвет, это свойство CSS для оформления меню. Выделено жирным зеленым: цвет фона меню, размер, цвет, форма рамки сверху и снизу, а также размер радиуса закругления углов; коричневым цвет названия вкладок; синим размер шрифта; сиреневым фон и ширина выпадающей вкладки, размер, форма и цвет границ рамки вокруг фона вкладки ( в демо блоге форма рамки точечная, цвет границ белый);

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

Во второй части кода меню с адресами и названием вкладок разберетесь. Добавляйте или удалите не нужные названия.

На все вопросы по оформлению отвечу в комментариях или в меню "контакты" форма для связи. Спасибо, если поделитесь со своими друзьями в социальных сетях. Всего доброго.

Почитайте другие статьи по теме:

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 1/28/2016 Ярлыки ►


Открыть комментарии →

4 коммент. :

  1. Спасибо за информацию Оля! Все так как нужно, со статическим меню у меня не получилось справиться, только в вертикальном варианте получается.

    ОтветитьУдалить
    Ответы
    1. Максим здравствуйте. Не совсем понятно, сохраняете стат меню в горизонтальном положении, а устанавливается вертикально? А это меню установилось как надо?

      Удалить
    2. Здравствуйте Ольга! Нет, оно видимо исходя из шаблона блога принимает вертикальне положение и дальше уже ничего с ним сделать не получается. Вообще любые скрипты нужно подбирать исходя из своего шаблона, как я понимаю.

      Удалить
    3. Максим здравствуйте. Да, в некоторых шаблонах вертикальное положение меню "страницы" под заголовком может принимать, если в сайдбаре установлен гаджет "страницы".

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *