 Это черновой вариант вертикального меню. Его можно настроить на своё усмотрение.
Все настройки прописаны в скрипте.
Вертикальное меню с этим кодом, настроенное индивидуально, установлено в правом сайдбаре этого блога.
Чтобы установить это вертикальное меню навигации необходимо зайти в свой блог и пройти "Дизайн", "Добавить гаджет", гаджет "HTML/JavaScript". В гаджет вставляем следующий код:
<style type="text/css">
#ddblueblockmenu{
border: 1px solid #000000; /* Ширина и цвет рамки всего меню */
border-radius:2px /* Закругление рамки всего меню (не должно быть больше других закруглений) */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /* Шрифт меню */
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #FFFFFF; /* Цвет шрифта меню */
background-color: #2175BC; /* Цвет фона меню */
border-bottom: 1px solid #90BADE; /* Цвет рамки у кнопки меню */
border-radius:4px; /* Закругление рамки у кнопки меню */
border-left: 7px solid #1958B7; /* Ширина и цвет левой рамки меню */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586D7; /* Цвет фона заголовка вертикального меню */
border-left-color: #1C64D1; /* Цвет левой рамки заголовка */
}
#ddblueblockmenu div.menutitle{
color: #FFFFFF; /* Цвет шрифта заголовка меню */
border-bottom: 1px solid black; /* Ширина и цвет рамки заголовка меню */
border-radius:4px; /* Закругление рамки заголовка меню */
padding: 1px 0;
padding-left: 5px; /* Отступ слева заголовка меню */
background-color: #000000; /* Цвет фона заголовка меню */
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /* Шрифт заголовка меню */
}
</style>
<div id="ddblueblockmenu">
<div class="menutitle"<a href="http://ссылка/">Содержание</div>
<ul>
<a href="http://ссылка/">Главная</a>
<a href="http://ссылка/">Меню 1</a>
<a href="http://ссылка/">Меню 2</a>
<a href="http://ссылка/">Меню 3</a>
<a href="http://ссылка/">Меню 4</a>
<a href="http://ссылка/">Меню 5</a>
</ul></div>
Теперь надо настроить цвет, рамки, фон и шрифт в соответствии с дизайном блога, или как вы представляете вертикальное меню навигации на своем блоге.
Кстати, вместо номера цвета из таблицы можно вставить его название, например вместо "#000000" можно вставить название цвета в HTML - "Black". И учтите, что всегда лучше брать безопасные цвета из таблицы, потому что они правильно отобажаются всеми браузерами.
|
|
0 коммент.:
Отправить комментарий