Выпадающее меню с поиском на CSS3 и HTML
Никита Киселев
В этой статье я покажу как с помощью CSS3 и HTML5 создать красивое выпадающее меню с полем поиска.
Подготовка
Разработка меню будет вестись в песочнице codepen. В качестве CSS препроцессора используется SCSS. Так же, активированы автоматические преффиксы autoprefixer, что позволяет сосредоточиться только на разработке и не отвлекаться на ручное добавление преффиксов к свойствам, которые ещё не добавлены в спецификацию браузеров.
Для иконок будем использовать FontAwesome.
На этом подготовка завершена. Начнём с продумывания HTML кода.
HTML
Навигационное меню будет представлять собой несортированный список с классом .navigation, в котором будут различные типы элементов:
- Обычная ссылка
- Форма поиска
- Выпадающее меню
<nav>
<ul>
<li>
<a href="#">
<i></i>
</a>
</li>
<li><a href="#">Приложение</a></li>
<li><a href="#">Статистика</a></li>
<li>
<form>
<input type="search" placeholder="Введите фразу для поиска.
.." />
<button>
<i></i>
</button>
</form>
</li>
<li>
<a href="#">
Опции <i></i>
</a>
<ul>
<li><a href="#">Настройки</a></li>
<li><a href="#">Приложение</a></li>
<li><a href="#">Статистика</a></li>
<li><a href="#">Заказы</a></li>
</ul>
</li>
</ul>
</nav>
.." />
<button>
<i></i>
</button>
</form>
</li>
<li>
<a href="#">
Опции <i></i>
</a>
<ul>
<li><a href="#">Настройки</a></li>
<li><a href="#">Приложение</a></li>
<li><a href="#">Статистика</a></li>
<li><a href="#">Заказы</a></li>
</ul>
</li>
</ul>
</nav>CSS стили
Пройдёмся по основным моментам в верстке. Весь код вы можете посмотреть в codepen: https://codepen.io/nikitakiselev/pen/JKWvPR.
Flexbox
Для того чтобы все элементы списка .navigation отображались в строку используем новое CSS свойство display: flex:
.navigation {
display: flex;
}Теперь, все дочерние элементы li будут выводиться в строку.
Выпадающее меню
Меню сделано только средствами CSS3. У этого способа есть свои недостатки, но из-за своей простоты используем именно его.
В CSS3 есть замечательное свойство transition, которе позволяет сделать изменение некоторых CSS свойств у элемента плавным.
По умолчанию меню должно быть скрыто. Это можно сделать с помощью display: none, но transition не анимирует это свойство, т.к. у него нет числового значения начального и конечного состояния. На помощь приходит свойство opacity: 0, которое делает элемент полностью прозрачным.
.subnav {
opacity: 0;
transition: opacity .3s;
}
li:hover .subnav {
opacity: 1;
}Но тут есть одна проблема. Если у элемента нулевая прозрачность, это ещё не значит что его не существует, поэтому все события для него будут работать, например клик мышкой по ссылкам. Чтобы этого избежать есть свойство pointer-events.
.subnav {
opacity: 0;
pointer-events: none;
transition: opacity . 3s;
}
li:hover .subnav {
opacity: 1;
pointer-events: all;
}
Цвет placeholder
Чтобы изменить цвет placeholder’ов использовалась вот такая конструкция:
::-webkit-input-placeholder {
color: white;
}
:-moz-placeholder {
color: white;
}
::-moz-placeholder {
color: white;
}
:-ms-input-placeholder {
color: white;
}Сейчас, для простоты она размещена прямо в главном css файле, но в более серьёзным проектах мы вынесем это в миксины. Mixin — это что-то типа функции в php, только для SASS и LESS.
Демо пример
See the Pen Drop-down menu with search on CSS3 and HTML5 by nikitakiselev (@nikitakiselev) on CodePen.
Теги: CSS HTML
Please enable JavaScript to view the comments powered by Disqus.Горизонтальное выпадающее меню на CSS
Программирование на Python для начинающих
Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python.
В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
| E-mail: | |
| Имя: | |
Другие курсы
Как создать профессиональный Интернет-магазин
После семинара:
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Записаться
Другие курсы
Ты никогда не решишь проблему, если будешь думать так же, как те, кто ее создал.
Альберт Эйнштейн
Я уже когда-то писал о том, как сделать вертикальное выпадающее меню на CSS. В этой же статье я расскажу о том,
Привожу HTML-код:
<ul>
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Меню 1</a>
<ul>
<li>
<a href="#">Подменю 1</a>
</li>
<li>
<a href="#">Подменю 2</a>
</li>
<li>
<a href="#">Подменю 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Меню 2</a>
<ul>
<li>
<a href="#">Подменю4</a>
</li>
<li>
<a href="#">Подменю 5</a>
</li>
<li>
<a href="#">Подменю 6</a>
</li>
<li>
<a href="#">Подменю7</a>
</li>
<li>
<a href="#">Подменю 8</a>
</li>
</ul>
</li>
</ul>И CSS-код:
ul. menu {
display: inline-block;
margin: 0;
padding: 0;
}
ul.menu li {
float: left;
list-style: none;
}
ul.menu li a {
display: block;
padding: 8px 20px 10px;
text-decoration: none;
}
ul.menu li ul {
display: none;
padding-left: 10px;
}
ul.menu li:hover ul {
display: block;
position: absolute;
}
ul.menu li:hover ul li {
float: none;
}
ul.menu li:hover ul li a {
padding: 6px 0 8px;
}
menu {Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается
Теперь у Вас не должно быть проблем с созданием горизонтального выпадающего меню на CSS.
Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup
- Создано 06.03.2013 04:25:07
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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]
ru»]Как создать свой сайт[/URL]Выпадающее меню — HTML и CSS — Форумы SitePoint
rimsky1 1
Вечер,
Учусь на работе, сейчас делаю новый сайт для своего семейного бизнеса.
Как сделать так, чтобы это раскрывающееся меню навигации работало на ПК/мобильных устройствах? Я не хочу, чтобы это было слишком причудливо, такой же дизайн, как и у самой основной навигации, я возился, пытаясь заставить его работать как настоящий переключатель, поэтому, когда пользователи нажимают «Сервисы», он переключался вниз, но это не работает должным образом.
В идеале при наведении должны отображаться выпадающие ссылки для настольных компьютеров, а для мобильных устройств для отображения требуется касание.
<дел>
<дел>
<дел>
html">
Панель навигации {
цвет фона: #ffffff;
набивка: 2рем 1рем;
положение: родственник;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.навигационный элемент {
дисплей: гибкий;
выравнивание содержимого: пробел между;
выравнивание элементов: по центру;
}
.логотип изображения {
ширина: 10рем;
дисплей: блок;
}
.navigation-bar-toggle {
набивка: 1рем;
цвет фона: #ecf0f1;
цвет: наследовать;
курсор: указатель;
преобразование текста: верхний регистр;
граница: нет;
шрифт: наследовать;
радиус границы: 0,25 бэр;
}
.navigation-bar-dropdown {
дисплей: гибкий;
flex-направление: столбец;
}
.navigation-bar-menu {
flex-направление: столбец;
справа: 0;
переполнение: скрыто;
верх: 100%;
фон: #ecf0f1;
дисплей: нет;
положение: абсолютное;
ширина: 100%;
}
.navigation-bar-menu .active {
цвет фона: #242424;
цвет: #ffffff;
вес шрифта: 300;
}
.navigation-bar-menu li {
дисплей: гибкий;
выравнивание содержимого: по центру;
набивка: 1рем;
}
.
navigation-bar-menu a {
преобразование текста: верхний регистр;
}
.навигационная панель a:hover {
непрозрачность: 1 !важно;
}
.navigation-bar-menu: не (.active): наведите курсор {
цвет фона: #242424;
цвет: #ffffff;
непрозрачность: 1;
имя-анимации: fadeInOpacity;
количество итераций анимации: 1;
функция синхронизации анимации: легкость;
продолжительность анимации: 500 мс;
}
.navigation-bar-menu.open {
дисплей: гибкий;
}
Только экран @media и (минимальная ширина: 700 пикселей) {
/* ПАНЕЛЬ НАВИГАЦИИ */
.navigation-bar-toggle {
дисплей: нет;
}
.navigation-bar-menu {
дисплей: гибкий;
flex-направление: строка;
положение: родственник;
фон: нет;
оправдать-содержание: конец;
ширина: авто;
зазор: 1бэр;
}
.navigation-bar-menu li {
цвет фона: #ecf0f1;
радиус границы: 0,25 бэр;
набивка: 1рем;
}
}
querySelector('.navigation-bar-menu')
menuToggler.addEventListener('щелчок', () => {
menu.classList.toggle('открыть')
})
})
быть только приятным глазу эффектом, а не надежным средством навигации.
Wenn Benutzer Probleme haben, das zu finden, was sie auf deiner Websitesuchen, werden sie wegklicken und woanderssuchen. Eine funktionale Website macht es wahrscheinlicher, Besucher zu gewinnen, und sorgt eher dafür, dass sie länger auf deiner Website bleiben. Damit deine Веб-сайт функциональный ist, muss sie ein Dropdownmenü haben.
Der Zweck eines Dropdownmenüs ist es, Platz auf dem Bildschirm zu Sparen und den Benutzern trotzdem den Zugriff auf sämtliche Inhalte deiner Website zu ermöglichen.
HTML используется для «языка разметки гипертекста» и CSS для «языка каскадных таблиц стилей».
Einige Nachteile от CSS sind, dass es anfällig ist und nicht von jedem Browser unterstützt wird. In der Regel dauert es auch länger, bis man sich mit CSS auskennt, da es so komplex ist.
Die Verwendung von HTML für ein Dropdownmenü ist eigentlich recht einfach. Es gibt zwei Optionen für Dropdownmenüs: eines, das auf den Mauszeiger reagiert, und eines mit Mehrfachauswahl.
Du kannst auch die Farbe der Dropdown-Links beim Bewegen der Maus ändern.
Das select-Element wird verwendet, um aus einer Reihe von Optionen in einer Liste auswählen zu können. Bei einem Dropdownmenü mit Mehrfachauswahl musst du allerdings das «multiple» — Attribut zum 
Mit der Mehrfachauswahl können deine Benutzer mehrere dieser Optionen auswählen.