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

Выпадающее меню с использованием только CSS и недокументированных возможностей элемента флажка

В этом уроке мы рассмотрим создание выпадающего меню на чистом CSS. Этот способ основан на применении элемента HTML флажка и интересном использовании классов и селекторов CSS без единой строки JavaScript. Демонстрацию работы этого способа и весь нужный код можно увидеть ниже. Также можно скачать полный исходный код по ссылке в конце урока.

Разметка

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

<div>
    <input type="checkbox">
    <label for="checkbox_toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>

Как Вы видите, здесь нет ничего сложного, все элементы HTML обычные, широко используемые:

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

Недокументированные возможности элемента флажка

Нам нужен элемент флажка только ради его установленного состояния, которому можно задать стили с помощью псевдокласса :checked. Установка и снятие флажка делается посредством нажатия на элемент подписи, что является обычной функцией браузера. Сначала спрячем элемент флажка:

input[type=checkbox]{
    display: none;
}

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

ul{
    display: none;
}

А вот и недокументированная возможность. Если объединить псевдокласс :checked с родственным селектором ~, можно изменять свойства CSS элементов, следующих за элементом флажка. Это причина, по которой нужно, чтобы элемент флажка располагался выше других элементов в дереве объектов документа.

input[type=checkbox]:checked ~ ul {
    display: block
}

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

Надеемся, вам понравился этот урок.

Автор урока Danny Markov

Перевод — Дежурка

Смотрите также:

• Меню для сайта рок-группы: хаотичное расположение с использованием трансформаций CSS
• Простое анимированное горизонтальное меню с использованием HTML5 и CSS
• Создание меню в ромбовидной сетке с использованием CSS

• Опубликовано в css, ноября 3, 2016
• Метки: css, css3, верстка, урок css, урок css3, урок верстка

Tweet

�



Комментарии

[an error occurred while processing the directive]

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

Сегодня я приведу пример создания вертикального выпадающего меню оформленного с помощью CSS. Постараюсь задействовать как можно больше свойств css, чтобы наглядно показать, как можно оформить созданное меню. Меню будет полностью оформлено с использованием Каскадных таблиц стилей. Единственно, что пришлось сделать с помощью JavaScript, это эффект выпадающего меню для Internet Explorer, т.к одно из нужных свойств он всё таки не поддерживает.

Для начала нужно построить структуру нашего меню. Она будет состоять из ненумерованного базового списка включающего в себя списки-подменю.
index.html

<title>Вертикальное выпадающее меню на CSS</title>
<script type="text/javascript" src="cssmenu.js"></script>
 	<link rel="stylesheet" type="text/css" href="style.css">
 
<ul>
 
 	<li><a href="#">Главная страница</a></li>
 
 
 	<li><a href="#">Создание сайтов</a>
 
<ul>
 
 	<li><a href="#">Дизайн сайтов</a></li>
 
 
 	<li><a href="#">Вёрстка сайтов</a></li>
 
 
 	<li><a href="#">Оптимизация сайтов</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">Продвижение сайтов</a>
 
<ul>
 
 	<li><a href="#">SEO продвижение</a></li>
 
 
 	<li><a href="#">SMO продвижение</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">SEO биржи</a></li>
 
 
 	<li><a href="#">SEO софт</a></li>
 
</ul>

style. css

<div>
/* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Задаём относительное позиционирование выпадающего списка */
ul li {
position: relative;
}
/* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Задаём стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка.   */
li:hover ul, li.over ul{
display: block;
}
/* Задаём стили для выпадающего меню */
ul li a:hover {
background: #77CF7F;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
text-decoration: none;
}
/* ХАК для ie, чтобы и там всё корректно отображалось:)*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */</div>

JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.

Вот так работает наше меню — Вертикальное выпадающее меню на CSS
Скачать Example1.zip

Твитнуть

Метки: вертикальное выпадающее меню, выпадающее меню на CSS, примеры css меню

Горизонтально центрированные меню (с дополнительными выпадающими списками)

• Демо
• Как это работает
• Примеры
• Особенности
• Демонстрация подменю
• Как работают подменю
• Скачать

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

Селекторы в CSS | Полный стек Web-D…

Включите JavaScript

Селекторы в CSS | Полный курс веб-разработки #9

Если вы выполните поиск в Интернете, вы найдете несколько методов центрирования, но большинство из них основаны на приемах CSS, JavaScript или нестандартных правилах CSS, которые поддерживаются не всеми браузерами.

В этом посте я покажу вам свой секретный метод центрирования меню, который не требует каких-либо CSS-хаков и будет работать во всех распространенных веб-браузерах, начиная с Internet Explorer 5.5!

Он также совместим с моими адаптивными макетами столбцов.

Давайте начнем с простого примера, затем я объясню, как это работает.

Демонстрация: базовый пример центрированного меню

Ниже вы должны увидеть меню из четырех горизонтально центрированных вкладок. Вторая вкладка установлена ​​как активная, поэтому она выделяется.

Попробуйте изменить размер окна браузера и размер текста, чтобы убедиться, что меню всегда остается центрированным и доступным для кликов.

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

Как центрировать меню с помощью CSS

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

Шаг 1. Поймите ключевой принцип: плавающие элементы сжимаются до ширины своего содержимого

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

Не плавающий раздел

Вот простой синий раздел , который не плавает. Обратите внимание, как он автоматически растягивается до 100% ширины содержащего его элемента (окна просмотра браузера).

Левый плавающий раздел

Если мы поместим div влево или вправо (неважно, в каком направлении), div автоматически уменьшится, чтобы соответствовать ширине содержимого внутри себя.

На приведенном выше рисунке плавающий элемент div теперь имеет ширину, равную ширине текста ‘div’ внутри него. Это сжатие плавающих элементов является ключом к процессу центрирования, оно помогает нам перемещать наше меню на нужное расстояние к центру.

Итак, теперь мы понимаем, как работают плавающие элементы, давайте посмотрим на HTML-структуру центрированного меню

Шаг 2. Создайте структуру HTML

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

 <дел>
   <ул>
      
Один
      
Два
      
Три
      
Четыре
   
 

Теперь давайте посмотрим на CSS.

Шаг 3. Выровняйте меню по правому краю

Начнем со стандартного меню, выровненного по правому краю:

Меню, выровненное по правому краю, оформлено следующим образом:

Контейнер (синий div)

Внешний div является плавающим, поэтому он растягивается, чтобы содержать ul внутри него.

Чтобы предотвратить сжатие div по горизонтали, я добавил ширина: 100%; , поэтому он остается на всю ширину страницы.

Ненумерованный список (пурпурный ‘ul’)

ul перемещается в правую часть страницы и сжимается до размера меню.

Элементы списка (зеленый ‘li’)

Все элементы li смещаются влево, поэтому они выстраиваются горизонтально.

Звенья (оранжевая буква «А»)

Ссылки установлены на display:block; , чтобы кликать по всему прямоугольнику.

Выровненное по правому краю меню готово!

Сделаем по центру.

Шаг 4. Сдвиг ненумерованного списка влево (пурпурный ‘ul’)

Затем мы сдвигаем элемент ul влево на 50%, используя position:relative; и справа: 50%; .

Важное примечание: При перемещении элемента в сторону на процентное значение расстояние будет составлять процент от его ширины содержащего элемента , а не его ширины. Итак, в данном случае 9Элемент 0053 ul сдвинется влево на 50% ширины родительского div (половина области просмотра браузера).

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

Шаг 5. Сдвиньте позиции вправо (зеленый ‘li’)

Последний шаг — сдвинуть элементы li обратно вправо на 50% с position:relative; Осталось и : 50%; . Это будет 50% ширины родителя ul и поместит меню точно в центр окна.

Теперь у нас есть меню по центру!

Вот готовый CSS:

 div#centeredmenu {
плыть налево;
ширина:100%;
фон:#fff;
нижняя граница: 4px сплошная #000;
нижняя граница: 15px;
должность: родственница;
поле: 1.5em 0;
}
div#centeredmenuул {
ясно: слева;
поплавок: справа;
стиль списка: нет;
поле: 10px 0 0 0;
заполнение: 0;
должность: родственница;
справа: 50%;
выравнивание текста: по центру;
}
div # centeredmenu ul li {
дисплей:блок;
плыть налево;
стиль списка: нет;
маржа: 0;
заполнение: 0;
должность: родственница;
слева: 50%;
}
div#centeredmenu ul li a {
дисплей:блок;
поле: 0 0 0 1px;
отступ: 3px 10px;
фон:#ддд;
цвет:#000;
текстовое оформление: нет;
высота строки: 1. 3em;
}
div#centeredmenu ul li a:hover {
фон:#369;
цвет:#fff;
}
div#centeredmenu ul li a.active,
div#centeredmenu ul li a.active:hover {
цвет:#fff;
фон:#000;
вес шрифта: полужирный;
} 

Некоторые важные примечания

Этот метод центрирования меню является надежным, но есть несколько вещей, о которых вы должны знать.

• Поскольку элемент ul не выровнен по вкладкам, вы не можете добавить к нему какие-либо видимые стили. Оставьте его без цвета фона и без рамки, чтобы он был полностью невидим. Сделайте все свои стили на div , li и a только элементы.
• Если вам нужно оформить первую или последнюю вкладку иначе, чем остальные, вы можете использовать li:first-child {/* css здесь */} и li:last-child {/* css здесь */} но они не поддерживаются в старых версиях Internet Explorer.

Примеры центрированного меню

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

Скачать
(css-centered-menus.zip 4kb)

Круглая синяя

• Один
• Два
• Три
• Четыре

Круглая полоса серая

• Один
• Два
• Три
• Четыре

бокс-таблетка синяя

• Один
• Два
• Три
• Четыре

толлтабс яблоко

• Один
• Два
• Три
• Четыре

темно-бордовый

• Один
• Два
• Три
• Четыре

тюльпаны синие

• Один
• Два
• Три
• Четыре

тюльпаны оранжевые

• Один
• Два
• Три
• Четыре

высокие выступы черные

• Один
• Два
• Три
• Четыре

топметал золото

• Один
• Два
• Три
• Четыре

бирюзовый topmetal

• Один
• Два
• Три
• Четыре

topmetal розовый

• Один
• Два
• Три
• Четыре

лиловый topmetal

• Один
• Два
• Три
• Четыре

Функции центрированного меню

Нет взлома CSS

CSS, используемый для этих центрированных меню, на 100% действителен и не требует взлома. Чтобы обойти модель сломанной коробки Internet Explorer, не используются горизонтальные отступы или поля. Вместо этого в этом дизайне используется продуманное относительное позиционирование.

Действительная HTML-разметка

HTML в этих центрированных меню проверяется как строгий XHTML 1.0. Но вы также можете использовать HTML5.

Совместимость с изменяемым размером текста

Эти центрированные вкладки полностью совместимы с изменяемым размером текста. Текст с изменяемым размером важен для доступности в Интернете. Люди с нарушениями зрения могут увеличить текст, чтобы им было легче читать. Становится все более важным сделать ваш веб-сайт совместимым с изменяемым размером текста, потому что люди ожидают более высокого уровня веб-доступности.

JavaScript не требуется

JavaScript не требуется. Некоторые макеты веб-сайтов основаны на хаках JavaScript для изменения размеров div и размещения элементов на своих местах, но здесь вы не увидите ничего подобного.

Полная кросс-браузерная совместимость

Чисто ориентированные на CSS меню были протестированы в следующих браузерах.

iPhone и iPod Touch

• Сафари
• Хром

Mac

• Сафари
• Firefox 2+
• Опера

Окна

• Firefox 2+
• Сафари
• Опера
• Гугл Хром
• Internet Explorer 5.5 и выше.

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

Для сенсорных устройств, таких как iPhone и iPad, достаточно просто нажать, чтобы открыть каждое подменю. Второе нажатие на родительскую ссылку приведет к переходу на этот URL-адрес.

Давайте посмотрим, как это делается…

Вот как выглядит структура HTML:

 <дел>
    <ул>
        
Один
            <ул>
                
Подчиненный
                
Вспомогательные два
                
Вторая тройка
                
Вторая четверка
                
Меньше пяти
            
        
        
Два
            <ул>
                
Подчиненный
                
Вспомогательные два
                
Вторая тройка
                
Вторая четверка
                
Подпять – это длинная ссылка, которая завершает
            
        
        
Три
            <ул>
                
Подчиненный
                
Вспомогательные два
                
Вторая тройка
                
Вторая четверка
                
Меньше пяти
            
        
        
Четыре
            <ул>
                
Подчиненный
                
Вспомогательные два
                
Вторая тройка
                
Вторая четверка
                
Меньше пяти
            
        
    
 

Как видите, мы вложили список ссылок в каждый элемент внешнего списка. Это самый смысловой способ создания такой структуры.

