Как сделать выпадающее меню в html css: Как создать выпадающее меню

26.05.2023 Facebook Twitter LinkedIn Google+ Разное

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

Выпадающее меню позволяет создать четкое и иерархическое представление всех основных разделов. Вы можете создать выпадающее меню с HTML раскрывающимся списком, не используя ничего, кроме языка гипертекста и CSS.

  • Часть 1
    • Составление HTML
  • Часть 2
    • Составление CSS
    • Подсказки
  1. Создание раздела навигации. Как правило, мы используем для главной панели навигации сайта тег <nav>, <header> — для более узких разделов или <div>, если нет других вариантов. Поместите этот код в элемент <div>, чтобы можно было задать стили для всего меню:
<div>
 <nav>
     </nav>
</div>
  1. Задайте для каждого раздела название класса.
    Мы будем использовать атрибут класса позже, чтобы определить стиль этих элементов с помощью CSS. Задайте названия классов для контейнера и меню с раскрывающимся списком HTML:
<div>
<nav>
</nav>
</div>
  1. Добавьте список пунктов меню. Неупорядоченный список (<ul>) содержит пункты главного меню (<li>), на которые пользователи будут наводить курсор мыши, чтобы вывести выпадающее меню. Добавьте класс «clearfix» для элементов списка. Мы вернемся к этому позже в разделе CSS:
<div>
   <nav>
<ul>
   <li>Home</li>
              <li>Contributors</li>
         <li>Contact Us</li>
 </ul>
   </nav>
</div>
  1. Добавление ссылок. Теперь нужно добавить ссылки на страницы соответствующих разделов. Даже если они не содержат ссылок на что-то, добавьте ссылки на несуществующий анкор (например, «#!»), чтобы курсор пользователя менял внешний вид при наведении на них.
    В этом примере пункт Contact Us никуда не ведет, но остальные два пункта раскрывающегося списка HTML CSS содержат ссылки на конкретные разделы:
<div>
   <nav>
      <ul>
       <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         </li>
         <li><a href="#!">Contact Us</a>
         </li>
      </ul>
   </nav>
 </div>
  1. Создание списков вложенных элементов. После того, как мы установим стили, эти раскрывающиеся списки HTML станут выпадающими меню. Вложите список в элемент, на который пользователь будет наводить курсор. Задайте имя класса и ссылку, как мы делали ранее:
<div>
   <nav>
      <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         <ul>
            <li><a href="/jordan">Michael Jordan</a></li>
            <li><a href="/hawking">Stephen Hawking</a></li>
         </ul>
         </li>
         <li><a href="#!">Contact Us</a>
         <ul>
            <li><a href="mailto:bugsupport@company.
 
 com">Report a Bug</a></li>
            <li><a href="/support">Customer Support</a></li>
         </ul>
         </li>
      </ul>
   </nav>
</div>
  1. Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS, таких как настройка шрифта и цвет фона:
  1. Добавьте код clearfix. Помните класс «clearfix», который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:
.clearfix:after {
content: "";
display: table;
}
  1. Создание базовой структуры. Представленный ниже код задает размещение меню вдоль верхней части страницы и скрывает выпадающие элементы. Это только каркас общей структуры, который позволяет сосредоточиться на других элементах раскрывающегося свертывающегося списка HTML. Вы можете позже расширить его дополнительными свойствами CSS, такими как отступы и интервалы:
.nav-wrapper {
   width:100%;
   background: #999;
}
.nav-menu {
   position:relative;
   display:inline-block;
}
.nav-menu li {
   display: inline;
   list-style-type: none;
}
.sub-menu {
   position:absolute;
   display:none;
   background: #ccc;
}
  1. Задаем вывод выпадающих элементов при наведении курсора мыши. Элементы в выпадающем списке по умолчанию скрыты. Вот как реализуется вывод вложенного списка при наведении курсора мыши на родительский элемент:
.nav-menu ul li:hover > ul {
   display:inline-block;
}

Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого «. nav-menu > ul»:

  1. Маркирование выпадающих меню стрелками. Веб-дизайнеры, как правило, показывают, что элемент содержит вложенное выпадающее меню, с помощью стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:
.nav-menu > ul > li:after {
   content: "25BC"; /*escaped unicode for the down arrow*/
   font-size: .5em;
   display: inline;
   position: relative;
   }

Изменить положение стрелки можно с помощью свойств up, bottom, right или left.

Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте еще один класс (например, dropdown) для каждого элемента li, к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:

  1. Настройка отступов, фона и других свойств. Теперь наше меню является функциональным, но мы можем несколько улучшить его внешний вид с помощью редактирования кода CSS.
  • Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
  • Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS.

Вадим Дворниковавтор-переводчик статьи «How to Create a Dropdown Menu in HTML and CSS»

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:

body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:

ul.menu > li:hover > ul.submenu {
    display: block;
}

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.

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

следующий → ← предыдущая

В HTML мы можем легко создать раскрывающееся меню в документе Html, используя следующие различные способы:

  1. Использование HTML-формы
  2. Использование внутреннего CSS

Использование HTML-формы

Если мы хотим создать раскрывающееся меню в HTML-документе с помощью формы, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко сделать выпадающее меню:

Шаг 1: Во-первых, мы должны ввести Html-код в любом текстовом редакторе или открыть существующий Html-файл в текстовом редакторе, в котором мы хотим использовать форму для создания выпадающего меню.

<Голова> <Название> Сделать выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как сделать выпадающее меню в HTML-документе. И этот раздел поможет вам понять, как сделать выпадающее меню с помощью HTML-формы.

Шаг 2: Теперь нам нужно поместить курсор в ту точку тега body HTML-документа, где мы хотим отобразить раскрывающееся меню. И тогда мы должны ввести тег

в этот момент.

<Тело> Эта страница поможет вам понять, как сделать выпадающее меню в HTML-документе. И этот раздел поможет вам понять, как сделать выпадающее меню с помощью HTML-формы. <форма>

Шаг 3: Теперь мы должны определить теги

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

В этом руководстве вы узнаете,как создать раскрывающееся меню с помощью CSS.

  1. Начните со следующего HTML-документа,содержащего неупорядоченный список:
    <голова><мета-кодировка="UTF-8">Раскрывающееся меню навигации<тело><основной><заголовок>
    Горизонтальная навигация с раскрывающимся меню
    <навигация><ул>
  2. Главная
  3. Сервисы
  4. Товары
  5. Поддержка
  6. Блог
  7. О нас
  8. Контакты
    9. Без CSS он будет отображаться следующим образом:
  9. Создайте файл для внешней таблицы стилей и создайте ссылку на него из HTML,используя следующий тег:
    <ссылка href="menu.css" rel="таблица стилей">
  10. Внутри таблицы стилей используйте следующий CSS для создания простого горизонтального меню:
    ол,ул{стиль списка:нет}#главное меню{поле:10 пикселей;ширина:900 пикселей;семейство шрифтов:без засечек}#mainMenu li{дисплей:блок;ширина:120 пикселей;плыть налево;поле слева:2px;граница:1px сплошная #000}#mainMenu{дисплей:блок;отступ:3px;текстовое оформление:нет;цвет фона:#fff;цвет:#009}#mainMenu а:наведите{цвет фона:#009;цвет:#fff}
  11. Откройте HTML-страницу в браузере.Этот код отображает следующее:
  12. В HTML добавьте вложенный список под элементом списка «О программе». 
    <ул>
  13. Главная
  14. Сервисы
  15. Товары
  16. Поддержка
  17. Блог
  18. О нас<ул>
  19. История компании
  20. Наши сотрудники
  21. Пресс-релизы
  22. Информация для инвесторов
  23. Контакты
  24. В CSS установите относительное положение пунктов главного меню. Нам нужно будет расположите подменю,используя абсолютное позиционирование,но абсолютно позиционированное элементы позиционируются в пределах их ближайшего нестационарно позиционированного содержащего элемент. Итак,чтобы подготовиться к этому,мы сначала сделаем элементы основного списка относительно расположен:
    #mainMenu li{ должность:родственная; дисплей:блок;ширина:120 пикселей;плыть налево;поле слева:2px;граница:1px сплошная #000}
  25. Абсолютное расположение подменю.Подменю содержатся в элементах ul внутри элементов li. Следующее правило использует абсолютное позиционирование для позиционирования их непосредственно под этими элементами li:
    #mainMenu ли ул{положение:абсолютное;поле:0px;отступ:0px;слева:-3px;верх:22px}
  26. Скрыть подменю. Добавить отображение:нет;к правилу выше,чтобы скрыть подменю. 
    #mainMenu ли ул{ дисплей:нет; положение:абсолютное;поле:0px;отступ:0px;слева:-3px;верх:22px}
  27. Стиль параметров подменю. Два приведенных ниже правила добавляют границы вокруг подменю. параметры. Мы отключаем верхнюю границу для всех вариантов,кроме первого,который мы идентифицируем с псевдоклассом :first-child,чтобы мы не получили двойную толщину граница,полученная из верхней и нижней границ соседних опций. 
    #mainMenu ли ул{положение:абсолютное;поле:0px;отступ:0px;слева:-3px;верх:22px;дисплей:нет}#mainMenu ли уль ли{ширина:150 пикселей;размер шрифта:меньше;верхняя граница:нет}#mainMenu li ul li:first-child{верхняя граница:1px сплошная #000}
  28. Отображение подменю,когда пользователь наводит курсор на основную опцию.
Comments
Leave Comment