html — Не отображается вертикальное меню
Вопрос задан
Изменён 6 лет 2 месяца назад
Просмотрен 41 раз
У меня такая проблема, я пытаюсь добавить вертикальное всплывающее меню к шаблону, но меню не хочет отображаться, оно будето скрыто под другими слоями кода и я не могу понять в чем дело. Вот пример, там в хедере мои потуги заставить меню отображаться https://codepen.io/mctracker/pen/peWBpJ
.menu_menu {position: relative !important;}
.submenu_menu {
position: absolute;
width: 100%;
left: 100%;
display: none;
border-left: 10px solid transparent;
z-index: 1;
}
.menu_menu:hover .submenu_menu {
display: block;
}
. Возможно я делаю что-то не так, с версткой я на Вы, потому что в основном пишу на php.
- html
- вёрстка
- шаблоны
- меню
У Вас не валидная вёрстка. Рядом с
liлежитul— это не правильно.Вы планируете наводить на
.menu_menuи показывать.submenu_menu. Так не сработает..submenu_menuдолжен находиться внутри.menu_menu, чтобы сработал стиль.menu_menu:hover .submenu_menu.
Поправьте вёрстку вот так:
<li>
<a href="#">
<i aria-hidden="true"></i>
<span>Statistics</span>
</a>
<ul>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
</ul>
</li>
Исправленная песочница.
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
Создаем вертикальное выпадающее меню при помощи CSS
В данной статье я расскажу как сделать вертикальное выпадающее меню с использованием CSS и JavaScript.
Разметка основана на маркированных списках и поддерживает один уровень вложенности. Вложенное меню с помощью CSS трансформируется в выпадающее меню, появляющееся при событии onmouseover. Интерфейс меню стилизован во внешнем файле стилей. Изображение стрелки появляется автоматически, когда у пункта меню есть подразделы.
Читайте также: Горизонтальное выпадающее меню
Содержимое
- 1 Пример
- 2 Инструкция по установке
Пример
Смотреть пример
Инструкция по установке
Шаг 1: добавьте следующий код в секцию <head> Вашего HTML файла:
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
<script type="text/javascript" src="cssverticalmenu.js">
/***********************************************
* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.
javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
javascriptkit.com/ for this script and 100s more
***********************************************/
</script>В нем содержатся ссылки на два внешних файла и 3 картинки. Скачайте их (правый клик и выберите «Сохранить как»):
- cssverticalmenu.css
- cssverticalmenu.js
- Три картики (отресайзенные):
Шаг 2: Добавьте следующий HTML код, в котором и содержится само меню:
<ul>
<li><a href="#">JavaScript Kit</a></li>
<li><a href="#">Free JavaScripts</a></li>
<li><a href="#">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="#">JavaScript Reference</a></li>
<li><a href="#">DOM Reference</a></li>
<li><a href="#">CSS Reference</a></li>
</ul>
</li>
<li><a href="#">DHTML/ CSS Tutorials</a></li>
<li><a href="#">web Design Tutorials</a></li>
<li><a href="#">Helpful Resources</a>
<ul>
<li><a href="#">Dynamic HTML</a></li>
<li><a href="#">Coding Forums</a></li>
<li><a href="#">CSS Drive</a></li>
<li><a href="#">CSS Library</a></li>
<li><a href="#">Image Optimizer</a></li>
<li><a href="#">Favicon Generator</a></li>
</ul>
</li>
</ul>Вот и все! Вы можете «тюнинговать» механизм меню, редактируя файл cssverticalmenu.
js
Поделись с друзьями:
25 бесплатных примеров адаптивных раскрывающихся меню CSS
Вы ищете бесплатные примеры адаптивных раскрывающихся меню CSS? Это руководство содержит 25 бесплатных адаптивных раскрывающихся меню CSS
Только выпадающее меню CSS3
Автор
Педро Наук
Сделано с помощью
HTML,CSS(SCSS)
Демонстрация
Проверить Демо
Ссылки
Скачать
Pure CSS DropDown Menu
Author
Andor Nagy
Made With
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
Простое выпадающее меню на чистом CSS
Автор
Коннор Брассингтон
Сделано с
HTML(PUG),CSS(SCSS)
Демо
Проверить демо
Ссылки
Скачать
Простое выпадающее меню
Автор
Майк Рохас
Сделано с
HTML(PUG),CSS (SCSS)
Демонстрация
Проверить демонстрацию
Ссылки
Скачать
Простое меню
Автор
Хью Бальбоа
Сделано с
HTML,CSS
Demo
Check Out Demo
Links
Download
CSS выпадающее меню
Автор
Code Raven
Сделано с
HTML,CSS(LESS)
Демо
Проверить демо
Ссылки
Скачать 9000 3
Адаптивное меню навигации Pure CSS
Автор
Дженнинг
Сделано с
HTML,CSS(LESS)
Демо
Проверить демо
Ссылки
Скачать
Меню #CodePenChallenge
Автор
Ахмед Наср
Сделано с
HTML, CSS(LESS)
Демо
Проверить демо
Ссылки
Скачать
Выпадающее меню Swanky Pure V2.
0Автор
CSS Джейми Коултер 90 003
Сделано из
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
Переходы раскрывающегося меню CSS
Автор
Shaw 900 03
Сделано с помощью
HTML,CSS(МЕНЬШЕ)
Демо
Проверить демо
Ссылки
Скачать
Меню Molten
Автор
Зеландия
Сделано с
HTML,CSS
Демо
Демо-версия
Ссылки
Скачать
Чистый CSS Раскрывающееся меню + Изменения при наведении курсора
Автор
Брэндон Лёлейн
Сделано с
HTML,CSS
Демо
Оформить заказ Демо
Ссылки
Скачать
Необычное меню #CodePenChallenge
Автор
Хесус Родригес
Сделано с
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
Z Концепция выпадающего меню igzag
Автор
Catalin Rosu
Сделано с
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
9 0004 Выпадающее меню с триггером по кликуАвтор
Sazzad
Сделано с
HTML,CSS,JS
Демонстрация
Проверить демонстрацию
Ссылки
Загрузка
Пользовательское раскрывающееся меню Pure CSS
Автор
Silver Drop
Сделано с
HTML,CSS,JS
Демо
Проверить демо
Ссылки
Скачать
Простая плоская навигация с работающим выпадающим меню.
Автор
Энди Тран
Сделано с
HTML(HAML),CSS(LESS),JS
Демо
Проверить демо
Ссылки
Скачать
Жадная навигация
Адаптивное меню навигации, которое складывается элементы в раскрывающееся меню, когда они переполняются. Кнопка в стиле гамбургера со значком подсчета появляется, когда есть скрытые элементы, которые нужно открыть.
Автор
lukejacksonn
Сделано с
HTML,CSS(LESS),JS
Демо
Проверить демо
Ссылки
Скачать 9 0003
Отзывчивое меню Bootstrap 4 — светлое/темное
Автор
Иван Grozdic
Сделано с
HTML,CSS,JS
Демо
Проверить демо
Ссылки
Скачать
Мега выпадающее меню на чистом CSS3 с анимацией (вертикально) 9 0005
Автор
Ризки Курниаван Ритонга
Сделано с
HTML, CSS, JS
Демо
Проверить демо
Ссылки
Скачать
Author
Martin Stanek
Made With
HTML ,CSS(LESS),JS
Demo
Check Out Demo
Links
Download
CSS3 Menu Dropdowns
Автор
Колин
Сделано с
HTML,CSS(SCSS),JS
Демо
Проверить демо
Ссылки
Скачать
Мегаменю Bootstrap с несколькими выпадающими столбцами
Автор
mahesh b hagat
Сделано с
HTML,CSS, JS
Demo
Check Out Demo
Links
Download
Взаимодействие с выпадающим меню
Author
Aaron Iker
Made With 9000 5
HTML,CSS(SCSS),JS
Демо
Проверить демонстрацию
Ссылки
Скачать
Пользовательское выпадающее меню #1
Автор
Вероника
Сделано с
HTML,CSS,JS 9 0003
Демонстрация
Проверить демонстрацию
Ссылки
Скачать
Расширение поискового ящика с раскрывающимся фильтром
Автор
Скотт Буллох
Сделано с
HTML, CSS (SCSS), JS
DEMO
Проверьте демонстрацию
.
0005Скачать
Последнее сообщение
Присоединяйтесь к нам (обязательна для регистрации):
| Следуйте за нами на Facebook: 90 488 | Нажмите здесь |
| Следуйте за нами на Dev.io: | Нажмите здесь |
| Следуйте за нами в Twitter: | Нажмите здесь |
| Следуйте за нами на Quora space | 90 485 Нажмите здесь|
| Подпишитесь на нас в Pinterest: | Нажмите здесь |
25+ ВЫПАДАЮЩЕЕ МЕНЮ CSS
25+ ВЫПАДАЮЩЕЕ МЕНЮ CSS
Выпадающее меню только CSS3
Автор
Педро Наук
Сделано с помощью
HTML,CSS(SCSS)
Демо
Проверить демо
Ссылки 9000 5
Скачать
Раскрывающееся меню на чистом CSS
Автор
Andor Nagy
Сделано с
HTML,CSS
Демонстрация
Проверить демонстрацию
Ссылки
Скачать
Выпадающее меню Simple Pure CSS
Автор
Коннор Брассингтон
Сделано с
90 002 HTML(PUG),CSS(SCSS)Демонстрация
Демонстрационная версия
Ссылки
Загрузка
Простое выпадающее меню
Автор
Майк Рохас
Сделано с
HTML(PUG),CSS(SCSS)
Демонстрация
Проверка Демо
Ссылки
Скачать
Простое меню
Автор
Хью Бальбоа
Сделано с помощью
Ссылки
Скачать
Выпадающее меню css
Автор
Код Raven
Сделано с
HTML,CSS(LESS)
Демо
Проверить демо
Ссылки
Загрузка
Адаптивное меню навигации Чистый CSS
Автор
Дженнинг
Сделано с помощью
HTML,CSS(LESS)
Демо
Проверить демо
Ссылки
Скачать
Меню #CodePenChallenge
Автор
Ахмед Наср
Сделано с
HTML ,CSS(LESS)
Демо
Проверить демо
Ссылки
Скачать
Выпадающее меню Swanky Pure V2.
0Автор
Джейми Коултер 90 003
Сделано из
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
Переходы раскрывающегося меню CSS
Автор
Shaw 900 03
Сделано с помощью
HTML,CSS(МЕНЬШЕ)
Демо
Проверить демо
Ссылки
Скачать
Меню Molten
Автор
Зеландия
Сделано с
HTML,CSS
Демо
Демо-версия
Ссылки
Скачать
Чистый CSS Раскрывающееся меню + Изменения при наведении курсора
Автор
Брэндон Лёлейн
Сделано с
HTML,CSS
Демо
Оформить заказ Демо
Ссылки
Скачать
Необычное меню #CodePenChallenge
Автор
Хесус Родригес
Сделано с
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
Z Концепция выпадающего меню igzag
Автор
Catalin Rosu
Сделано с
HTML,CSS
Демо
Проверить демо
Ссылки
Скачать
9 0004 Выпадающее меню с триггером по кликуАвтор
Sazzad
Сделано с
HTML,CSS,JS
Демонстрация
Проверить демонстрацию
Ссылки
Загрузка
Пользовательское раскрывающееся меню Pure CSS
Автор
Silver Drop
Сделано с
HTML,CSS,JS
Демо
Проверить демо
Ссылки
Скачать
Простая плоская навигация с работающим выпадающим меню.
Автор
Энди Тран
Сделано с
HTML(HAML),CSS(LESS),JS
Демо
Проверить демо
Ссылки
Скачать
Жадная навигация
Адаптивное меню навигации, которое складывается элементы в раскрывающееся меню, когда они переполняются. Кнопка в стиле гамбургера со значком подсчета появляется, когда есть скрытые элементы, которые нужно открыть.
Автор
lukejacksonn
Сделано с
HTML,CSS(LESS),JS
Демо
Проверить демо
Ссылки
Скачать 9 0003
Отзывчивое меню Bootstrap 4 — светлое/темное
Автор
Иван Grozdic
Сделано с
HTML,CSS,JS
Демо
Проверить демо
Ссылки
Скачать
Мега выпадающее меню на чистом CSS3 с анимацией (вертикально) 9 0005
Автор
Ризки Курниаван Ритонга
Сделано с
HTML, CSS, JS
Демо
Проверить демо
Ссылки
Скачать
Author
Martin Stanek
Made With
HTML ,CSS(LESS),JS
Demo
Check Out Demo
Links
Download
CSS3 Menu Dropdowns
Автор
Колин
Сделано с
HTML,CSS(SCSS),JS
Демо
Проверить демо
Ссылки
Скачать
Мегаменю Bootstrap с несколькими выпадающими столбцами
Автор
mahesh b hagat
Сделано с
HTML,CSS, JS
Demo
Check Out Demo
Links
Download
Взаимодействие с выпадающим меню
Author
Aaron Iker
Made With 9000 5
HTML,CSS(SCSS),JS
Демо
Проверить демонстрацию
Ссылки
Скачать
Пользовательское выпадающее меню #1
Автор
Вероника
Сделано с
HTML,CSS,JS 9 0003
Демонстрация
Проверить демонстрацию
Ссылки
Скачать
Расширение поискового ящика с раскрывающимся фильтром
Автор
Скотт Буллох
Сделано с
HTML, CSS (SCSS), JS
DEMO
Проверьте демонстрацию
.
