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

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

меню для блога

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

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

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

<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 :

15 комментариев:

  1. Интересно! Спасибо, Виктория!

    ОтветитьУдалить
  2. Да, Ирина. Очень много может в себя вместить это менюшка. И минимум места.

    ОтветитьУдалить
  3. Привет, Вика. Да, это интересно. Правда, посидеть надо, чтобы под свой блог скорректировать (страницы, подстраницы, адреса). Спасибочки, ох и нравятся мне твои краткие и актуальные шпаргалки.

    ОтветитьУдалить
    Ответы
    1. Люба, привет. С любой менюшкой посидеть нужно. Но в итоге вся информация (навигация) в одном месте. Это важно.

      Удалить
  4. Ух ты! Как интересно )) Спасибо большое, Вика!

    ОтветитьУдалить
  5. Victoria, да, необычная такая менюшечка получилось, с изюменкой.

    ОтветитьУдалить
  6. вИК! зДОРОВО! я БЫ ПОДОГНАЛА ЭТО МЕНЮ ДЛЯ "ПРОЕКТОВ БЛОГА". нО НЕ БУДЕТ ЛИ КОНКУРИРОВАТЬ С ТВОИМ МЕНЮ КНИЖЕЧКОЙ.? нЕ СЛИШКОМ ЛИ МНОГО ССЫЛОК БУДЕТ?

    ОтветитьУдалить
    Ответы
    1. Ирина, конкуренции не будет - это точно. Но если одни и те жа ссылки в двух менюшках - перебор.

      Удалить
  7. Прекрасное меню.Спасибо ,Вика .Воспользуюсь .

    ОтветитьУдалить
    Ответы
    1. Пользуйтесь, если понравилась менюшка. Спасибо.

      Удалить
  8. Да вот и я так думаю. Но я уже придумала, как сделаю.. Буду играться.Не знаю получится ли?

    ОтветитьУдалить
  9. Вика, ну вот - доигралась. Только одно НО.. В редакторе цвет текста менюшек1.2.3.4 белый,( хотя надпись "проекты блога"- осталась белой) а в блоге - голубой. Не очень видно. Мучилась , мучилась- не нашла, где его поменять. Видимо цвет самого блога влияет на цвет гаджетов. Или я не знаю.
    Я немного уменьшила длину менюшек,чтобы не наезжали на заголовок блога, расстояние между надписью "проекты блога" и названием менюшек. Там, когда 2 слова- (не просто "Проекты или меню", а "проекты блога") они наезжают друг на друга и некрасиво.Вообщем ... скажи как тебе. Вик, давай я тебе вышлю свой код, а ты, если можно, изменишь мне цвет названий менюшек на белый( я имею ввиду "Тайны библиотек и др).Попробовала поменять цвет ссылок, но что - то цвет текста в менюшках не поменялся. А еще я бы хотела, чтобы этот код был посередине блога. А то там поиск и как- то некрасиво, всё в куче получилось. Ну, если так можно!
    Вик, спасибо тебе за такие красивости для наших блогов.
    Я тебе по почте вышлю код. Будет время - будь добра, измени цвет и , если можно, сделать его посередине блога- буду благодарна! БЕЗМЕРНО!

    ОтветитьУдалить
  10. Ирина, посмотрела. что - то не очень. Можешь написать просто проекты. Кстати цвет заложен ещё в подменюшках ( вкладках)а у тебя их нет. У тебя и так цвет белый. Если они не предусматриваются, зачем тебе такая менюшка. Насчёт середины, надо играться со всеми стилями margin. padding, top: - короче всё переписывать. Тебе легче поиск перенести. Ты меня с утра загрузила, что-то пока въехать не могу какие цвета поменять хочешь.

    ОтветитьУдалить
  11. Вика, спасибо большое за помощь в менюшке! Всё получилось очень даже классно! Мне нравится ОЧЕНЬ!
    А так же спасибо тебе за терпение в работе со мной - сплошным гуманитарием(читать-гуманоидом).!!!!!

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

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск