Многоуровневое вертикальное выпадающее меню html: Многоуровневое вертикальное меню HTML и CSS

Leave a Comment / Html / By /

Содержание

Как сделать выпадающий меню в html

Выпадающее меню на HTML и CSS

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.

HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать — скрыть вложенные пункты.

Ещё нужно убрать маркеры но это дело вкуса.

Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

Вертикальное выпадающее меню

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

Вот что должно получиться в результате. демка

Горизонтальное выпадающее меню

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

Вот что получиться в итоге демка.

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

Созданное в предыдущем пункте меню также может быть многоуровневым но выглядит оно при этом не очень. На мой взгляд многоуровневое меню должно открываться следующим образом — первый уровень вниз остальные вправо. Здесь, в отличии от предыдущего горизонтального меню, вложенные пункты позиционируем относительно родительского пункта и задаём для них ширину. Ширина нам нужна для второго и последующих уровней вложенности. В этом меню мы возьмём понемногу от предыдущих и немного добавим нового.

Вот так будет выглядеть наше многоуровневое меню демка.

    , чтобы оставлять комментарии
Спасибо огромное! Задолбался

Спасибо огромное!
Задолбался я иcкать решение простое до нельзя, что бы было только нужное и больше ничего лишнего.
А то раздуют css непонятно чем. Здесь же все просто и локанично.

Интересно, а для Вордпресс

Интересно, а для Вордпресс такое решение не подходит? Довольно просто все изложено, сделать сможет любой. Отличные советы, без лишней «шелухи»!

HTML + CSS в чистом виде,

HTML + CSS в чистом виде, поэтому должно подойти для любого сайта. Специально писал с минимумом оформления, чтобы не перегружать CSS.

Очень полезная информация.

Очень полезная информация. Когда такое меню хотела реализовать у себя на блоге, то пришлось обращаться к веб-мастеру. А теперь могу сесть и потихоньку реализовать такую задумку сама. Подписалась на Ваш блог. Буду изучать.

Возникнут вопросы обращайтесь

Возникнут вопросы обращайтесь. Чем смогу помогу.

Что-то мой комментарий не

Что-то мой комментарий не виден — дублирую:

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul. nav li:hover ul «
Подскажите, в чем дело?

Есть пожедания по изложению материала:

-хорошо бы в этой строке (ul.aaaaa li:hover ul ) растолковать, какая ее часть отвечает за «выпадение меню», а какая — за скрывание пунктов более глубокого уровня вложенности

-хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

-в частности, неясно, зачем нужна строка «<div >

-перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (<a href=»/html»>Домой</a><br /> и <a href=»/html/drop_down_menu»>Посмотреть вертикальное меню</a>). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?

-в хеддере в вашем примере имеются 3 строки. Из них только одна относится к теме (задает имя ЦСС-файла), а 2 другие — нет. Это также осложняет освоение материала. Тем более, что на моем компьютере такой хеддер вообще приводит к некорректному отображению текста, поскольку мне нужно ставить не «utf-8», а «Windows-. «

-в примере неясно, что слова «style.css», «block-menu» и «nav» — это не ключевые слова, а названия, задающиеся пользователем. Я выяснял это экспериментально

Короче говоря, хотелось бы, чтобы в примерах было только то, что имеет отношение к делу, причем, чтобы про неясные по контексту строки было бы написано, какое именно «отношение к делу» они имеют.

Самый объёмный коммент.

Самый объёмный коммент.
Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу.
Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта.
Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте.
Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная.
ul.nav li:hover > ul будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код ) при наведении на пункт меню(ul.nav li) сработает :hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.

Поправил статью с учётом

Поправил статью с учётом ваших замечаний. Про кодировку честно говоря забыл что виндовс сохраняеи файлы в windows-1251 Тут два варианта или как вы заметили указать форточную кодировку в файле или изменить кдировку файла например в Notepad++.

Спасибо за критику приходите к нам ещё

Меню некоректно отображается

Меню некоректно отображается в safari IE Mozila Firefox не подскажите в чем может быть проблема?

Только что проверил в IE и

