Всем, доброго времени суток. Очередная менюшка для вас. На этот раз предлагаю код выезжающего, вертикального, многоуровневого меню. На странице будет только небольшой лейбл с названием. При нажатии открывается пункты меню, с выпадающими вкладками. Разместить в таком меню можно массу информации.
В результате будем иметь -
Предлагаю скопировать код, приведённый ниже и установить его в этот редактор, для просмотра выскальзывающего меню в работе.
А теперь с настройками разберёмся.
background:#CC0033 это цвет самого лейбла. Другие background меняйте на своё усмотрение. В первом коде (я его отметила другим шрифтом) изменить можно почти все стили.
Меню название страниц меню
вкладка 1 название подпунктов меню
Во всех участках текста где прописано <a href='/' вместо слеша (/)вставляйте адреса своих страниц и подстраниц ( вкладок). Для начинающих блогеров советую прочитать статьи о подстраницах и страницах блога.
Добавляйте для дополнительных пунктов меню и подменю такой участок кода
Если есть необходимость добавить дополнительные вкладки (подпункты), добавляйте строки
Вроде как и все настройки. Прекрасное выезжающее меню с раскрывающимися вкладками.

В результате будем иметь -
Меню всегда на виду в верхнем правом углу страницы.
Легко можно добавить при необходимости, дополнительные пункты и подпункты меню непосредственно в код.
Экономится масса места на странице.
С помощью стилей можно легко подогнать внешний вид под ваш дизайн.
Установка меню в блоге не требует особых навыков.
Предлагаю скопировать код, приведённый ниже и установить его в этот редактор, для просмотра выскальзывающего меню в работе.
<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>
#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'>Меню 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>
Вроде как и все настройки. Прекрасное выезжающее меню с раскрывающимися вкладками.
хотите оформить подписку на новые шпаргалки
Интересно! Спасибо, Виктория!
ОтветитьУдалитьДа, Ирина. Очень много может в себя вместить это менюшка. И минимум места.
ОтветитьУдалитьПривет, Вика. Да, это интересно. Правда, посидеть надо, чтобы под свой блог скорректировать (страницы, подстраницы, адреса). Спасибочки, ох и нравятся мне твои краткие и актуальные шпаргалки.
ОтветитьУдалитьЛюба, привет. С любой менюшкой посидеть нужно. Но в итоге вся информация (навигация) в одном месте. Это важно.
УдалитьУх ты! Как интересно )) Спасибо большое, Вика!
ОтветитьУдалитьVictoria, да, необычная такая менюшечка получилось, с изюменкой.
ОтветитьУдалитьвИК! зДОРОВО! я БЫ ПОДОГНАЛА ЭТО МЕНЮ ДЛЯ "ПРОЕКТОВ БЛОГА". нО НЕ БУДЕТ ЛИ КОНКУРИРОВАТЬ С ТВОИМ МЕНЮ КНИЖЕЧКОЙ.? нЕ СЛИШКОМ ЛИ МНОГО ССЫЛОК БУДЕТ?
ОтветитьУдалитьИрина, конкуренции не будет - это точно. Но если одни и те жа ссылки в двух менюшках - перебор.
УдалитьПрекрасное меню.Спасибо ,Вика .Воспользуюсь .
ОтветитьУдалитьПользуйтесь, если понравилась менюшка. Спасибо.
УдалитьДа вот и я так думаю. Но я уже придумала, как сделаю.. Буду играться.Не знаю получится ли?
ОтветитьУдалитьВика, ну вот - доигралась. Только одно НО.. В редакторе цвет текста менюшек1.2.3.4 белый,( хотя надпись "проекты блога"- осталась белой) а в блоге - голубой. Не очень видно. Мучилась , мучилась- не нашла, где его поменять. Видимо цвет самого блога влияет на цвет гаджетов. Или я не знаю.
ОтветитьУдалитьЯ немного уменьшила длину менюшек,чтобы не наезжали на заголовок блога, расстояние между надписью "проекты блога" и названием менюшек. Там, когда 2 слова- (не просто "Проекты или меню", а "проекты блога") они наезжают друг на друга и некрасиво.Вообщем ... скажи как тебе. Вик, давай я тебе вышлю свой код, а ты, если можно, изменишь мне цвет названий менюшек на белый( я имею ввиду "Тайны библиотек и др).Попробовала поменять цвет ссылок, но что - то цвет текста в менюшках не поменялся. А еще я бы хотела, чтобы этот код был посередине блога. А то там поиск и как- то некрасиво, всё в куче получилось. Ну, если так можно!
Вик, спасибо тебе за такие красивости для наших блогов.
Я тебе по почте вышлю код. Будет время - будь добра, измени цвет и , если можно, сделать его посередине блога- буду благодарна! БЕЗМЕРНО!
Ирина, посмотрела. что - то не очень. Можешь написать просто проекты. Кстати цвет заложен ещё в подменюшках ( вкладках)а у тебя их нет. У тебя и так цвет белый. Если они не предусматриваются, зачем тебе такая менюшка. Насчёт середины, надо играться со всеми стилями margin. padding, top: - короче всё переписывать. Тебе легче поиск перенести. Ты меня с утра загрузила, что-то пока въехать не могу какие цвета поменять хочешь.
ОтветитьУдалитьВика, спасибо большое за помощь в менюшке! Всё получилось очень даже классно! Мне нравится ОЧЕНЬ!
ОтветитьУдалитьА так же спасибо тебе за терпение в работе со мной - сплошным гуманитарием(читать-гуманоидом).!!!!!
Ирина, да я видела менюшку твою. Получилась. теперь в дальнейшем по необходимости, можно и вкладки добавлять. всю инфу втолкать можно. А ты уже начала в кодах кумекать, я же лет несколько назад говорила, что потихоньку придётся разобраться и гуманитарию. Так что - молодец.
Удалить