Прекрасно подойдёт такая менюшка для кулинарных блогов. Сам код устанавливается в гаджет HTML/JavaScript, лучше где-нибудь в подвале блога. Отображаться оно будет в самом верху.
Прежде чем приступить к созданию вашего меню, у вас должны быть созданы соответствующие страницы и подстраницы (подпункты, вкладки). Прочитайте про страницы здесь(http://www.shpargalochki.ru/2014/04/o-stranicah-v-bloge.html) и про создание подстраниц здесь(http://www.shpargalochki.ru/2014/03/delaem-podstranicy-v-bloge.html).
Теперь, когда у нас есть названия страниц и подстраниц, и их 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>
Цвет меню можно подогнать под дизайн вашего блога. Кто уже знает где в коде эти стили разберутся без труда. Кто пока только начинает, обращайтесь в комментариях.
Вот такое мега - меню с выпадающими вкладками и зафиксированное в самом верху страницы, создаст удобную навигацию по вашему блогу для посетителей.
источник:http://www.shpargalochki.ru/2017/01/gorizontalnoe-fiksirovannoe-vypadajushhee-menju.html
0 коммент.:
Отправить комментарий