Только что проверил в IE и FireFox всё работает как надо. Можно подробнее в чём проблема

попробуйте заменить в head

попробуйте заменить в head полностью строчку с meta на <meta http-eqiv=»Content-type» content=»text/html;charset=»utf-8″>

В чём отличия?
<strong>Все понятно, но если

Все понятно, но если сделать меню справа в блоке, а выпадающие пункты влево (далее код) :

ul, li <
margin:0;
padding:0;
list-style-type:none;
>

#menu <
display:block;
float: right;

#menu > li <
display:inline-block;
position:relative;
>

#menu > li > ul <
display:none;
>
#menu > li > ul > li > ul <
display:none;
>

#menu > li:hover > ul <
display:block;
float:left;
>
#menu > li > ul > li:hover > ul <
display:block;
float:left;
>

, то при наведении на раздел 3 выпадает список с подразделами, однако пункты раздел 1 и раздел 2 тоже уезжают влево на уровень подразделов. Как не бился не могу исправить.

Дело в том что при

Дело в том что при срабатывании :hover вложенным пунктам присваивается свойство float:left и как следствие подразелы прижимаются к левой границе а с права их обтекает раздел. это приводит к увеличению ширины блока меню. Смотрим дальше. К пунктам разделов также применено float:left следовательно они прижимаются к левой границе, но после раскрытия подпунктов она сдвинулась влево соответственно и пункты также сдвигаются влево.

Если открывать меню влево применяя float то нужно быть готовым к тому что вся вёрстка сдвинется влево. Это не произойдёт если делать выпадающее меню через позиционирование как описано в статье.

Уважаемый OLEG, подскажите —

Уважаемый OLEG, подскажите — можно-ли сделать так, чтобы после выбора какого-то пункта подменю все «выпавшие» подменю сворачивались и оставался только самый верхний уровень ?

Описание в статье меню

Описание в статье меню сворачиваются при клике или если убрать курсор. Если Вы имеете ввиду менюшки которые разворачиваются по клику то здесь нужен Javascript и это отдельная тема о которой расскажу в одной из ближайших статей.

Если же вас интересует чистый HTML/CSS то можно попробовать через инпуты но это больше похоже на шаманство и на «чистый» ни как не тянет.

Да в том-то и дело, что

Да в том-то и дело, что сворачивается меню, описанное в статье (по крайней мере то, которое в демке) только если убрать курсор. А в том случае, когда кликаешь по какому-то пункту, но курсор не сдвигаешь — с меню ничего не происходит, оно так и остается развернутым. В своем проекте я частично решил проблему — меняю css-свойство visibility: visible/hidden туда-сюда. Частично потому, что нормально это работает только в браузерах на WebKit. В Mozilla и IE меню исчезает и снова появляется, если не сдвигать курсор с места. Я просмотрел много вариантов меню — и пока не нашел ниодного варианта, устроившего-бы меня — чаще всего после выбора пункта меню происходит переход на другую страницу и толгда менб естественно пропадает. А если перехода на новую страницу нет после выбора пункта меню так и остается, пока не сдвинешь курсор за его пределы..

На мой взгляд единственный

На мой взгляд единственный выход это Javascript. Например повесить на клик добавление к пункту меню ID для которого в стилях прописать visibility: hidden. Чтобы вернуть меню в исходное состояние удаляем добавленный ID после того как пользователь уберёт курсор и произойдёт событие mouseout

Спасибо, очень толковая

Спасибо, очень толковая статья! Наконец-то попал на нормальную статью и смог всё настроить! Само меню немного изменил (можете посмотреть у меня на блоге), то сама идея ваша. Ещё раз спасибо, а то все такую ерунду нерабочую пишут.

Здравствуйте! Спасибо большое

Здравствуйте! Спасибо большое за статью! У меня тоже возник такой вопрос: В случае когда много уровней то последние списки вылазят за пределы окна. Как сделать чтобы при достижении правой границы окна, следующий уровень перешол как бы на новую строку.
Вот скриншот: http://joxi.net/5mdz8aMClznWA1.
И ещё как сделать чтобы списки были одинковой высоты. Если высота какого-то списка будет больше чем у остольных, то чтобы и остальные списки применили такую высоту. У li:hover я задал и свойство z-index: 2 чтобы отображались поверх второго блока. Спасибо! Жду Вашего ответа!