А вот CSS, благодаря которому все это происходит. Я немного разобрался с этим, если вам нужна дополнительная информация, пожалуйста, прочитайте комментарии в CSS.

 div#centeredsubmenu {
    ясно: оба;
    плыть налево;
    поле:0 0 1em;
    заполнение: 0;
    нижняя граница: 4px сплошная #000; /* черная линия под меню */
    ширина:100%;
    семейство шрифтов: Verdana, Geneva, без засечек; /* Шрифт меню */
    размер шрифта: 90%; /* Размер текста меню */
    z-индекс: 10; /* Это делает выпадающие меню над содержимым страницы ниже */
    должность: родственница;
 }
 
 /* Элементы верхнего меню */
 div#centeredsubmenu ul {
    маржа: 0;
    заполнение: 0;
    стиль списка: нет;
    поплавок: справа;
    должность: родственница;
    справа: 50%;
 }
 div#centeredsubmenu > ul > li {
    поле: 0 0 0 1px;
    заполнение: 0;
    плыть налево;
    должность: родственница;
    слева: 50%;
    верх: 1 пиксель;
 }
 div#centeredsubmenu > ul > li a {
    дисплей:блок;
    маржа: 0;
    заполнение: . 6em .5em .4em;
    размер шрифта: 1em;
    высота строки: 1em;
    фон:#ддд;
    текстовое оформление: нет;
    цвет:#444;
    вес шрифта: полужирный;
    нижняя граница: 1px сплошная # 000;
 }
 div#centeredsubmenu > ul > li.active a {
    цвет:#fff;
    фон:#000;
 }
 div#centeredsubmenu > ul > li a:hover {
    фон:#36f; /* Цвет фона элементов верхнего меню */
    цвет:#fff;
    нижняя граница: 1px сплошная # 03f;
 }
 div#centeredsubmenu > ul > li:hover a { /* Эта строка обязательна для IE 6 и ниже */
    фон:#36f; /* Цвет фона элементов верхнего меню */
    цвет:#fff;
    нижняя граница: 1px сплошная # 03f;
 }
 
 /* Элементы подменю */
 div#centeredsubmenu ул ул {
    дисплей:нет; /* Подменю по умолчанию скрыты */
    положение: абсолютное;
    верх: 2эм;
    слева:0;
    ширина: 10 см; /* ширина выпадающих меню */
 }
 div # centeredsubmenu ul ul li {
    ясно: слева;
    ширина:100%;
 }
 div#centeredsubmenu ul ul li a,
 div#centeredsubmenu ul li.active li a,
 div#centeredsubmenu ul li:hover ul li a { /* Эта строка обязательна для IE 6 и ниже */
    размер шрифта: . 8em;
    вес шрифта: нормальный; /* сбрасывает жирный шрифт для пунктов меню верхнего уровня */
    фон: #еее;
    цвет:#444;
    высота строки: 1.4em; /* перезаписать значение высоты строки из верхнего меню */
    нижняя граница: 1px сплошная #ddd; /* горизонтальные линии пункта подменю */
 }
 div # centeredsubmenu ul ul li a: hover,
 div#centeredsubmenu ul li.active ul li a:hover,
 div#centeredsubmenu ul li:hover ul li a:hover { /* Эта строка обязательна для IE 6 и ниже */
    фон:#36f; /* Цвет фона элементов подменю */
    цвет:#fff;
 }
 
 /* Отразить последнее подменю так, чтобы оно осталось на странице */
 div#centeredsubmenu ul li:last-child ul {
    слева:авто; /* сбросить влево:0; ценность */
    справа: 0; /* Вместо этого установите правильное значение */
 }
 
 /* Сделать так, чтобы подменю появлялись при наведении мыши */
 div#centeredsubmenu ul li:hover ul { /* Эта строка обязательна для IE 6 и ниже */
    дисплей:блок; /* Показать подменю */
 } 

Перелистывание последнего подменю

В качестве небольшого дополнения я перевернул последний пункт меню, чтобы он не выходил за пределы страницы. Для этого я использую li:last-child ul для нацеливания на последний элемент подменю ul.

Скачать бесплатно

Загрузите мои демо-файлы и посмотрите, как работают центрированные меню.

Скачать
(css-centered-menus.zip 4kb)

Наслаждайтесь =)

Далее:
Как добавить CSS в HTML ›
Столбцы одинаковой высоты с CSS ›

Статьи по веб-дизайну

Пользовательские теги HTML (18 вещей, которые нужно знать перед их использованием)

Пустые HTML-теги (21 странная вещь, которую вам нужно знать!)

Столбцы одинаковой высоты (CSS Grid, Flexbox, плавающие контейнеры и табличные методы)

Как добавить CSS в HTML (со стилями Link, Embed, Import и Inline)

Замена Div на пользовательские элементы для улучшенной разметки

Адаптивные отступы, поля и поля с помощью CSS Calc

: как предотвратить каскадирование CSS с помощью Shadow DOM

Адаптивный размер шрифта (оптимальный текст в каждой контрольной точке)

Адаптивные колонки: создавайте потрясающие макеты с помощью пользовательских HTML-тегов

Адаптивный план дома (веб-дизайн и архитектура!)

Boggle Dice Shaker (созданный с помощью Javascript)

