Многоуровневое вертикальное выезжающее меню

Всем, доброго времени суток. Очередная менюшка для вас. На этот раз предлагаю код выезжающего, вертикального, многоуровневого меню. На странице будет только небольшой лейбл с названием. При нажатии открывается пункты меню, с выпадающими вкладками. Разместить в таком меню можно массу информации.

В результате будем иметь -

Меню всегда на виду в верхнем правом углу страницы.
Легко можно добавить при необходимости, дополнительные пункты и подпункты меню непосредственно в код.
Экономится масса места на странице.
С помощью стилей можно легко подогнать внешний вид под ваш дизайн.
Установка меню в блоге не требует особых навыков.

Предлагаю скопировать код, приведённый ниже и установить его в этот редактор, для просмотра выскальзывающего меню в работе.

<style>#menu-vertical{width:19em;right:-19em;top:5.5em;height:auto;position:fixed;overflow-y:hidden;background-color:# CC6666;transition:right .4s ease-in-out;margin:0;padding:0}
#menu-vertical:hover{right:0;}
#menu-label{display:inline-block;background:#CC0033;position:fixed;text-align:center;right:0;top:3.2em;z-index:100;font-size:14px;line-height:30px;}
#menu-label a{color:#FFF;display:block;text-transform:uppercase;text-decoration:none;width:5.1em;}
#menu-label:hover{opacity:0.67;}
.vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; }
.vertical>ul { margin:0; padding:0; }
.vertical ul,.vertical li { list-style:none; }
.vertical>ul>li { background:#333333; margin:0;text-transform:uppercase;padding:0;color:#fff;}
.vertical>ul>li:hover {background:#4B4B4B}
.vertical>ul>li a{color:#fff}
.vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; }
.vertical>ul>li li { background:#efefef;}
.vertical>ul>li li a{color:#333;text-transform:none}
.vertical a { display:block; text-align:center; text-decoration:none!important; }
.vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;}
.vertical>ul>li ul li a { height:0; transition:.3s ease-out}
.vertical>ul>li:hover ul li a { height:30px; }
.vertical>ul>li:hover ul { opacity:1; }
.vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
.vertical > ul > li li:hover a{color:#fff }</style>

<div id="menu-vertical">
<h3 id="menu-label"><a href="#">Меню</a></h3>
<div class='vertical'>
<ul>
<li><a href='/' title='Menu1'>Меню 1</a>
<ul>
<li><a href='/' title='Menu1'>вкладка 1 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 2 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 3 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 4 Меню 1</a></li>
<li><a href='/' title=' Menu1'>вкладка 5 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu2'>Меню 2</a>
<ul>
<li><a href='/' title='вкладка 1 Menu2'>вкладка 1 Меню2</a></li>
<li><a href='/' title='вкладка 2 Menu2'>вкладка 2 Меню2</a></li>
<li><a href='/' title='вкладка 3 Menu2'>вкладка 3 Меню2</a></li>
<li><a href='/' title='вкладка 4 Menu2'>вкладка 4 Меню2</a></li>
<li><a href='/' title='вкладка 5 Menu2'>вкладка5 Меню2</a></li>
<li><a href='/' title='вкладка 6 Menu2'>вкладка 6 Menu2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu3'>Меню 3</a>
<ul>
<li><a href='/' title='Sub1 Menu3'>вкладка 1 Меню3</a></li>
<li><a href='/' title='Sub2 Menu3'>вкладка2 Меню3</a></li>
<li><a href='/' title='Sub3 Menu3'>вкладка3 Меню3</a></li>
<li><a href='/' title='Sub4 Menu3'>вкладка4 Меню3</a></li>
<li><a href='/' title='Sub5 Menu3'>вкладка5 Меню3</a></li>
<li><a href='/' title='Sub6 Menu3'>вкладка6 Меню3</a></li>
</ul>
</li>
</ul>
</div>
</div>

А теперь с настройками разберёмся.

background:#CC0033  это цвет самого лейбла. Другие background меняйте на своё усмотрение. В первом коде (я его отметила другим шрифтом) изменить можно почти все стили.
Меню  название страниц меню
вкладка 1   название подпунктов меню

Во всех участках текста где прописано <a href='/'  вместо слеша (/)вставляйте адреса своих страниц и подстраниц ( вкладок). Для начинающих блогеров советую прочитать статьи о подстраницах и страницах блога.

Добавляйте для дополнительных пунктов меню и подменю такой участок кода

<ul>
<li><a href='/' title='Menu1'>Меню 1</a>
<ul>
<li><a href='/' title='Menu1'>вкладка 1 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 2 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 3 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 4 Меню 1</a></li>
<li><a href='/' title=' Menu1'>вкладка 5 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>
</ul>
</li>
</ul>

Если есть необходимость добавить дополнительные вкладки (подпункты), добавляйте строки

<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>

Вроде как и все настройки. Прекрасное выезжающее меню с раскрывающимися вкладками. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :