Раскрывающееся меню 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 в HTML

Теги:  html  html  css

Используйте CSS, чтобы создать трехуровневое раскрывающееся меню (сначала горизонтальное, а затем вертикальное)

При использовании всплывающего меню: hover необходимо различать ul из двух раскрывающихся меню (например, используйте class = «», чтобы различать два ul), в дополнение к запуску В раскрывающемся списке выделяются два символа li.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Чистый CSS для создания трехуровневого раскрывающегося меню</title>
</head>
<!--CSS-->
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    header{
        background-color: #ff9900;
        width: 100%;
        height: 100px;
        margin-bottom: 5px;
        position: relative;
    }
    nav{
        left:160px;
        background-color: yellowgreen;
        font-weight: bold;
        bottom: 5px;
        position: absolute;
    }
    ul{
        list-style: none;
    }
    ul li{
        float: left;
        position: relative;
    }
    a{
        height: 40px;
        line-height: 40px;
        width: 100px;
        text-decoration: none;
        display: block;
        background-color: yellow;
        text-align: center;
        padding: 0px 10px;
        border: 1px solid white;
    }
    a:hover{
        background-color: green;
    }
    ul li ul{
        position: absolute;
        display: none;
    }
    ul li ul li{
        float: none;
        width: 100px;
        position: relative;
    }
    .

  
 
 first:hover .content1{
        display: block;
    }
    ul li ul li ul{
        position: absolute;
        left: 121px;  / * Зачем здесь использовать 121px вместо 101px * /
        top: 0px;
        display: none;
        z-index: 1;
    }
    ul li ul li ul li{
        float: none;
    }
    .second:hover .content2{
        display: block;
    }
</style>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Demons</a></li>
                <li><a href="#">Faded</a></li>
                <li><a href="#">Heartbeat</a>
                    <ul>
                        <li><a href="#">Good Time</a></li>
                        <li><a href="#">Only one</a></li>
                        <li><a href="#">Attention</a>
                            <ul>
                                <li><a href="#">Alone</a></li>
                                <li><a href="#">Skin</a></li>
                                <li><a href="#">Hero</a></li>
                                <li><a href="#">Monody</a></li>
                                <li><a href="#">Closer</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Monsters</a></li>
                        <li><a href="#">Clarity</a></li>
                    </ul>
                </li>
                <li><a href="#">Arigato</a></li>
                <li><a href="#">Stay</a></li>
            </ul>
        </nav>
    </header>    
</body>
</html>

Интеллектуальная рекомендация

VS2013 Настройте OpenCV2.

4.13

Этот метод прост и легко сделать. После повреждения OpenCV2.4.13 1. Добавьте переменные среды Пользовательская переменная, Новое, имя переменной openCV, значение D: \ opencv \ build Системная переменн…

Структура данных — Алгоритм поиска приоритета бренда (BFS)

Этот столбец записан.Алгоритм поиска родительского приоритета(BFS). (Полный код внизу) Соответствие глубокого приоритета алгоритм поиска Диаграмма хранения, сначала определитьбоковая сторона、вершина、Ф…

Обычно аннотирован в рамках SSM

Мибатис обычно аннотирован @Param — соответствующий параметр в интерфейсе на поля в аннотации @Select Получите количество ближайшего вставленного первичного ключа @Selectkey после @sinsertkey. Весна о…

Google Web Designer: графический инструмент для программирования HTML5

Компания Google запустила общедоступную бета-версию Web Designer, инструмента дизайна веб-сайтов и рекламы HTML5 для творческих профессионалов. В настоящее время Web Designer доступен для устройств Ma. ..

Как учетная запись службы WeChat каждый день отправляет сообщение?

Учетная запись подписки WeChat выдается один раз в день, а учетная запись службы WeChat — четыре раза в месяц. Это правило, установленное WeChat, не может быть изменено. Поэтому, когда многие люди обр…

Вам также может понравиться

TensorFlow VS TensorFlow Mobile VS TensorFlow Lite

Введение в TensorFlow TensorFlow — это фреймворк машинного обучения, и его общая архитектура в основном разделена на Client, Master и Worker. Развязанная архитектура делает его очень гибким, упрощая р…

Python3 — пусть объект поддерживает протокол управления контекстом

проблема Пусть объект поддерживает протокол управления контекстом, совместимый с помощью оператора. решение Для того, чтобы сделать объект совместимымwith Заявление, нужно реализовать__enter__() с__ex…

Tornado Note -Используйте торнадо для создания поддельной статистической системы посещаемости (семь)

В предыдущем блоге мы скорректировали часть структуры проекта и реализовали функцию посещаемости.

Сегодня мы создадим функции некоторых пользовательских систем: управление пользователями, утверждение …

SpringBoot004

Swagger Framework Опишите и протестируйте интерфейс API, чтобы автоматически генерировать документ интерфейса API. Добавить зависимость 2. Конфигурация Добавьте новый файл Application.yml в каталоге р…

Когда flask-migrate выполняет обновление, в таблице данных есть ошибка: 1050, «Table’xxxx ‘уже существует»

Экологический фон Недавно я пишу веб-проект flask. База данных использует базу данных mysql8.0, а метод подключения к базе данных использует метод сопоставления flask-sqlalchemy. Разместите свое собст…

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

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

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

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

Beautiful Travel Picture

Содержание
  • 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. Наконец, мы добавляем :hover selector to display: block для отображения скрытого содержимого при наведении курсора мыши на видимый элемент.

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

Pros

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

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

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

Эксклюзив: 75% скидка

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

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

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

AS LOW AS 12.99$

Pros

  • Great user experience
  • Offers quality content
  • Very transparent with their pricing

Main Features

  • Free certificates of completion
  • Focused on data научные навыки
  • Гибкий график обучения

СКИДКА 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

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

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

Выровнять содержимое по правому краю

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

Пример 

 .drop-content {
справа: 0;
}

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