Создал меню на 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 лет, 2 месяца назад
Просмотрено 5к раз
Я пытаюсь использовать горизонтальный список в веб-части SharePoint. Я просматривал этот код снова и снова и не могу найти проблему.
По какой-то причине список по-прежнему отображается вертикально. Есть идеи?
CSS
ул{
заполнение: 0;
стиль списка: нет;
ширина:100%;
выравнивание текста: по центру;
высота: 100 пикселей;
фон: #ffffff центр без повторов;
}
уль ли {
дисплей: встроенный блок;
плыть налево; отступ: 25px 25px 0 125px;
маржа: 0;
положение: родственник;
размер шрифта: 25px; вес шрифта: полужирный; цвет: #FFFFFF;
выравнивание текста: по центру;
}
уль ли а {
дисплей: блок;
цвет: #FFF; отступ: 10px 5px;
текстовое оформление: нет;
}
уль ли а:наведите{
}
ул ли ул. выпадающий список {
минимальная ширина: 150 пикселей; /* Устанавливаем ширину раскрывающегося списка */
ширина: 100%;
дисплей: нет;
положение: абсолютное;
z-индекс: 999;
слева: 0;
плыть налево;
}
ul li:наведите ul.dropdown{
дисплей: встроенный; /* Показать раскрывающийся список */
фон: #FFFFFF;
слева: 0;
ширина:100%;
маржа: 0;
заполнение: 0;
}
ul li ul.
dropdown li {
дисплей: встроенный;
плыть налево;
фон: #FFFFFF;
}
Список HTML (все еще в процессе; просто тестирую, прежде чем исправить весь текст/ссылки)
Я не занимался этим годами, но мой босс хочет, чтобы я попробовал и уладил эту работу. -_-
- html
- css
Здесь у вас есть раскрывающийся список
ul li ul.dropdown {
ширина: 100%;
}
, который имеет ширину 100% по сравнению с
ul li {
положение: родственник;
}
, который здесь виноват.
Удаление «Position:relative» выше устраняет вашу проблему.
Ваш ul.dropdown плавает горизонтально, но его ширина заставляет элементы располагаться вертикально. Чтобы проверить это, вы можете установить его min-width примерно до 900px: DEMO
Поскольку ваш ul.dropdown является дочерним элементом своего родителя li , для которого установлено значение display: inline-block; положение: родственник;
width: 100% . Чтобы решить эту проблему, вы можете удалить position: относительный ваших элементов li , чтобы удалить эту границу. Теперь его ширина : 100% относится к вашему телу .
РАБОЧАЯ ДЕМО
1
Попробуйте display:block в UL.dropdown и display:inline-block в UL. .
1
просто удалить (положение: относительное;) из списка «ul li» появится горизонтально. код будет выглядеть так:
ul li{
дисплей: встроенный блок;
плыть налево;
отступ: 25px 25px 0 125px;
маржа: 0;
размер шрифта: 25px;
вес шрифта: полужирный; цвет: #FFFFFF;
выравнивание текста: по центру;
}
просто замените этот код своим. Спасибо
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — горизонтальное выпадающее меню Bootstrap
спросил
Изменено 3 года, 8 месяцев назад
Просмотрено 49 тысяч раз
Взгляните на эту картинку:
Я хочу, чтобы элементы выпадающего меню располагались стопкой слева направо (по горизонтали).
Кажется, я не могу заставить это работать, пытался использовать класс «list-inline», упомянутый в
официальная документация, которая только усугубляет ситуацию.
Вот HTML:
Я использую Bootstrap 3
- html
- css
- twitter-bootstrap
Вложите эти li в список ul и класс как встроенный список как этот
Проверьте этот снимок экрана
Вот JSFiddle
Updates1:
Как я упоминал в комментариях, класс : выпадающее меню имеет минимальную ширину как 160px .
Следовательно, он фиксируется по ширине. Попробуйте переопределить его.
Обновления2:
Как я упоминал в комментариях, у начальной загрузки есть стиль по умолчанию, который можно переопределить, например
.dropdown-menu{
минимальная ширина: 200 пикселей;
}
В случае, если вы чувствуете, что это влияет на другие элементы, переопределите с помощью селектора id .
#Numberlist.dropdown-menu{
минимальная ширина: 200 пикселей;
}
Найдите разницу в этом JSFiddle
7
выпадающее меню ограничено шириной контейнера li.
просто добавьте:
.dropdown-menu {
поле справа:-1000px;
}
.выпадающее меню > ли {
отображение: встроенный блок;
}
2
Должна быть возможна полная ширина — 100% ширина меню
.navbar-nav {position: relative; }
li.
dropdown {position: static;}
.dropdown-menu {width: 100%;}
.dropdown-menu > li {display: inline- блок;}
или около того… основная идея состоит в том, чтобы расположить выпадающее меню относительно меню, а не ли… как справедливо указывает migli
«раскрывающееся меню ограничено шириной контейнера li.»
0
Комбинация
-
<ул>
с
.выпадающее меню {
поле справа:-1000px;
}
и некоторые дополнительные стили внешнего вида сработали для меня. Спасибо!
2
Чтобы добавить к решению @dj.cowan, я удалил свойство позиции .navbar-nav, используя вместо этого позицию .navbar по умолчанию, которая затем сделала раскрывающийся список шириной 100% страницы. Затем я добавил float:right к li в очередь под navbar-right.
