Вертикальное меню

Вертикальное меню навигации для блога

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

Это черновой вариант вертикального меню. Его можно настроить на своё усмотрение. Все настройки прописаны в скрипте.

Вертикальное меню с этим кодом, настроенное индивидуально, установлено в правом сайдбаре этого блога.

Чтобы установить это вертикальное меню навигации необходимо зайти в свой блог и пройти "Дизайн", "Добавить гаджет", гаджет "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". И учтите, что всегда лучше брать безопасные цвета из таблицы, потому что они правильно отобажаются всеми браузерами.