Спускайся! Как сохранить нижние колонтитулы внизу страницы

CSS: верхнее поле против нижнего (трюк, который вы должны знать)

Адаптивная баннерная реклама с HTML5 и CSS3

Styling CSS выпадающее меню при наведении курсора

TL;DR — выпадающее меню CSS относится к меню, которое скрывает несколько элементов или отображает дополнительную информацию. Этот контент обычно появляется при наведении курсора мыши.

Наведите курсор на меня

Это выпадающий текст!

Красивая фотография из путешествия

Содержание

• 1. Раскрывающееся меню CSS: основные советы
• 2. Основное раскрывающееся меню
• 3. Добавление ссылок
• 4. Выравнивание содержимого по правому краю
• 5. Раскрывающееся меню CSS: полезные советы

Раскрывающееся меню CSS: основные советы

• Раскрывающееся меню CSS скрывает содержимое или параметры до тех пор, пока не произойдет определенное событие (обычно когда срабатывает :hover ).
• HTML создает основную структуру , в то время как CSS добавляет основные свойства к стилю кнопки или текста в виде раскрывающегося меню.
• Раскрывающийся список  меню являются общими для добавления навигационных кнопок .

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

Взгляните на этот пример кода, показывающий процесс создания раскрывающегося меню:

Пример

 .drop {
положение: родственник;
отображение: встроенный блок;
}

.drop-контент {
положение: абсолютное;
цвет фона: #8842d5;
минимальная ширина: 150 пикселей;
отступ: 15 пикселей;
z-индекс: 1;
дисплей: нет;
}

.drop: hover .drop-content {
дисплей: блок;
}
 

Попробуйте живое обучение на Udacity

1. Первым шагом является создание HTML-элемента , который будет изначально видимым элементом в раскрывающемся меню. Например, может показать скрытых элемента при наведении на него курсора.
2. Затем необходимо добавить содержимое, которое скрывает выпадающее меню . Вы делаете это, заключая скрытые элементы в
   . дисплей: встроенный блок позиций содержание.
3. имеет относительное положение , чтобы убедиться, что скрытое содержимое отображается ниже видимого элемента.
4. Необходимо включить position: absolute и display: none для поля содержимого, чтобы гарантировать, что оно останется скрытым до наведения.
5. Вы можете добавить свойства CSS для выпадающего меню: изменить фон, отступы, ширину или шрифты.
6. Наконец, мы добавляем :наведите селектор на дисплей: блок , чтобы скрытый контент отображался, как только курсоры мыши перемещаются над видимым элементом.

Примечание.   overflow:auto включает прокрутку скрытого меню на небольших экранах.

Pros

• Простой дизайн (без лишней информации)
• Качественные курсы (даже бесплатные)
• Разнообразие функций

Основные функции

• Программы NanodeGree
• Подходят для предприятий
• Платные сертификаты о завершении

Эксклюзив: 75% от

ПРОФЕСС

. о своих пользователях

Основные характеристики

• Огромное разнообразие курсов
• 30-дневная политика возврата
• Бесплатные сертификаты об окончании

AS всего 12,99 $

Pros

• Great пользовательский опыт
• предлагает качественное содержание
• очень прозрачные с их ценами

Основные функции

Основные функции

. научные навыки

СКИДКА 75%

Выпадающее меню CSS со ссылками может служить навигационными меню для веб-сайтов.

Пример

 .drop_btn { /* Это для стилизации кнопки раскрывающегося списка */
цвет фона: #8842d5;
белый цвет;
отступ: 15 пикселей;
размер шрифта: 18 пикселей;
граница: нет;
курсор: указатель;
}

.уронить {
отображение: встроенный блок;
    положение: родственник;
}
 
.drop-content { /* Для оформления самого контента */
цвет фона: белый;
минимальная ширина: 150 пикселей;
дисплей: нет;
 положение: абсолютное;
}

.drop-content a { /* Для оформления ссылок внутри контента */
черный цвет;
отступ: 15 пикселей;
текстовое оформление: нет;
дисплей: блок;
}

.drop-content a:hover { /* Изменяем цвет выпадающих ссылок при наведении на них */
    цвет фона: светло-серый;
}

.drop:hover .drop-content { /* Показывает список выпадающего меню при наведении */
дисплей: блок;
}

.drop:hover .drop_btn { /* Также меняет цвет кнопки раскрывающегося списка при наведении курсора мыши */
цвет фона: #7300ff;
}
 

Попробуйте живое обучение на Udacity

Чтобы создать этот тип меню, выполните те же действия, что и в предыдущем разделе.