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

источник:https://www.bdblogov.ru/2016/01/simple-horizontal-drop-down-menu-for-blogs-blogspot.html Здравствуйте читатели, друзья и гости. В статье Горизонтальное меню с выпадающими вкладками для blogger(https://www.bdblogov.ru/2015/12/horizontal-menu-with-dropdown-tabs-for-blogger.html) информация о фиксированном меню, которое при прокрутке страницы всегда сверху. Убрали значение fixed, а точнее свойство fixed-top, с помощью которого фиксировался (не меняли своего положения при прокрутке страниц) гаджет меню. На скриншоте виджет установлен, как обычное меню (страницы), можно сходить посмотреть в демо блоге. Там все вкладки всплывающие, стоит скрипт для примера, у Вас такого не будет. Простое горизонтальное меню для 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="[url]https://demo-q.blogspot.com"><span>[/url]Главная</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  выделены все цветовые коды, на которые нужно обратить внимание. Могут не понадобится, зависит от настроек в дизайнере. Во второй части кода меню с адресами и названием вкладок разберетесь. Добавляйте или удалите не нужные названия.