Продолжаю рубрику по Blogspot. Сегодня расскажу, как сделать простое горизонтальное меню для удобной навигации по блогу. Пример реализации данного метода вы можете видеть в моём блоге прямо под шапкой. Вариант, который будет описан ниже, является самым простым внедрением горизонтального меню и может быть использовано на абсолютно любой платформе с поддержкой CSS. У платформы blogger от Гугла для этого есть гаджет "HTML/JavaScript".Техническая часть для blogspot:
1. Создаём в нужном нам месте шаблона гаджет HTML/JavaScript;
2. Вставляем в него следующий код:
<center>3. Редактируем код:
<style>
<!--
div#menunav {
float: left;
border-top: 1px solid #bbbbbb; /* граница сверху */
border-bottom: 1px solid #bbbbbb; /* граница снизу */
font-size: 14px; /* размер шрифта */
background-color: #bbbbbb; /* цвет фона меню */
padding: 0 0 0 5px; /* левый отступ кнопок */
margin: 5px 0;
}
div#menunav ul {
margin: 0px;
padding: 0px;
}
* html div#menunav ul {
float: left;
border-left: 1px solid #bbbbbb; /* левая вертикальная черта к ul */
margin-left: 15px;
}
* html div#menunav a {
display: block;
}
div#menunav li {
float: left;
list-style-type: none; /* без маркеров списка */
background-color: #464451; /* цвет кнопки до наведения */
border-right: 1px solid #bbbbbb; /* разделительные линии между li */
}
div#menunav li:first-child {
border-left: 1px solid #bbbbbb; /* первая вертикальная линия меню */
}
div#menunav a {
text-decoration: none; /* без подчёркивания ссылок */
padding: 0px 10px; /* отступы сверху и снизу */
color: #bbbbbb; /* цвет шрифта */
}
div#menunav a:hover {
color: #ffffff;
}
div#menunav li:hover {
background-color: #45161c; /* цвет кнопки после наведения */
}
/*powered by seo-aspirant*/
-->
</style>
<div id="menunav" style="width: 970px;"> <!-- shirina menu -->
<ul>
<li><a href="http://seo-aspirant.blogspot.com/2009/08/blog-post_19.html">название 1 ссылки</a></li> <!-- vasi ssilki -->
<li><a href="http://seo-aspirant.blogspot.com/2009/09/sape-ucoz.html">название 2 ссылки</a></li>
<li><a href="http://seo-aspirant.blogspot.com/2009/09/sexcash.html">название 3 ссылки</a></li>
<li><a href="http://seo-aspirant.blogspot.com/2010/01/blog-post_13.html">название 4 ссылки</a></li>
<li><a href="http://seo-aspirant.blogspot.com/2009/08/blog-post_24.html">название 6 ссылки</a></li>
<li><a href="http://seo-aspirant.blogspot.com/2009/11/wtk.html">nazvanie 6 ssilki</a></li>
<li><a href="http://seo-aspirant.blogspot.com/2009/08/blog-post_5609.html">название 7 ссылки</a></li>
<li><a href="http://seo-aspirant.blogspot.com/2010/01/blog-post_5634.html">название 8 ссылки</a></li>
<li><a href="http://seo-aspirant.blogspot.com/2010/01/seo-aspirant.html">название 9 ссылки</a></li>
</ul>
</div>
</center>
Сразу нужно сделать отступление по коду для новичков. То, что находится между /* ... */ никак не будет влиять на гаджет. Это пояснения, чтобы вам было проще настроить меню.
Теги в начале и конце кода "center" сделают выравнивание вашего меню по центру страницы.
/* granica sverxy */ - первое значение "1px" показывает, сколько пикселей будет отступ, второе "#bbbbbb" - это цвет границы. Аналогично можно поменять и остальные переменные.
Не забудьте заменить в коде http://seo-aspirant... на адрес своего блога. Т.к. в данном случае мы редактируем всего лишь код отдельного элемента, то шаблон блога сохранять не обязательно, ведь гаджет можно в любое время удалить.
Чтобы внести изменения нужно обладать базовыми знаниями CSS, ну или просто экспериментировать с переменными.
Источник: Blogspot - как сделать простое горизонтальное меню.