На вашем месте я бы не стал

На вашем месте я бы не стал переносить пункт меню. Для пользователя не очевидно что новый подпункт открывается в другом месте. Ещё один момент. Для клика на этот пункт ему придётся перевести курсор, hover перестанет работать меню свернётся. Я бы на вашем месте сделал первый уровень открывающимся вниз, между основными пунктами меню.

Чтобы списки подстраивались по высоте. Даже не знаю как такое сдеать на css

Выпадающее меню

Плюсом использования псевдокласса :checked является то, что мы можем щёлкать по разным элементам и отслеживать их состояние — включено или нет. Этот механизм пригодится для создания выпадающего меню, которое можно привязать к определённому тексту. При щелчке по тексту появляется меню, ещё один щелчок это меню скрывает. На рис. 1 продемонстрировано, как это меню выглядит.

Рис. 1. Выпадающее меню

Алгоритм создания такого меню не отличается от создания вкладок. Добавляем <input type=»checkbox»> и <label> , затем связываем их друг с другом через атрибуты id и for .

Ниже располагаем само меню в виде списка <ul> .

В стилях скрываем <input> и <ul> через свойство display со значением none .

Затем <ul> отображаем через комбинацию :checked и ul .

Чтобы пользователь понимал, что перед ним не обычный текст, добавим к нему пунктирное подчёркивание через border-bottom и при наведении поменяем курсор на «руку», как это происходит со ссылками, через cursor.

Окончательный код для создания выпадающего меню с использованием псевдокласса :checked показан в примере 1.

Пример 1. Выпадающее меню на CSS

Здесь у нас меню располагается снизу от текста, но с помощью свойств left, top, right, bottom для селектора ul меню можно отображать сверху или справа от текста.

Как создать выпадающее меню на HTML и CSS

Соавтор(ы): Jack Lloyd. Джек Ллойд — автор и редактор, пишущий о технологиях для wikiHow. Имеет более двух лет опыта в написании и редактировании статей на технические темы. Энтузиаст всего связанного с технологиями и учитель английского языка.

Количество просмотров этой статьи: 41 649.

Из этой статьи вы узнаете, как создать выпадающее меню с помощью HTML и CSS. Выпадающее меню открывается, когда пользователь наводит на него указатель мыши; когда меню открыто, пользователь может щелкнуть по одной из опций меню, чтобы перейти на соответствующую страницу.

Как сделать многоуровневое выпадающее меню только с помощью HTML и CSS (возможно, крошечного JavaScript)

Задай вопрос

спросил

Изменено 11 лет, 11 месяцев назад

Просмотрено 3к раз

Новичок в CSS и может найти только одноуровневые меню. Вот меню и пункты списка:

Как видите, он будет многоуровневым. Теперь, с имеющимся у меня CSS, сначала отображаются только «Дом» и «Форумы», а при наведении курсора на «Форумы» отображается «Баскетбол»… но и последующие пункты меню тоже. Я хочу, чтобы они оставались скрытыми, пока я не наведу курсор на баскетбольный мяч. Кто-нибудь знает, как это сделать, используя только CSS или как можно меньше JavaScript? Спасибо. Вот код CSS, который у меня есть:

 ul
{
    маржа: 0;
    заполнение: 0;
    стиль списка: нет;
    ширина: 150 пикселей;
    нижняя граница: 1px сплошная #ccc;
}
ул ли
{
    положение: родственник;
}
ли уль
{
    положение: абсолютное;
    осталось: 149пкс;
    сверху: 0;
    дисплей: нет;
}
уль ли а
{
    дисплей: блок;
    текстовое оформление: нет;
    цвет: #777;
    фон: #bad8f8;
    отступ: 2px 0 2px 10px;
    граница: 1px сплошная #ccc;
    нижняя граница: 0;
}
ли: наведите ул
{
    дисплей: блок;
}
/* Стили для помощников проверки
-------------------------------------------------- ---------*/
.
  поле-проверка-ошибка
{
    цвет: #ff0000;
}
.поле-проверка-действительна
{
    дисплей: нет;
}
.input-проверка-ошибка
{
    граница: 1px сплошная #ff0000;
    цвет фона: #ffeeee;
}
.validation-summary-errors
{
    вес шрифта: полужирный;
    цвет: #ff0000;
}
.validation-summary-valid
{
    дисплей: нет;
}
  • HTML
  • CSS
  • MENU
  • СТИЛЕСА
  • раскрывающегося MENU

