При наведении выпадающее меню: Как сделать всплывающее меню при наведении
Содержание
Простое и красивое горизонтальное выпадающее меню на CSS и HTML — Блокнот IT инженера
Предлагаю, вашему вниманию простое и при этом красивое двухуровневое выпадающее горизонтальное меню на чистых CSS и HTML. Его код я собрал по крупицам и лично адаптировал при подготовке новой темы WordPress.
У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:
HTML код горизонтального выпадающего меню
Код горизонтального выпадающего меню выглядит так, это реальный пример взятый с одного из моих сайтов:
<nav role="navigation">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="#">О блоге</a>
<ul>
<li><a href="/about">Об авторе</a></li>
<li><a href="/history">История блога</a></li>
<li><a href="/privacy-policy">Политика конфиденциальности</a></li>
<li><a href="/disclaimer">Отказ от ответственности</a></li>
</ul>
</li>
<li><a href="/sitemap">Карта сайта</a></li>
<li><a href="/contact">Обратная связь</a></li>
</ul>
</nav>
Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.
CSS код стилей для горизонтального выпадающего меню
/*| Navigation |*/
nav{
background: #334; /* Задаем основной фон меню */
padding: 0 3%; /* Задаем внутренние отступы */
}
nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}
nav ul li {
display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */
}
nav ul li a {
display:block; /* Настраиваем оформление пунктов меню */
padding: 15px 20px;
font-size: .9em;
color: #eee;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-top: 1px solid #445;
}
nav ul li:hover {
background: #445; /* Меняем фон пункта меню при наведении указателя мыши */
}
nav ul li ul {
display: none; /* Прячем пункты выпадающего блока меню */
position:absolute;
background: #334; /* Задаем фон выпадающего блока меню */
}
nav ul li:hover ul {
display:block; /* Отображаем подменю при наведении мыши */
}
nav ul li ul li {
display:block; /* Выстраиваем по вертикали пункты выпадающего меню */
}
Выводы о реализации меню на CSS и HTML
Вот так легко и непринужденно можно сделать горизонтальное выпадающее меню на голом CSS и HTML. К недостаткам решения можно отнести то, что приведенный пример реализует двухуровневое выпадающее меню, то есть когда из горизонтального блока выпадает вертикальный. Если же вам нужно трехуровневое меню, когда из выпавшего вертикального меню необходимо появление еще одного подменю, то предложенное мною решение необходимо доработать.
Так же предложенное решение содержит минимум оформления и требует доработки под дизайн сайта, где оно будет внедряться.
usability — Должен ли раскрывающийся список закрываться, когда мышь уходит?
Это простая логика, и работа с прототипами сразу покажет ее. Используя те же изображения caffe, мы можем сделать простую аналогию. Предположим, вы заходите в caffe1 , затем откройте меню и закажите что-нибудь. Выходите и идите в caffe2 . Где у него … вы ожидали увидеть меню caffe1 или caffe2 ? Что вы думаете, если вы видите caffe1’s вместо caffe2’s ?
Ну, как видно, ответы очевидны, и они основаны на принципах построения макета. Они не только применимы к вашему примеру, но и применимы ко всему. Подумайте о ландшафте (макет), где вы строите дом с разными комнатами. Некоторые могут быть похожими, но все они будут иметь особые характеристики и возможности: у вас будет кухня, ванная комната, столовая, прачечная и т. Д. Все они имеют разные возможности. Вы сможете готовить на кухне, но вы не сможете сделать это в прачечной.
Это известно как плоскость и размеры зданий , где у вас разные плоскости и разные измерения, связанные с физикой, и то, как мы воспринимаем окружающий нас мир (следовательно, хотя это относится только к вашим конкретным случай тангенциально, он включает измерения time )
Конструкция материалов использует эту метафору листов материалов с размерами и глубинами (хотя, вопреки распространенному мнению, они ее не изобретали). И это действительно легко реализовать: просто начните с чистого листа бумаги. Затем добавьте элементы по мере необходимости. Используйте пост-это или вырезать из других листок бумаги. Вы создадите прототипы, где вы сможете увидеть, как каждый элемент соединяется, и, что более важно, , как они не соединяются.
Если это отзывчиво, пойдите с кликом, нет ни одного. На мобильных устройствах нет поведения наведения, поэтому поведение на основе поведения на основе хаоса — пустая трата времени. Однако, если это адаптивно, вы можете иметь поведение наведения для рабочего стола (лучше для обнаружения) и поведение кликов для мобильных устройств. Тем не менее, нажмите, чтобы открыть, и нажмите, чтобы закрыть, не нужно, это больше усилий и трений, без усиления. Просто сделайте следующее:
- Рабочий стол (адаптивный):
на мыши оставить, закрыть меню. - Мобильный (отзывчивый):
при нажатии (menu2), закрыть меню 1
Таким образом вы сохраняете клик и избегаете открывать незаметные меню, когда вы находитесь в совершенно другом свойстве
Делаем вместе анимированное выпадающее меню на CSS3
Вы здесь:
Главная — CSS — CSS3 — Делаем вместе анимированное выпадающее меню на CSS3
В этом уроке мы научимся с вами делать горизонтальное анимированное выпадающее меню на
CSS3, при наведении курсором на его категории, будет меняться цвет.
Рассмотрим пример написания кода выпадающего меню для создания категорий для Интернет-магазина. Открываем свою любимую программу для веб-разработки, у меня это Notepad++ и создаем два файла – index.html и style.css. Подключаем файл с нашими стилями к созданной HTML странице, а именно вставляем эту строчку кода между тегами head.
<link rel="stylesheet" href="styles.css">
Первым делом построим структуру нашего будущего выпадающего меню с помощью маркированного списка . Между тегами body разместим тег header, а внутри него контейнер nav с идентификатором тоже #nav
. Если меню навигации будет только одно на странице, то ему можно присвоить id
стилей, а не класс. Таким будет HTML код.
<!DOCTYPE html>
<html>
<head>
<title>Интернет магазин</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav id = "nav">
<ul>
<li><a href = "#">Одежда</a>
<ul class = "second">
<li><a href = "#">Мужская</a></li>
<li><a href = "#">Женская</a></li>
<li><a href = "#">Детская</a></li>
</ul>
</li>
<li><a href = "#">Электроника</a>
<ul class = "second">
<li><a href = "#">Телефоны</a></li>
<li><a href = "#">Телевизоры</a></li>
<li><a href = "#">Компьютеры</a></li>
</ul>
</li>
<li><a href = "#">Мебель</a>
<ul class = "second">
<li><a href = "#">Диваны</a></li>
<li><a href = "#">Столы</a></li>
<li><a href = "#">Кровати</a></li>
</ul>
</li>
<li><a href = "#">Техника</a>
<ul class = "second">
<li><a href = "#">Холодильники</a></li>
<li><a href = "#">Стиральные машины</a> </li>
<li><a href = "#">Электроплиты</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
А здесь мы видим результат в браузере. Далее приступим к описанию внешнего вида нашего меню. Все вложенные списки второго уровня получили класс .second. Таким образом вложенные или выпадающие списки перешли под свое управление другим классом. Сделаем все списки меню кликабельными с помощью атрибута a href=»#».
Теперь обратимся к CSS и пропишем все нужные нам стили в заранее подготовленном style.css Обнуляем все отступы, так как разные браузеры отображают их по своему.
#nav *{
padding: 0;
margin: 0;
}
/* отступ от края 150 пикселей */
header{
font-family: Arial;
margin-top: 150px;
}
/* говорим маркерам нет */
#nav ul{
list-style: none;
}
/* прячем подменю второго уровня */
#nav li .second{
top: 100%;
display: none;
position: absolute;
}
/* ставим видимые списки в ряд */
#nav > ul > li{
float: left;
position: relative;
width: 180px;
}
Атрибут float прижимает списки к левой стороне браузера, ставя их в один ряд. А
так же необходимо задать относительное позиционирование, чтобы выпадающие списки
располагались относительно блока nav, а не окна браузера.
Далее красиво стилизуем наше выпадающее меню.
#nav > ul li a{
font-size: 17px;
background: #E0E0E4;
display: block;
padding: 16px 32px 16px 42px;
color: #4E4E4F;
text-decoration: none;
}
Вот и подошли мы к самому главному действию – как сделать само выпадающее меню. Только две строчки кода и при наведении курсора невидимая часть станет видимой.
#nav li:hover .second{
display: block;
}
После придания внешнего вида, сделаем так, что при наведении курсора на категории,
меняется цвет ссылки и самого блока:
#nav li a:hover{
transition: all 0.4s ease; /* плавный переход */
color: #ededf2;
background: #4e4e4f;
}
Двухуровневое выпадающее и анимированное меню на CSS готово и работает. Посмотреть весь код и попробовать меню в действии можно на фиддле.
-
Создано 03.08.2017 12:58:06 -
Михаил Русаков
Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
html — Выпадающие меню при наведении курсора и списки
В настоящее время я пытаюсь создать вертикальную панель навигации, используя списки, однако у меня возникают проблемы, когда при наведении курсора на ul все выпадающие меню в li появляются или не отображаются вообще. Есть ли этому решение?
HTML:
<тело>