Креативное вертикальное меню на CSS.

CSS-меню не смотря на свою простоту тем не менее работает не хуже чем все навороченные гаджеты,но не тормозит и не нагружает страницу блога или сайта.Тем более,что настроить и подогнать под дизайн своих страниц вертикальное выпадающие меню в онлайн-редакторе может даже самый не искушённый пользователь.Простая замена переменных в настройках стилей CSS и всё- у вас на странице появиться совсем новое и не похожее на другие выпадающие меню для рубрик.

Установка вертикального выпадающего меню.

Простота установки данного вида меню состоит из небольшого фрагмента CSS-кода с визуальными настройками,который следует установить в раздел для стилей и HTML,куда соответственно говоря и будут вноситься ссылки на необходимые нам разделы.

Код CSS

<style type="text/css">
/* Стили для рубрик v-gol.ru*/
.mark {
font-size: 150%; /* размер шрифта относительно страницы*/
width: 220px; /* ширина основного блога */
text-align: center; font-weight: bold;
border-radius: 15px;
}
.nav {width: 250px; /* ширина выпадающего блока */
    list-style: none;
}
.nav li {
    float: center; right: -15px; top: 10px;
    position: relative;
    background: #ccc; /* цвет выпадающего блока */
z-index: 9;
}
/* круглые края */
.nav > li:first-of-type {
    border-radius: 5px 0 0 5px;
}
.nav > li:last-of-type {
    border-radius: 0 5px 5px 0;
}
/* блоки ссылок */
.nav li a {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 5px;
    border-radius: 35px;
}
/* выпадающее меню */
.sub-nav {width: 250px;
    position: absolute;
    border-top: 15px solid transparent;
    left: -99999px;
    list-style:none;
border-radius: 5px;
}
.nav li:hover .sub-nav {
    left: 0;}
.triangle {
    height: 0;
    border-bottom: 10px solid #34495e;
    position:absolute ;
    margin-top: 5px;
    left: -99999px;
}
.nav li:hover .triangle {
    left: 35px;
}
.sub-nav li {
    white-space: nowrap;
}
/* закругленные края */
.sub-nav > li:first-of-type {
    border-radius: 5px 5px 0 0;
}
.sub-nav > li:last-of-type {
    border-radius: 0 0 5px 5px;
}
/* верхний уровень при наведении */
.nav > li:hover > a {
    background: #dcd;   /* цвет ссылки при наведении мышкой */
    transition: background ease .5s;
}
/* ссылки подменю */
.sub-nav a {
    font-size: 140%;   /* размер текста выпадающего меню */
text-align: center; font-weight: bold;
    margin: 1px;
    transition: background ease .3s;
}
.sub-nav a:hover {
    background: #dcd; /* цвет ссылки списка меню */
}
</style>

Код HTML необходимо будет установить в любой гаджет НТМЛ на боковой панели блога в подходящем месте,чтобы не затруднять процесс добавления новых ссылок.

<nav> <ul class="nav"> <li><a href="" class="mark">Рубрики</a> <i class="triangle"></i> <ul class="sub-nav"> <li>ссылка</li> <li>ссылка</li> <li>ссылка</li> <li>ссылка</li> <li>ссылка</li> </ul> </li> </ul> </nav>

Смотреть ещё Как добавить форум на блогСлайдер- ротатор для блога Ротатор для баннеров Эффекты для фото на CSS. Оформление блоков для кода

Настройка выпадающего меню.

Все основные необходимые настройки внесены в код и подписаны.Для подбора дизайна и цвета скопируйте весь код целиком и внесите в онлайн-отладчик для скриптов,где можно легко и безопасно для блога поправить и исправить все позиции выпадающего вертикального меню для рубрик блога.Пример рабочего варианта раскрывающего меню справа на странице поста блога.