Креативное вертикальное меню на 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.
Оформление блоков для кода

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


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

Отправить комментарий