Вот работающий демо:

HTTP://jsfiddle.net/RCRAVENS/ails3.

  1. Небольшая реструктуризация списка ul/li. Были некоторые элементы, которых не было в li.

  2. Используется ‘li:hover > ul’ для выбора только прямых потомков.

Надеюсь, это поможет.

Боб

0

Попробуйте добавить

 ul li ul{position: absolute; сверху: 0; слева: 0; ширина: 250 пикселей; высота: 250 пикселей; цвет фона: #EEE;}

И вперед 🙂

То, как вы структурировали свой css, приводит к тому, что все потомки «Basketball» наследуют его css. Вместо этого вы должны использовать селектор child(«>») или :first-child. Посмотрите разделы 5.5 и 5.6 здесь, чтобы понять, о чем я говорю: http://www.w3.org/TR/CSS2/selector.html

Если вы хотите делать динамические меню, я настоятельно рекомендую использовать javascript вместо полагаясь исключительно на css, если вы не уверены, что у многих людей, просматривающих ваш сайт, будет отключен javascript.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — раскрывающееся меню уровня CSS 3

спросил

Изменено 9много лет назад

Просмотрено 16 тысяч раз

, поэтому у меня проблемы с трехслойным выпадающим меню css. Уровни 1 и 2 работают нормально, но третий не отображается должным образом, я бы хотел, чтобы третий уровень разветвлялся вправо. Третий уровень — это вкладки «Антиматерия» и «Дейтерий», которые должны исходить из ссылки «Топливо».

У меня есть jsfiddle с моей проблемой. Для тех из вас, кто не может заставить его работать, мой код ниже. http://jsfiddle.net/IanLueninghoener/fD9eF/

Спасибо всем!

Вот мой html:

 

            <ул>
                
  • Главная
    • 
                
  • Деформация
                    <ул>
                        
  • Как это работает
    • 
                        
  • Движок деформации
    •   
  • Коэффициенты деформации
    • 
                        
  • Топливо
                            <ул>
                                
  •  html">Анти-материя
    • 
                                
  • Дейтерий
    • 
                           
                        
                    
                
                
  • Правда или вымысел
    • 
                
  • Звездный путь
                    <ул>
                        
  • Корпоративный
    • 
                        
  • Вояджер
    • 
                    
                
                
  • О нас
    •

    CSS:

     /* Сброс */
* {
    поле: 0px;
    отступ: 0px;
}
.clearFix {
    ясно: оба;
}
/* Контейнер */
#контейнер {
    ширина: 960 пикселей;
    поле: 50px авто;
}
/* Красный */
/* Первый уровень навигации */
#nav{
    семейство шрифтов: «HelveticaNeue-Light», «Helvetica Neue Light», «Helvetica Neue», Helvetica, Arial, «Lucida Grande», без засечек;
    вес шрифта: 300;
    размер шрифта: 15 пикселей;
}
#нав ул{
    фон:#000000;
    высота: 35 пикселей;
    стиль списка: нет;
    граница: 3 пикселя сплошная #000000;
    -webkit-border-radius: 6px;
}
#навли{
    плыть налево;
    отступ: 0px;
}
#нав ли а{
    фон:#000000;
    дисплей:блок;
    выравнивание текста: по центру;
    текстовое оформление: нет;
    цвет:#fff;
    высота строки: 35 пикселей;
    отступ: 0px 25px;
    -webkit-border-radius: 6px;
}
#nav li a:hover{
    текстовое оформление: нет;
    фон: #4873b1;
    цвет:#FFFFFF;
    -webkit-border-radius: 3px;
}
/* Второй уровень навигации */
#нав ли ул{
    положение: абсолютное;
    фон:#000000;
    дисплей:нет;
    высота:авто;
    ширина: 210 пикселей;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    поле слева:-3px;
}
#nav li: наведите указатель {
    дисплей:блок;
}
#nav li li: hover {
    вес шрифта: 800;
}
#нав ли ли {
    дисплей:блок;
    поплавок: нет;
    ширина: 210 пикселей;
}
#нав ли уль а{
    выравнивание текста: по левому краю;
    дисплей:блок;
    высота: 35 пикселей;
    заполнение: 0px 10px 0px 25px;
}
/* Красный */
/* Первый уровень навигации */
#nav_red{
    семейство шрифтов: «HelveticaNeue-Light», «Helvetica Neue Light», «Helvetica Neue», Helvetica, Arial, «Lucida Grande», без засечек;
    вес шрифта: 300;
    размер шрифта: 15 пикселей;
}
#nav_red ул{
    фон:#cfcfcf;
    высота: 40 пикселей;
    стиль списка: нет;
}
#nav_red ли {
    плыть налево;
    отступ: 0px;
}
#nav_red li a{
    фон:#cfcfcf;
    дисплей:блок;
    выравнивание текста: по центру;
    текстовое оформление: нет;
    цвет:#333;
    высота строки: 40 пикселей;
    отступ: 0px 25px;
}
#nav_red li a:hover{
    текстовое оформление: нет;
    фон: #915fa6;
    цвет:#FFFFFF;
}
/* Второй уровень навигации */
#nav_red ли ул{
    положение: абсолютное;
    фон:#000000;
    дисплей:нет;
    высота:авто;
    ширина: 210 пикселей;
}
#nav_red li: наведите указатель {
    дисплей:блок;
}
#nav_red ли ли: hover {
    вес шрифта: 800;
}
#nav_red ли ли {
    дисплей:блок;
    поплавок: нет;
    ширина: 210 пикселей;
}
#nav_red ли уль а{
    выравнивание текста: по левому краю;
    дисплей:блок;
    высота: 40 пикселей;
    заполнение: 0px 10px 0px 25px;
}
/* Стройное */
/* Первый уровень навигации */
#nav_slim{
    семейство шрифтов: «HelveticaNeue-Light», «Helvetica Neue Light», «Helvetica Neue», Helvetica, Arial, «Lucida Grande», без засечек;
    вес шрифта: 300;
    размер шрифта: 14px;
}
#nav_slim ул{
    фон:#84b41f;
    высота: 25 пикселей;
    стиль списка: нет;
    граница: 3 пикселя сплошная #84b41f;
    -webkit-border-radius: 4px;
}
#nav_slim ли {
    плыть налево;
    отступ: 0px;
}
#nav_slim ли а{
    фон:#84b41f;
    дисплей:блок;
    выравнивание текста: по центру;
    текстовое оформление: нет;
    цвет:#333;
    высота строки: 25 пикселей;
    отступ: 0px 25px;
    -webkit-border-radius: 4px;
}
#nav_slim li a:hover{
    текстовое оформление: нет;
    фон: #315907;
    цвет:#FFFFFF;
    -webkit-border-radius: 2px;
}
/* Второй уровень навигации */
#nav_slim ли ул{
    положение: абсолютное;
    фон:#84b41f;
    дисплей:нет;
    высота:авто;
    ширина: 210 пикселей;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    поле слева:-3px;
}
#nav_slim li:наведите указатель {
    дисплей:блок;
}
#nav_slim li li:hover {
    вес шрифта: 800;
}
#nav_slim ли ли {
    дисплей:блок;
    поплавок: нет;
    ширина: 210 пикселей;
}
#nav_slim ли уль а{
    выравнивание текста: по левому краю;
    дисплей:блок;
    высота: 25 пикселей;
    заполнение: 0px 10px 0px 25px;
}
    • html
    • css
    • выпадающее меню

    Три шага и у вас есть выпадающее меню с тремя уровнями.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *