Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

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

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

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

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

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

<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