Горизонтальное фиксированное выпадающее меню для 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



14 комментариев:

  1. Очень симпатичное меню, по стилю мне представляется оформление, что-то вроде старой газеты.

    ОтветитьУдалить
    Ответы
    1. Олеся, привет. Ну ты сама знаешь, что стили можно переделывать сколько угодно. Да и делала я его года 2 назад, а вот только вспомнила.

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

    ОтветитьУдалить
    Ответы
    1. Елена, благодарю Вас за отзыв и за подписку. Для Вашей тематики, мне кажется вещь незаменимая. В такое меню можно массу информации вталкать, чтобы и перед глазами читателей была и нужные ссылки для лучшей навигации.
      Пробуйте, если что не понятно разберёмся.

      Удалить
  3. Здравствуйте! А как сделать меню одним цветом? Спасибо заранее за ответ, я только начинаю :)

    ОтветитьУдалить
  4. И ещё не могу понять, как убрать маркированный список. Все пункты получаются с маркером. Может я что-то не так сделала? :( http://park4soul.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Валерия. Я зашла на Ваш блог и не увидела маркированного списка. Такое бывает . У меня на одном тестовом блоге тоже со списком выскакивают менюшки. Вот основные цвета фоновые, которые можно менять
      background:#EEE5DE;
      background-color:#CDC5BF;
      background: #FFFFF0

      А это цвета шрифта
      color:#8b008b;
      color:#fff}
      Поиграйтесь с ними.

      Удалить
  5. Ответы
    1. Если Пригодилось, мне очень приятно.

      Удалить
  6. спасибо большое заменю!! подскажите плиз. с каком месте еода меняется цвет подпунктов когда на них наводишь? не могу найти

    ОтветитьУдалить
    Ответы
    1. Лидия вот в этой строчке в конце кода #navtop ul a:hover{background-color:rgb(211, 196, 182) цвета заданы в формате rgb. Нужно указать другие значения вместо 211, 196, 182.
      Воспользуйтесь хотя бы этим сайтом http://www.stm.dp.ua/web-design/color-html.php там они и в R G B и в HTML Удачи. Благодарю за визит.

      Удалить
  7. Можете написать в личные?? Есть вопрос Зараниее спасибо

    ОтветитьУдалить
  8. У меня есть меню. Можно как то ему добавить подменю??

    ОтветитьУдалить
    Ответы
    1. Юрий, а куда писать - то. Зашла на ваш блог, если вы имеете ввиду меню блога http://olasyukyurii.blogspot.ru. То там не получится. потому что в Блоггере там где предполагаются вкладки меню не выпадает. Вообще -то есть небольшая лазейка. Думаю нужно будет о ней написать.

      Удалить

Пользовательский поиск
Foto Saya
My Photo