Горизонтальное меню с выпадающими вкладками для blogger
Здравствуйте друзья, читатели и гости. Пишу в этом году последний пост. Пользуясь случаем Поздравляю Вас всех с Наступающим Новым 2016 Годом! Пусть в новом году нам всем повезет больше, чем в уходящем.
Нашла время поработать с кодом, и сегодня предлагаю для блогов blogger горизонтальное меню с выпадающими вкладками. Такое меню идеально подходит для блогов учителей, у них всегда много информации. Можно сколько угодно запихать в меню ссылок. Пример на скриншоте:
Я оформила светлый фон, а Вы можете оформлять под дизайн своих блогов: выделенное синимфон меню; коричневым цвет границы сверху и снизу; лиловым высота; красным размер шрифта и цвет названия вкладки; оранжевым цвет фона выпадающей вкладки и цвет названия ссылок;сиреневым ширина выпадающей вкладки.
background:#f8f8ff; background: #eee; background-color: #ccc;
Выделенные жирным шрифтом названия вкладок в меню, рядом решетки. Я оставила на всякий случай. Можно сделать активной само название вкладки. Но это по желанию, при наведении мыши сразу открывается выпадающая вкладка со ссылками.
Ссылок вписала много, потому как запутаетесь закрывать тэги. Если столько не понадобится аккуратно удалите, выделено зеленым цветом. А если нужно добавить эта же строка, вставьте между ссылками.
У меня все, будут вопросы по оформлению пишите в комментариях. Буду благодарна, если поделитесь со своими друзьми в соц сетях. Всего доброго.
Похожие по теме статьи:
Живой пример в демо блоге, такое меню при прокрутке страницы будет всегда на виду.
Копируем код и вставляем дизайн добавить гаджет куда-нибудь в футер макета блога.
<style>#sbfixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}#sbfixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #sbfixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }* html #sbfixedinner{margin-right:17px;}* html #sbfixed {position:absolute;}#sbtop-wrapper{background:#f8f8ff;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:2px solid #03b4cc;border-top:2px solid #03b4cc;}#sbtopbar{width:1140px;height:40px;margin:0 auto}#sbtop a{display:block;text-decoration:none;font:normal 12px Georgia;text-transform:none;color: #03b4cc; padding:7px 10px 7px}#sbtop a.arrow{);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{width:350px;}#sbtop ul li a{text-align:left;color:#fff;font-size:14px;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: #eee;padding-bottom:0px;-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: #ccc;color:#8b008b}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#404040;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:1px solid #000;border-top:1px solid #fff;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 14px Georgia;color:#000;display:block;line-height:16px;text-transform:uppercase;}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color: #1c8fce}</style>
<div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop">
<li><a href="###"><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="адресl"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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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><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></div></div>
Я оформила светлый фон, а Вы можете оформлять под дизайн своих блогов: выделенное синимфон меню; коричневым цвет границы сверху и снизу; лиловым высота; красным размер шрифта и цвет названия вкладки; оранжевым цвет фона выпадающей вкладки и цвет названия ссылок;сиреневым ширина выпадающей вкладки.
Для оформления вкладок одинаковым цветом, меняйте значения:
Выделенные жирным шрифтом названия вкладок в меню, рядом решетки. Я оставила на всякий случай. Можно сделать активной само название вкладки. Но это по желанию, при наведении мыши сразу открывается выпадающая вкладка со ссылками.
Ссылок вписала много, потому как запутаетесь закрывать тэги. Если столько не понадобится аккуратно удалите, выделено зеленым цветом. А если нужно добавить эта же строка, вставьте между ссылками.
У меня все, будут вопросы по оформлению пишите в комментариях. Буду благодарна, если поделитесь со своими друзьми в соц сетях. Всего доброго.
Похожие по теме статьи: