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

Leave a Comment / Html / By /

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

Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>.

Итак приступим к написанию основной структуры сайта


<!DOCTYPE html>
<html>
  <head>
    <title> Выпадающее меню на CSS </title>
  </head>
  <body>
   
  </body>

После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>



Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню.


nav {
     margin: 50px 0;
     bacground-color: #E94f56;
    }
nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
       }
nav ul li {
           margin: 0px -7px 0 0;
           display: inline-block;
           background-color: #E94f56;
           }
nav a {
       display: block;
       padding: 0 10px;
       color: #ffff;
       font-size: 23px;
       line-height: 60px;
       text-decoration: none;
       }
nav a:hover {
             backgroung-color: #000001;
            }

Проверим то что у нас получилось.


 

Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке. Создадим структуру с вложенным меню.


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a>
        <ul>
            <li><a href='#'>История HTML</a></li>
            <li><a href='#'>Структура HTML</a></li>
            <li><a href='#'>HTML5</a></li>  
        </ul>
    </li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>

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

nav ul ul {
        display: none;
        position: absolute;
        top100%;
       }
nav ul li:hover>ul {
            display: inherit;
           }
nav ul ul li {
       min-width: 180px;
       float: none;
       display:list-item;
       position: relative;
       }

Должно получиться следующее

Добавим для пункта меню с вложенным подменю соответствующий индикатор.

     li> a:after {content: '+'}
     li> a:only-child:after {content:'';}

В итоге у нас получилось следующее

 

Выпадающее меню на 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 CSS Виджет CSS Раскрывающийся список меню

Щелкните следующие ссылки, чтобы просмотреть руководство по виджету CSS и раскрывающемуся меню.

  1. Выровненный раскрывающийся список навигации CSS
  2. Заполнение раскрывающегося списка навигации CSS
  3. Навигация CSS и выделение элемента раскрывающегося списка
  4. Выпадающая панель навигации
  5. Выровнять раскрывающийся список с панелью навигации
  6. Раскрывающаяся навигация CSS3


  7. Раскрывающаяся панель навигации
  8. Создать навигацию с раскрывающимся списком, перекрывающим основное содержимое
  9. Трехуровневый раскрывающийся список навигации
  10. Сделать так, чтобы подссылки меню css отображались вертикально, а не горизонтально в раскрывающемся списке
  11. Создание моего раскрывающегося меню центральный на странице
  12. Выпадающее меню Заполнение
  13. Выпадающее меню Перемещение li вправо в меню
  14. Меню навигации Выпадающее при наведении


  15. Выпадающее меню навигации
  16. Отображение выпадающего меню при наведении на кнопку
  17. Скорость наведения выпадающего меню
  18. Настройка выпадающего меню цвета фона LI
  19. Простое выпадающее меню jQuery с использованием toggleClass выпадающее меню только с css и html
  20. выпадающее меню в панели
  21. 3-уровневое раскрывающееся меню CSS с вертикальным выравниванием
  22. создание трехуровневого раскрывающегося меню с 3-м уровнем в CSS
  23. Добавить полосу прокрутки в параметры раскрывающегося меню
  24. Добавление тени для вторичных ссылок раскрывающегося меню
  25. Добавление раскрывающегося меню на вкладку в CSS
  26. Добавление раскрывающегося меню для прозрачной панели навигации
  27. Создание раскрывающегося меню с помощью CSS
  28. Создание раскрывающегося списка меню с несколькими столбцами
  29. Изменить сторону и стрелку направления в раскрывающемся подменю для начальной загрузки
  30. Создать раскрывающееся меню с помощью OL и CSS
  31. Создать раскрывающееся меню с подсветкой
  32. Раскрывающееся меню со строкой меню
  33. Создать раскрывающееся меню только с помощью CSS
  34. Строка меню с раскрывающимся меню
  35. Показать раскрывающееся меню с элементом и состоянием наведения
  36. Строка меню со значком и раскрывающимся списком
  37. Кнопка с раскрывающимся меню
  38. Центрированные элементы панели навигации с элементами раскрывающегося меню
  39. Получить панель навигации с раскрывающимся меню для растяжения на 100 %
  40. Центрирование панели навигации с панелью, похожей на раскрывающееся меню
  41. Центрировать раскрывающуюся строку меню навигации на чистом CSS3
  42. Трехуровневое раскрывающееся меню
  43. Панель навигации с одним раскрывающимся меню
  44. Выравнивание раскрывающегося меню CSS, удар при наведении
  45. Трехуровневое раскрывающееся меню по горизонтали
  46. Центрирование логотипа в раскрывающемся меню
    47. 9000 CSS5 Центрирование раскрывающегося меню
  47. Изменить вертикальное раскрывающееся меню в горизонтальное
  48. Ограничение ширины дочернего элемента UL в раскрывающемся меню
  49. Создать раскрывающееся меню CSS
  50. Индикатор количества добавляет дополнительные пробелы в раскрывающееся меню
  51. Создать выпадающее меню с ul внутри li
  52. Выпадающее меню на основе CSS
  53. Выпадающее меню CSS Fading
  54. Выпадающее меню CSS с эффектом наведения
  55. Выпадающее меню CSS, три уровня
  56. Выпадающее меню CSS и статическое Элементы списка
  57. Раскрывающееся меню с интервалом между полями
  58. Подэлементы раскрывающегося меню CSS
  59. Раскрывающееся меню CSS с нижним полем
  60. Раскрывающееся левое меню CSS с наложением друг на друга
  61. Раскрывающееся меню CSS, перекрытие родительского элемента
  62. Вертикальное выпадающее меню CSS
  63. Выпадающее меню CSS раскрывается вертикально
  64. Выпадающее меню CSS вместе с окном поиска
  65. Выпадающее меню CSS эффект наведения
  66. Выпадающее меню CSS с большим размером подменю
  67. Выпадающее меню CSS отображается
  68. Cs
    69. , длинный текст
  69. Выпадающее меню CSS с полем поиска
  70. Выпадающее меню CSS вертикально
  71. Выпадающее меню CSS с подменю, выровненным по правому краю родительского элемента
  72. Выпадающее меню CSS без фиксированной ширины
  73. Заливка цветом фона для выпадающего меню
  74. Выпадающее меню CSS при наведении для отображения пункта меню
  75. Выпадающее меню с рамкой раскрывающееся меню с прозрачным фоном
  76. Выпадающее меню Fade Out
  77. Эффект наведения выпадающего меню
  78. Состояние наведения выпадающего меню
  79. Выпадающее меню в CSS со скругленным углом
  80. Выпадающее меню, отображаемое после изображения
  81. Выпадающее меню с горизонтальным подменю
  82. Выпадающее меню, сделать его видимым вверх
  83. Выпадающее меню входа с использованием только html/css
  84. Выпадающее прозрачное меню CSS
  85. Выпадающее меню с фоном

  86. 5 Выпадающее меню в html css

  87. Выпадающее меню с фоном при наведении
  88. Выпадающее меню с различным цветом
  89. Пункт выпадающего меню
  90. Выпадающее меню при наведении на кнопку
  91. Выпадающее меню работает
  92. Выпадающее меню слева
  93. Выпадающее меню с подменю CSS HTML
  94. Выпадающее меню без границ
  95. Выпадающие меню отображаются правильно Выпадающее меню CSS
  96. Горизонтальное меню CSS с вертикальным под/выпадающим меню.
  97. Настроить раскрывающееся меню в CSS
  98. Сделать раскрывающееся меню в стиле вкладок
  99. Щелкните, чтобы открыть раскрывающееся меню
  100. Двухуровневое раскрывающееся меню
  101. добавить раскрывающееся меню с помощью CSS
  102. добавить раскрывающееся подменю
  103. создать раскрывающееся меню на панели навигации
  104. создать раскрывающееся меню слева от родительского элемента
  105. создать одноуровневое раскрывающееся меню menu
  106. элементы плавающего списка слева в раскрывающемся меню, нажмите, чтобы показать
  107. Как сделать приличное раскрывающееся меню
  108. Способ сделать раскрывающееся меню фиксированным сверху с помощью css
  109. сделать раскрывающееся меню открытым, пока зависание
  110. сделать выпадающее меню на чистом CSS с плавным нарастанием/медленным появлением
  111. предотвратить перекрытие выпадающего меню с границами
  112. выпадающее меню в формате HTML без фона
  113. выпадающее меню CSS по центру подменю с эффектом затухания
  114. Наведите указатель мыши, чтобы отобразить подраздел в раскрывающемся меню css

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

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

  1. Начните со следующего HTML-документа, содержащего неупорядоченный список:
    

<голова>
<мета-кодировка="UTF-8">
Раскрывающееся меню навигации

<тело>
<основной>
<заголовок>
 
    Горизонтальная навигация с раскрывающимся меню
     

<навигация>
<ул>

  2. Главная
    3. 

  3. Сервисы
    4. 

  4. Товары
    5. 

  5. Поддержка
    6. 

  6. Блог
    7. 

  7. О нас
    8. 

  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. 

  14. Сервисы
    15. 

  15. Товары
    16. 

  16. Поддержка
    17. 

  17. Блог
    18. 

  18. О нас
<ул>

  19. История компании
    20. 

  20. Наши сотрудники
    21. 

  21. Пресс-релизы
    22. 

  22. Информация для инвесторов
    23.
  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. Отображение подменю, когда пользователь наводит курсор на основную опцию.

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

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