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



Здравствуйте друзья, читатели и гости. Пишу в этом году последний пост. Пользуясь случаем Поздравляю Вас всех с Наступающим Новым 2016 Годом! Пусть в новом году нам всем повезет больше, чем в уходящем. 

Нашла время поработать с кодом, и сегодня предлагаю для блогов blogger горизонтальное меню с выпадающими вкладками. Такое меню идеально подходит для блогов учителей, у них всегда много информации. Можно сколько угодно запихать в меню ссылок. Пример на скриншоте:


Живой пример в демо блоге, такое меню при прокрутке страницы будет всегда на виду.

Копируем код и вставляем дизайн добавить гаджет куда-нибудь в футер макета блога.

<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>




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

Для оформления вкладок одинаковым цветом, меняйте значения:

background:#f8f8ff;   background: #eee;   background-color: #ccc;

Выделенные жирным шрифтом названия вкладок в меню, рядом решетки. Я оставила на всякий случай. Можно сделать активной само название вкладки. Но это по желанию, при наведении мыши сразу открывается выпадающая вкладка со ссылками.

Ссылок вписала много, потому как запутаетесь закрывать тэги. Если столько не понадобится аккуратно удалите, выделено зеленым цветом. А если нужно добавить эта же строка, вставьте между ссылками.

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

Похожие по теме статьи:





Автор статьи ✎ Olga Protasova Выпуск ✹ 12/29/2015 Ярлыки ►


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

15 коммент. :

  1. Светлана2/1/16 22:47

    Как раз искала что-то подобное. (Потому, что учитель)Только что означает "вствить куда-нибудь в футер макета блога". Мне (не професионалу) совсем не понятно.

    ОтветитьУдалить
    Ответы
    1. Светлана здравствуйте. Гаджет с кодом меню установите в дизайне внизу (где гаджет атрибуция к примеру). Меню фиксированное, поэтому где бы не установили гаджет, меню всегда будет сверху.

      Удалить
  2. Добрый день! Очень классно всё, но как сделать так, чтобы выпадающий список был не вертикальным, а частично горизонтальным, например в три колонки, или просто другом за другом?

    ОтветитьУдалить
  3. И можно ли этоменю воткнуть не в самый вверх? И если можно, то как?

    ОтветитьУдалить
  4. Спасибо большое! А как сделать так, чтобы страницы по ссылке из этого меню открывались не в новой вкладке, а вместо этой? Буду благодарен за ответ!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Пал Саныч. Сделать можно все. К каждой ссылке сделайте подменю. Для примера посмотрите на сайте goo.gl/6636Pn

      2. Установите как обычное меню, не фиксированное. Я писала о таком меню в статье goo.gl/Xu4jhb

      3. Удалите с кода target="_blank Ссылка будет открываться в том же окне.

      Удалить
  5. Olga Protasova здраствуйте.Очень классная меню.Мнго разных перепробовал эта на мой взгляд самая лучшая.Но столкнулся с одной проблемой, не могу поменять цвет кнопок или как правильно вкладок(прошу прощения я далеко не компюторщик слэнга не знаю).Хотелось бы что бы всё меню было одного цвета и никак не получается.Может что прописать где надо,а я незнаю.Уже ни одного цветового кода не пропустил все поперепробовал менять.Вот ссылка на тестовый блог чтоб было поятно о чём я говорю http://x-testt.blogspot.ru/ Буду очень блогодарен если подскажите.

    ОтветитьУдалить
    Ответы
    1. Евгений Черных здравствуйте. В статье дописала, какие значения нужно изменить. Пробуйте, может что-то не поняла, как нужно. Напишите.

      Удалить
  6. Olga Protasova я эти значения все поменял.Просто хотел сделать всё меню одного цвета(фон и названия вкладок).А вот эти самые названия вкладок никак не могу поменять на другой цвет.Olga Protasova если не затруднит посмотрите на моём тестовом блоге https://x-testt.blogspot.ru Большое Спасибо за быстрый ответ.

    ОтветитьУдалить
    Ответы
    1. Евгений Черных, посмотрите в тестовом блоге:

      https://demo-w.blogspot.com/

      Если так, пишите эл.адрес через форму контакты, скину код, в комментах не примет.

      Удалить
  7. Olga Protasova ДА ИМЕННО ТАК. БОЛЬШОЕ ВАМ СПАСИБО!!!

    ОтветитьУдалить
    Ответы
    1. Евгений Черных, код выслала, обращайтесь. Удачи.

      Удалить
  8. Анонимный28/2/17 13:34

    Olga Protasova с декабря месяца пользуюсь этим меню, всё устраивает. Но сейчас возникла необходимость что бы в выпадающем меню с боку(справа) появлялись ещё подменю.Я так понял именно про это и спрашивал выше Пал Саныч. По Вашему совету посмотрел на сайте goo.gl/6636Pn, но у меня ничего не получилось.Проблема вся в том, что не хочу отказываться от фиксированного сверху меню.Olga может подскажите, как правильно внести изменения в код.Весь интернет перекопал ни чего подходящего не нашёл.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Ссылку Пал Санычу дала, но оказалось все не просто. Сейчас работаю с кодом. Подменю добавила, но надо еще корректировать. Если получится, напишу статью.

      Удалить
    2. Анонимный1/3/17 02:03

      Ольга БАЛЬШОЕ Спасибо,что помогаете. Будем ждать публикации.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

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

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

Имя

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

Сообщение *