Создал меню на css, но проблема в том, что выпадающее меню должно быть не прямо под пунктом меню, на которое навели курсор, а должно занимать всю ширину контейнера под пунктом меню, как на рисунке.
Подскажите, как это правильно реализовать на css?
Верхнее меню смещено вправо, слева ещё может быть логотип, т.е. напротив item1,item2,item3.
и чтобы было адаптивное выпадающее меню, т.е. при уменьшении разрешения выпадающее меню также занимало всю ширину.
и ещё нужны треугольники, как на рисунке при наведении на пункт меню.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
width: 100%;
border: 1px solid gray;
padding: 20px;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.
wrapper:after{
content: '';
display: block;
clear: both;
overflow: hidden;
}
nav{
width: 50%;
float: right;
clear: both;
}
.item{
float: left;
margin-right: 30px;
}
.dropdown{
display: none;
}
.drop:hover + .dropdown{
display: block;
position: absolute;
width: 100%;
background: green;
border: 1px solid gray;
}
</style>
</head>
<body>
<header>
<div>
<nav>
<ul>
<li>
<a href="#">item1</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
<li>
<a href="#">item2</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
<li>
<a href="#">item3</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html> 
Горизонтальное выпадающее меню CSS: специфические особенности, пошаговая инструкция
Меню – это тот элемент, с которым пользователь встречается при входе на сайт и видит его, перемещаясь по страницам.
Главное меню располагается в шапке сайта, а дополнительное – в нижнем блоке страницы. Там содержится полезная или второстепенная информация, которая для удобства часто оформляется в виде меню. Зачастую на всех страницах сайта используется одинаковое оформление навигационного элемента.
Когда какие-то пункты содержат дополнительные разделы, создается несколько уровней. Это работает так: при наведении мыши на одну из секций появляется дополнительный список с подразделами. При разработке необходимо позаботиться, чтобы при просмотре страницы на маленьких экранах появлялось адаптивное меню вместо обычного.
Узнаем как создать список HTML? Очень просто!
Эта статья позволит вам познакомиться ближе с таким объектом, как список HTML. Мы рассмотрим его…
HTML-разметка
Перед тем, как сверстать адаптивное выпадающее меню на CSS, нужно создать скелет. Задается с помощью языка разметки HTML и находится в файле с расширением .html. Начинается с <!DOCTYPE>, затем обозначается начало и конец документа тегами <html> и </html> соответственно.
Внутри документа задается тег head, где указывается мета-информация о сайте:
- заголовок документа;
- краткое описание;
- кодировка;
- файлы со стилями и скриптами.
После закрывающегося тега </head> следует тело документа, оформленное как <body>. Здесь находятся логические блоки сайта, они интерпретируются браузером и выводятся на экран в виде визуальных элементов.
Базовая разметка обычно состоит из тегов ul и li. Это семантически верное оформление, которое связано с тем, что при просмотре в браузерах, которые не поддерживают CSS, анализатор контента правильно опознает этот блок. Хотя использование стандартных div-ов также широко распространено.
Вертикальное меню для сайта в виде аккордеона на jQuery
Как сделать интересное вертикальное меню на своем сайте, которое будет раскрываться при клике на…
Простая разметка меню без скрытых элементов и выпадающего меню на CSS выглядит таким образом:
<ul>
<li><a>Главная</a></li>
<li><a>История</a></li>
<li><a>О нас 3</a></li>
<li><a>Контакты 3</a></li>
</ul>
В теге <a> указываются ссылки на страницы, а во всех остальных – используемые селекторы.
Базовые стили
Следующим шагом создания выпадающего меню на HTML и CSS является создание каскадной таблицы стилей. Они хранятся в файле с расширением .css, где описывается внешний вид документа и различные визуальные эффекты. Здесь задаются цвета, шрифты, расположение блоков и других аспектов внешнего вида веб-страницы.
То, что здесь будет находиться, зависит исключительно от дизайна. Есть несколько основных моментов, которые следует разобрать. Поскольку создается меню, маркеры списка не должны отображаться. Они убираются с помощью атрибута list-style: none. Немаловажной частью является устранение подчеркивания ссылок. Для этого селекторы, которые отвечают за оформления тега <a>, должны содержать text-decoration: none.
Необходимо назначить действия при наведении мыши на кнопки. Для чего используется псевдокласс :hover? Используя его, пользователь видит, как меняется цвет пунктов или появляется выпадающий список меню на HTML CSS. Для скрытия некоторых элементов применяется display: none, а для появления – display: block или display: inline.
CSS :hover. Оригинальные hover-эффекты
CSS hover, CSS active, CSS visited — доступно, эффективно и востребовано для веб-дизайна и всегда…
Горизонтальное размещение через float
После базового оформления пользователь заметит, что полученная структура – это вертикальное меню с выпадающим списком на HTML CSS. Для некоторых сайтов приемлемо расположение вертикального меню, но, как правило, используется горизонтальное.
Теперь нужно разместить все элементы в ряд. В этом случае будет использовано свойство float, отвечающее за обтекание. Сначала оно использовалось исключительно для того, чтобы управлять расположением текста относительно изображения. Таким образом, можно задать левостороннее или правостороннее выравнивание, отменить обтекание текста или назначить наследование значения родителя.
Горизонтальное размещение через inline-block
По умолчанию блоки, которые задаются тегом div, выравниваются по вертикали. Ширина каждого занимает всю страницу, а при создании сестринского элемента он будет следовать вниз, начиная от предыдущего.
Когда нужно скрыть, используется display: none. Это понадобится для появления скрытых частей меню при наведении курсора мыши. Важно отметить, что блок не просто становится прозрачным, – видимые части сайта занимают его место.
Чтобы разместить дивы горизонтально друг за другом, необходимо использовать свойство inline или inline-block. Что касается последнего, его применение имеет больше преимуществ, ведь содержит свойства как строчного элемента, так и блочного.
Свойство display используется для div-ов и тегов li списка ul.
Таким образом, чтобы создать горизонтальное выпадающее меню на HTML CSS в файле стилей в селекторах li или div, указывается атрибут display со значением inline-block.
Создание выпадающих элементов
Выпадающие элементы изначально не видны на странице, они имеют свойство display: none. Позже none меняется на block или inline-block. Это происходит при клике на один из пунктов меню или во время наведения мыши. Для создания этого эффекта и связанных анимационных переходов, используется CSS.
Должно выглядеть примерно так:
#menu ul li {
position:absolute;
display: none;
}
#menu li:hover ul {
display:inline-block;
}
Следует обратить внимание на атрибут position, с помощью которого устанавливается позиционирование элемента. Блок div при заданном значении absolute отображается над другими блоками. А отсчет координат начинается от левого верхнего края родительского элемента. В данном случае родителем считается document. Это нужно изменить и сделать родителем #menu, задать position: relative. Теперь в #menu ul нужно указать координаты left и top, чтобы выпадающий список появлялся прямо под основным пунктом и не перекрывал его.
Если рядом находится несколько абсолютных блоков, надо использовать свойство z-index. При рассмотрении двух дивов с абсолютным позиционированием, когда один находится поверх другого, z-index первого должен иметь значение выше, чем у второго.
Адаптивность
Ни один сайт не может считаться хорошим, если он неправильно отображается на мобильных устройствах и планшетах.
Смысл создания адаптивных страниц в том, чтобы изменить оформление при достижении определенного размера экрана. Для этого используется ключевое слово @media. В значениях указывается тип носителя, максимальный или минимальный размер экрана.
Чтобы работать с этим атрибутом, нужно задать начальную ширину блока на большом экране свойством max-width: 100%. Уменьшая экран, происходят изменения с блоком:
@media (min-width: 768px) {
.container-small {
//меняем ширину пунктов меню, выводим иконку гамбургера
}
Эта иконка меню играет важную роль в создании адаптивного многоуровневого выпадающего горизонтального меню на CSS. Представляет собой три находящихся параллельно друг другу горизонтальные линии. Когда пользователь нажимает на них, появляются скрытые части альтернативного меню.
Использование Bootstrap
С появлением фреймворка Bootstrap верстальщикам стало намного легче создавать адаптивные элементы и строить сайт. Он позволяет прототипировать идеи с помощью готовых компонентов и мощных плагинов.
Для использования базовых возможностей нужно включить скомпилированные стили Bootstrap из CDN в head сайта. Должно выглядеть так:
<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css» integrity=»sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4″ crossorigin=»anonymous»>
Для создания горизонтального меню с выпадающим списком на CSS используется компонент Navbar. Его нужно скопировать с официального сайта. По умолчанию он имеет два режима отображения: десктопный и мобильный.
Теперь осталось добавить оформление, чтобы выглядело так, как того требует дизайн.
Другой способ создания адаптивных элементов – использование Grid системы. Ее отличие от Bootstrap в том, что можно указать любое количество колонок и сделать их разной ширины.
UberMenu
Сегодня разработано огромное количество плагинов, которые освобождают от собственноручного написания кода. Верстальщику необходимо подключить соответствующие файлы, внести изменения в функционал.
UberMenu – это горизонтальное меню с выпадающим списком HTML CSS, разработанное под движок WordPress. Его возможности:
- адаптивность;
- выпадающее меню;
- поддержка сенсора;
- работа из коробки;
- гибкие настройки;
- большой список анимационных переходов;
- наличие фильтров сортировок;
- автоматическая интеграция в любую тему WordPress.
Есть бесплатная и платная версия с полным функционалом стоимостью 19 долларов.
Удобство использования готовых плагинов для создания выпадающее меню на CSS в том, что все браузеры будут одинаково отображать содержимое веб-страницы. Есть одна неприятная особенность – UberMenu не умеет работать с браузером IE6. Но это не страшно, ведь сегодня среда распространения «Интернет Эксплорера» составляет менее 1%.
Max Mega Menu
«Макс Мега Меню» – это отличное решение для создания выпадающего меню на CSS. Оно поддерживает возможность расположения меню в хедере и футере.
С ним легко работать, он поддерживает функцию drag-and-drop. Все, что необходимо сделать для размещения кнопок меню, – мышью перенести соответствующие элементы на выбранное место.
Можно назначить любые способы, чтобы появилось скрытое субменю: навести курсор мыши на элемент или кликнув по нему. Существует много анимационных эффектов: постепенное исчезание, появление, выезжание.
Этот плагин достаточно легкий, файл javascript весит менее 2 килобайт. При создании можно использовать встроенные шрифты, иконки. Если появляются проблемы с использованием, можно ознакомиться с соответствующими мануалами.
Для начала работы достаточно добавить его в список плагинов WP.
JQuery Accordion Menu Widget
Для создания выпадающее меню на CSS можно использовать плагин JQuery Accordion Menu Widget. Он доступен для скачивания из репозитория WordPress или с официального сайта. Работает с последними версиями CMS, совместим с другими плагинами.
С его помощью можно создавать вертикальное меню.
Он поддерживает стандартные функции аналогичных инструментов, но есть особенные дополнения. Например, при развертывании субменю, если за 1 секунду не было совершено никаких действий, оно самостоятельно возвращается к исходному состоянию. Другая интересная функция представляет собой отключение родительских ссылок, когда активны дочерние. Это означает, что при появившемся подменю нет возможности нажать на пункты основного.
При самостоятельном создании меню пользователь встречал ситуацию, когда элементы сразу реагируют даже при случайном наведении мыши или щелчке. Чтобы избежать такого неудобства, встроена задержка hover delay. Другая полезная функция – управление скоростью появления и скрытия подменю.
Заключение
Важно создать выпадающее меню на CSS для простого и удобного взаимодействия между пользователем и интерфейсом веб-страницы. Чтобы решить задачу необходимо грамотно разработать дизайн, сверстать базовые элементы, оформить стили, доработать анимационные эффекты.
Можно воспользоваться готовыми вариантами, если не предусмотрены какие-то уникальные дизайнерские решения. Плагины легко подключаются к странице, их очень просто править в соответствии с требованиями.
Если есть смысл разрабатывать меню с нуля, конечно, это необходимо делать самостоятельно. При работе с фреймворками используются готовые компоненты, они сразу адаптивны. Отсутствие необходимости подстройки верстки под маленькие экраны сильно экономит время.
html — элементы выпадающего меню CSS располагаются горизонтально
спросил
Изменено 7 лет, 10 месяцев назад
Просмотрено 4к раз
Я искал эту проблему в stackoverflow, но ничего не нашел.
Я работал над выпадающим меню в CSS. Когда вы наводите указатель мыши на раскрывающееся меню, элементы раскрывающегося списка отображаются горизонтально, а не вертикально.
HTML
CSS
/*заголовок*/
# заголовок {
цвет фона: #5c931ф;
}
#заголовок ул {
тип стиля списка: нет;
}
#заголовок ли {
ширина: 100 пикселей;
граница: 1px сплошной черный;
дисплей: встроенный;
цвет фона: #000;
цвет: #808080;
положение: родственник;
выравнивание текста: по центру;
}
#заголовок li:hover {
цвет синий;
}
/*выпадающее меню*/
.выпадающий ул{
дисплей: нет;
}
.dropdown: наведите указатель {
дисплей: блок;
положение: абсолютное;
}
Как сделать элементы раскрывающегося списка вертикальными?
- HTML
- CSS
- раскрывающееся меню
Вы активно объявили li для отображения встроенных здесь:
#header li {
. ..
дисплей: встроенный;
...
}
Встроенное означает, по сути, «не принудительно переходить на следующую строку». Уберите это, и он должен вернуться к поведению блока .
Редактировать: раньше я не замечал вложенных li .
Добавить:
#header .dropdown li {
дисплей: блок;
}
В качестве альтернативы можно выбрать только непосредственного дочернего элемента li со встроенным (обратите внимание, что это повлияет на все стили, примененные к li :
#header > ul > li {
ширина: 100 пикселей;
граница: 1px сплошной черный;
дисплей: встроенный;
цвет фона: #000;
цвет: #808080;
положение: родственник;
выравнивание текста: по центру;
}
2
Добавьте/измените следующий код:
.dropdown ul li{
дисплей: блок;
}
.dropdown: наведите указатель {
дисплей: встроенный;
положение: абсолютное;
сверху: 0;
слева: 0;
плыть налево;
}
Ссылка на JS Fiddle:
http://jsfiddle.
net/kr2jw577/
Однако требуется некоторая настройка.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Горизонтальные выпадающие меню CSS — сброс CSS
На прошлой неделе читательница CSS-новичков Андреа Плухар написала с интересной проблемой: она хотела использовать выпадающие меню CSS, подобные тем, которые мы показывали на прошлой неделе, на веб-сайте, который она создавала, но дизайн требовал, чтобы подменю располагалось горизонтально, а не вертикально.
Она прислала мне макет того, что ей нужно (отрывок выше), и поинтересовалась, есть ли способ добиться этого эффекта с помощью CSS. оказывается там — это CSS-риффический способ сделать это, и в духе максимизации выгоды я подумал, что учебник будет в порядке.
Используемый XHTML идентичен используемому в наших обычных выпадающих меню: вложенный неупорядоченный список, где вложенные списки становятся подменю. Выглядит это примерно так:
Далее мы перейдем к CSS. Я начал с того, что переместил панель навигации в правый верхний угол, как того требовал дизайн, удалив стиль списка и выровняв элементы влево, чтобы они выстроились в ряд:
#navbar {
положение: абсолютное;
сверху: 0;
справа: 0;
маржа: 0;
заполнение: 0;}
#навбар ли {
стиль списка: нет;
плыть налево; } Затем я стилизовал основные теги привязки, чтобы они больше походили на навигацию, которую искала Андреа.
#navbar li a {
дисплей: блок;
отступ: 3px 8px;
преобразование текста: верхний регистр;
текстовое оформление: нет;
цвет: #999;
вес шрифта: полужирный; }
#navbar li a:hover {
цвет: #000; } Я добавил немного отступа к ссылке и использовал свойство text-transform, чтобы сделать все в верхнем регистре, как того требует макет. Таким образом, исходный XHTML может быть строчным или верблюжьим (первые буквы заглавными)… что будет немного легче читать в нестилизованном документе.
Затем мы скрываем вложенные списки по умолчанию, а затем стилизуем их при наведении курсора на содержащий элемент списка:
#navbar li ul {
дисплей: нет; }
#navbar li:hover ul, #navbar li.hover ul {
положение: абсолютное;
дисплей: встроенный;
слева: 0;
ширина: 100%;
маржа: 0;
заполнение: 0; } Приведенный выше код — это та часть кода, которая действительно заставляет большую часть этой магии работать, поэтому я объясню важные части более подробно.
Затем мы абсолютно позиционируем наши вложенные списки и используем свойство «left», чтобы переместить список в крайнее левое положение. Это не перемещает список в крайнюю левую часть экрана, а вместо этого перемещает крайнюю левую сторону его родительского позиционированного элемента , который в данном случае оказывается основным неупорядоченным списком, который мы расположили в самом начале. . Таким образом, этот трюк основан на том, что весь список каким-то образом позиционируется, даже если он просто относительно позиционирован и оставлен на месте.
Правило display: inline немного сложнее.
Настолько, что я даже не совсем понимаю, что он делает. Что я знаю , так это то, что без этого правила элементы списка в подменю просто не отображаются ни в одном из основных браузеров. Я думаю, что это как-то связано с тем фактом, что содержащие элементы являются плавающими (к чему мы немного вернемся), но я не могу этого доказать. Если у кого-то есть лучшее представление о технической стороне, пожалуйста, дайте мне знать в комментариях.
Наконец, правило ширины: 100% очень важно. Это предотвращает свертывание неупорядоченного списка до меньшего размера в некоторых браузерах. В частности, без указания этой ширины вложенный список иногда сжимается до размера «содержащего» его элемента списка (даже если он абсолютно позиционирован и, следовательно, технически больше не содержится). Обратите внимание, что старые версии Opera плохо справляются со 100%-ной шириной… если вы хотите, чтобы она работала в более старых версиях, вам нужно указать ширину в соответствии с определенным размером (например, в пикселях).
Однако самая последняя версия Opera (9.27) справляется с этим нормально, и у меня сложилось впечатление, что пользователи Opera чаще обновляются, чем, скажем, пользователи IE.
Наконец, мы просто перемещаем оставшиеся элементы (чтобы расположить их в красивом горизонтальном ряду) и окрашиваем их:
#navbar li:hover li, #navbar li.hover li {
плыть налево; }
#navbar li:hover li a, #navbar li.hover li a {
цвет: #000; }
#navbar li li a:hover {
цвет: #357; } Вот и все! Вы можете увидеть рабочий пример здесь. Это было протестировано и отлично работает в IE 6+, Firefox 2, Safari (Mac и ПК) и Opera 9..27.
Единственная часть макета, которую мне не удалось воспроизвести, — это способ выделить элемент основного меню, когда используется подменю: поскольку вложенный список абсолютно позиционирован, браузер, похоже, их не учитывает. согласованный набор больше (за исключением, кажется, с точки зрения ширины по умолчанию). Если у кого-то есть решение этого бита, я хотел бы услышать об этом!
Спасибо Андреа за вдохновение, надеюсь, полезный урок! И если у вас когда-нибудь возникнет вопрос, связанный с CSS, который, по вашему мнению, мог бы стать хорошей статьей здесь, не стесняйтесь, присылайте мне сообщение через мою контактную страницу или в Twitter.