Как создать в CSS выпадающее меню? Простое кроссбраузерное горизонтальное меню.

31.08.2019

Давно хотел написать статью о том, как сделать подменю на CSS . Многие делают его на JQuery и получается достаточно неплохо, однако, весь базовый принцип создания подменю на CSS я изложу здесь. А уже дальше, отталкиваясь от этой базы, можно совершенствовать подменю дальше.

Привожу сразу CSS-код :

* html ul li {
float: left;
}
* html ul li a {
height: 1%;
}
ul {
border-bottom: 1px solid #000;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
}
ul li {
position: relative;
}
ul li a {
display: block;
border: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-decoration: none;
}
li ul {
display: none;
left: 99px;
position: absolute;
top: 0;
}
li:hover ul {
display: block;
}

Самое главное здесь - это селектор "li:hover ul ". Фактически, он и показывает содержимое меню. По умолчанию, оно "display: none ", а при наведении курсора на пункт меню, подменю становится: "display: block ", то есть видимым. Это самое главное. Также в первых двух селекторах (которые со * ) идёт CSS-хак для IE , иначе без него в этом браузере ничего работать не будет. Всё остальное - это внешний вид, который, безусловно, можно менять.

Привожу и HTML-код :



  • Главная


  • Меню 1


    • Подменю 1


    • Подменю 2


    • Подменю 3




  • Меню 2


    • Подменю4


    • Подменю 5


    • Подменю 6


    • Подменю7


    • Подменю 8




Если внимательно вдуматься в эту структуру, то становится всё очень понятно. Тег ul - создаёт меню. Если ul находится внутри другого ul , то это уже подменю. А тег li отвечает за конкретный пункт меню.

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

Задача

Создать выпадающее меню инструментами CSS и HTML.

Решение

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

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

  • Главная
  • Контакты
  • Услуги

У нас получился список такого вида:

Рисунок 1. Подготовительные работы.

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

Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег

  • Создадим этот список и добавим стили, описывающие его внешний вид.

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

    • Главная
    • Контакты
    • Услуги
      • Купить
      • Продать
      • Обменять

    Теперь у нас получился такой список:

    Рисунок 2. Подготовительные работы.

    Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display : none }. А при наведении курсора его нужно активировать сделав снова видимым правила {display : inline-block }.

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

    • Главная
    • Контакты
    • Услуги
      • Купить
      • Продать
      • Обменять

    Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.

    Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute .

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

    • Главная
    • Контакты
    • Услуги
      • Купить
      • Продать
      • Обменять

    Что мы тут сделали:

    2. правило позиционирования {position : relative ;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
    3. Добавили в родительский элемент
    4. правило {height : 20px ;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
    5. Установили абсолютное позиционирование {position : absolute ;} выпадающему списку и установили координаты: top и left .

    Теперь выпадающее меню работает корректно.

    Рисунок 3. Окончательный вариант.

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

    Учебная задача решена. Пока.

    Михаил сб, 09/20/2014 - 12:28

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

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

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

    Хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за "выпадение меню", а какая - за скрывание пунктов более глубокого уровня вложенности

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

    В частности, неясно, зачем нужна строка "

    Перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (Домой
    и Посмотреть вертикальное меню). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?

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

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

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

    • Войдите , чтобы оставлять комментарии

    Oleg сб, 09/20/2014 - 23:50

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

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

    В чем отличия

    Прежде всего я хотел бы сказать, что спецификация не является уж такой и новой – она начала свое становление еще в 2009 году. Собственно, с тех пор происходит постоянное развитие – в html5 появляются новые возможности, современные браузеры все больше и больше поддерживают эти самые возможности, так что уже скоро можно будет говорить о полной поддержке этой технология, хотя она и не является чем-то единым целым, это скорее набор новых возможностей, каждая из которых является самостоятельной.

    Ну хорошо, а чем же отличается создание главной навигации (меню), раз уж вы читаете статью на эту тему, то какие-то отличия точно должны быть. Ну а как раньше создавалось меню? Обычно для этого использовали маркированный список, который помещали в дополнительный контейнер для всей навигации – обычный div.

    Так вот, с появлением новых тегов теперь можно поступить более правильно – вместо тега div обернуть меню в nav – новый семантический элемент, который создан специально для того, чтобы собирать в него самые главные ссылки, группировать их вместе.

    В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.

    Интересно, что контейнер nav создан именно для приоритетных ссылок на странице. На самом деле таких конйтенеров на странице может быть больше одного, но помещать в них стоит только те ссылки, которые действительно формируют главную навигацию (например, верхнее главное меню и его дубль в футере страницы).

    Как сделать с помощью html5 горизонтальное меню

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

    Другое дело, что по оформлению они очень ограничены из-за своих строчных свойств. Вы сможете оперировать только такими свойствами как: цвет, размер шрифта, внешние отступы. Если же вы захотите задать определенный фоновый цвет, сделать разделители и добавить внутренние отступы (либо определить размер каждого пункта меню) то со строкой так сделать не получится.

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

    display : block ;

    Теперь они идут сверху вниз, то есть наша навигация стала вертикальной. Чтобы вновь превратить ее в горизонтальную, нужно добавить определенные свойства. Например, вместо блочного типа определить для них блочно-строчный, либо задать им (float: left). Читайте подробнее об этих способах .

    Вертикальная навигация

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

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

    a{ text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); width: 200px; text-align: center }

    text - decoration : none ;

    color : #fff;

    padding : 5px ;

    font - size : 22px ;

    display : block ;

    background : linear - gradient (to right , rgba (96 , 108 , 136 , 1 ) 0 % , rgba (63 , 76 , 107 , 1 ) 100 % ) ;

    width : 200px ;

    text - align : center



    Похожие статьи
    Типы
    • Роутеры
    • Жесткие диски
    • Не включается
    • Принтеры
    • Тормозит
    • Зависает
    • Вирусы
    • Планшеты
    Популярные статьи
    Новые статьи