Горизонтально выпадающее меню css
Создать простое горизантальное меню на CSS не сложно, а довольно просто, нам не потребуется даже использовать JavaScript. Делается это очень просто, поэтому давайте сразу же перейдём к коду.
HTML
CSS
Разметка готова, теперь добавим стили-CSS для неё, не забываем указывать нужное id.
#menu { padding: 0; margin: 0; font-size: 100%; font-family: Georgia; } #menu li { list-style: none; float: left; height: 33px; padding: 0; margin: 0; width: 150px; text-align: center; background: #171717; position: relative; padding-top: 12px; } #menu li ul { list-style: none; padding: 0; margin: 0; width: 150px; display: none; position: absolute; left: 0; top: 45px; } #menu li ul li { float: none; height: 33px; margin: 0; width: 150px; text-align: center; background: #7F7F7F; } #menu li a { display: block; width: 150px; height: 33px; color: #fff; text-decoration: none; } #menu li:hover ul, #menu li:hover ul { display: block; } #menu li:hover, #menu li:hover { background: #424242; }
Просто вставьте этот код и меню будет работать.
Демонстрация:
Вот так просто и создаётся меню, достаточно просто скопировать код и вы увидите такой результат.
Как сделать в css выпадающее меню? Пошаговая инструкция
От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.
План урока и разметка нашего меню
В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.
Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.
Тут есть важный момент, который заключается в том, что вам, возможно, не нужно каждый пункт делать выпадающим, а лишь некоторые. Без проблем, тогда в пунктах без выпадения просто не создаем вложенных списков.
Собственно, вот она, вся разметка:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее<nav id = «nav»> <ul> <li><a href = «#»>Пункт 1</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 2</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 3</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> </ul> </nav>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <nav id = «nav»> <ul> <li><a href = «#»>Пункт 1</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 2</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 3</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li></ul> </li> <li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> </ul> </nav> |
Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.
Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.
Отлично, разметка у нас готова, можно посмотреть на результат:
Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.
Пишем css-стили
Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.
*{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; } |
Далее я пропишу общие стили для самого меню, а также для списков, чтобы убрать у них маркеры.
#nav{ height: 70px; } #nav ul{ list-style: none; }
#nav{ height: 70px; } #nav ul{ list-style: none; } |
Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:
#nav > ul > li{ float: left; width: 180px; position: relative; }
#nav > ul > li{ float: left; width: 180px; position: relative; } |
Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.
Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.
В любом случае, вышеприведенный код, я надеюсь, вы понимаете. Он заставляет пункты главного списка прижиматься к левому краю, так что все они встают в одну строку, хотя и являются блочными элементами. Также я задал им явную ширину и относительное позиционирование.
Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.
Тем временем, вот что у нас уже получилось:
По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.
Далее мы с вами преобразим внешний вид нашего меню. Вот такие стили для этого я прописал ссылкам:
#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }
#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; } |
Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.
Все эти параметры не обязательно прописывать так, как это сделал я. Цвета вы можете выбрать произвольно, рамку сделать другую или вообще не использовать, отступы можно уменьшать или увеличивать.
Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:
Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.
#nav li .second{ display: none; position: absolute; top: 100%; }
#nav li .second{ display: none; position: absolute; top: 100%; } |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВо-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.
Теперь мы видим на веб-странице только основное меню, что нам и нужно.
Реализуем выпадение
Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:
#nav li:hover .second{ display: block; }
#nav li:hover .second{ display: block; } |
Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.
Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:
#nav li li{ width: 180px; }
#nav li li{ width: 180px; } |
Все, проблема решена:
Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.
Переделываем меню в вертикальное
Ну хорошо, с горизонтальной навигацией мы с вами полностью разобрались, но ведь помимо нее на сайтах очень часто встречается и вертикальная и она тоже может быть выпадающей. На самом деле переделать меню с горизонтального на вертикальное очень легко, нам придется изменить буквально пару строк кода.
Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?
Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:
#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }
#nav li .second{ display: none; position: absolute; left: 100%; top: 0; } |
То есть необходимо прописать две координаты вместо одной. Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке пункты вложенных меню должны отображаться под основными пунктами. В случае с вертикальным меню это не подходит – пункты должны отображаться сбоку.
Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.
Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.
Горизонтальное меню с несколькими уровнями
Используя примерно такой же подход вы можете создать больше уровней меню, если это сильно необходимо. Например, давайте создадим для четвертого пункта главного меню список, который будет вложен в один из подпунктов.
<li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a> <ul class = «third»> <li><a href = «#»>Подпункт подпункта</a></li> <li><a href = «#»>Подпункт подпункта</a></li> </ul> </li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li>
<li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a> <ul class = «third»> <li><a href = «#»>Подпункт подпункта</a></li> <li><a href = «#»>Подпункт подпункта</a></li> </ul> </li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> |
Опять же, разметка превращается в громоздкую и непонятную, но если вы будете внимательным, то увидите, в чем здесь вся суть. Далее работаем с css:
#nav li li .third{ display: none; position: absolute; left: 100%; top: 0; } #nav li li:hover .third{ display: block; }
#nav li li .third{ display: none; position: absolute; left: 100%; top: 0; } #nav li li:hover .third{ display: block; } |
Соответственно, убираем вложенное меню третьего уровня с экрана, делаем ему абсолютное позиционирование и прописываем такие координаты, как в случае с вертикальным меню. То есть данный список будет отображаться при наведении на первый подпункт четвертого пункта и будет отображаться сбоку.
Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?
Что ж, если вам нужно меню трех уровней, то придется убирать у second абсолютное позиционирование, а у главных пунктов убирать относительное. Вся фишка в том, что в случае с горизонтальным меню это никак не повлияет на отображение навигации – подпункты по-прежнему будут располагаться под главным пунктом при наведении на него.
Зато после этих изменений вы сможете добавить меню для каждого подпункта. Опять же, необязательно оно должно отображаться сбоку, это всего лишь моя идея, вы можете отображать его под подпунктом при наведении на него. Тогда вообще никакого позиционирования не понадобится!
В общем, итог таков:
При наведении на пункт 4 появляется первое выпадающее меню, при наведении на первый подпункт появляется отдельное меню для него, которое расположено сбоку. У других подпунктов такое меню не отображается, так как мы не создавали его в html-разметке.
Я думаю, вам понятно общая концепция. Если вы смогли разобраться, то уже самостоятельно сможете создать нужное вам выпадающее меню и самостоятельно решить проблемы, если это возможно в рамках css.
Итог
В общем, вам главное понять, как правильно позиционировать вложенное меню, а также как непосредственно реализовывается выпадение. Надеюсь, из этой статьи вы это поняли и теперь самостоятельно на чистом css сможете делать такую навигацию. Мы с вами узнали, как сделать выпадающее меню.
Много других очень интересных возможностей css вы можете узнать в нашем премиум-курсе по новым фишкам css3. Там вы научитесь делать градиенты, работать с новыми селекторами, создавать тени и т.д. Если вам нравится css, то точно понравится эта серия уроков. Ну а я на этом прощаюсь с вами.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьГоризонтальное выпадающее меню HTML + CSS
Это простое меню с несколькими уровнями, которое полностью создано на чистом CSS, где подойдет под многие тематические сайты. Идея состоит в том, чтобы оживить каждый пункт меню после изменения уровня. Анимация начинается с щелчка элемента и задержки распространяются через категорию, что можно присвоить каждому запросу. Простая и понятная анимация следуют той же логике для входящих элементов нового уровня многоуровневой навигацийВ качестве дополнительных элементов у нас есть навигационная панель и запросы, виде кнопок, что стильно вписаны под палитру цвета. Более глубокие уровни ссылаются на атрибут данных, где можно добавить медиа запросов для мобильной версии меню с переключением меню, что по умолчанию не вписаны, где сам веб мастер уже после установки может настроить на мобильные гаджеты, чтоб с них также корректно смотрелось и можно было работать с навигацией.
Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях:
Анимированные меню дает разработчикам хорошее сочетание традиционного стиля и макета, а также быстрые и отзывчивые эффекты анимации, чтобы сделать навигацию более увлекательной для пользователей. В дизайне анимированные ленты выпадают за каждой вкладкой меню при наведении мыши. Дополнительные вкладки и подменю полностью соответствуют дизайнерам.
После того, как мы применили CSS, у нас должно получиться что-то вроде этого:
Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню.
В этом пособии по навигации, вы узнаете о шагах по созданию чистого выпадающего меню, что создано при помощи стилистике CSS. В основном мы будем использовать свойства CSS2, где будет дополнительный небольшой трюк.
И если все сделано правильно, когда мы наводим верх над пунктом меню, то должны увидеть раскрывающийся список с тремя другими добавленными нами элементами.
Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию.
И вот как должен выглядеть конечный результат:
Приступаем к установке:
HTML
Чтобы добавить раскрывающийся список к одному элементу, здесь прописываем ul внутри li, где мы хотим вывести его.
Код
<nav>
<ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»http://zornet.ru»>Zornet.Ru</a>
<ul>
<li><a href=»#»>Стили CSS</a></li>
<li><a href=»#»>Скрипты сайта</a></li>
<li><a href=»#»>Шаблоны ресурса</a>
</li>
</ul>
</li>
<li><a href=»#»>Стилистика CSS</a></li>
<li><a href=»#»>Раскрутка SEO</a></li>
<li><a href=»#»>Дизайн</a></li>
<li><a href=»#»>Связь</a></li>
</ul>
</nav>
Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки.
Осталось прописать стиль CSS, где все элементы по умолчанию все скрыты, где их появление будет, как только тогда, когда у нас есть над родительским элементом.
Поэтому добавьте следующее после вышеуказанного CSS:
Код
nav {margin: 0px 0;
background-color: #c14018;
width: 100%;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px 0px 0 0;
display: inline-block;
background-color: #c1411a;
}
nav a {
display: block;
padding: 0 17px;
color: #f5eeee;
font-size: 19px;
line-height: 59.9px;
text-decoration: none;
}
nav a:hover {
background-color: #69240e;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
min-width:168px;
display:list-item;
position: relative;
}
nav ul ul ul {
position: absolute;
top:0;
left:100%;
}
li > a:after { content: ‘ +’; }
li > a:only-child:after { content: »; }
Вы можете еще раз анонсировать этот процесс столько раз, сколько хотите, чтобы добавить дополнительные привязки, что идет на выпадающее элементы списков. Кроме того, вам не нужно добавлять его крайнему элементу в раскрывающемся списке.
Многие используют jQuery для достижения этого эффекта раскрывающееся списка, где аналогично используются совершенно другие методы CSS стилей. Вы предпочитаете создавать свои выпадающие списки, что помощью CSS или jQuery.
Позвольте мне знать в комментариях ниже.
Демонстрация
горизонтальное выпадающее меню с горизонтальным подменю
отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ).
Было очень сложно редактировать css и html, потому что я просто скопировал и вставил AND, смешал два разных источника css из cssdeck.com, чтобы создать одно навигационное меню.
Поэтому я решил начать с нуля, чтобы сделать правильное выпадающее меню, которое выглядит и ведет себя точно так же, как то, что я сделал раньше.
Но….. Я снова застрял с подменю.
На этот раз я хочу сделать подменю горизонтальным, которое затем будет иметь другую ширину от навигационного меню. Я использовал white-space: nowrap, чтобы сделать подменю горизонтальным, но теперь подменю исчезает, как только я перемещаю мышь близко к следующему навигационному меню.
Кроме того, я не могу заставить навигационное меню оставаться на месте, когда появляется подменю.
Я все еще работаю над этим, поэтому пример может выглядеть очень неорганизованным. Сожалеть об этом.
помощь… пожалуйста..?
html cssПоделиться Источник Frances Park 26 февраля 2015 в 13:39
2 ответа
1
Поскольку подменю заданы как display: block
, элементы на странице обтекают их, когда они появляются. Чтобы исправить это поведение, вам нужно добавить position: absolute
в подменю. Если элемент расположен абсолютно, другие элементы на странице будут игнорировать его, а не обтекать его. Подробнее о позиционировании и о том, как оно влияет на поток страниц, читайте здесь .
Подменю исчезают, потому что вы применили margin
из 10px
к оболочкам подменю. Удалите это поле, и ваше подменю останется на месте, как и ожидалось.
Я также заметил, что вы добавили white-space: nowrap
в подменю «About» ul
, но не в другое подменю ul
с. Вот JSFiddle с примененными исправлениями .
В более широком смысле, ваш HTML/CSS остро нуждается в некотором TLC:
- Обертки
div
вокруг вашихul
s являются избыточными. Просто используйте самиul
s. - Использование таких классов, как
li_first
иli_last
, не нужно, потому что мы можем выбрать первых/последних детей с псевдоклассами:first-child
и:last-child
. - Используйте универсальные классы вместо IDs, например
.submenu
вместо#subAbout
,#subServ
и т. Д.
Применение вышеприведенных идей устранит любое дублирование или ненужную специфику в вашем коде, к чему вы должны стремиться. Ваш CSS будет составлять часть длины, гораздо больше readable/maintainable/debuggable, и вы не столкнетесь с такими проблемами, как забывание добавить свойство white-space
, упомянутое выше.
Поделиться Chloe Reimer 26 февраля 2015 в 15:05
0
Вот способ сделать это:
https://jsfiddle.net/Team_Exitium/34ueyguh/11/
вот живой пример:
https://jsfiddle.net/Team_Exitium/34ueyguh/11/embedded/result/
HTML:
<body>
<nav>
<ul>
<li><a href="">Home</a>
<ul>
<li><a>sdfsadfasdf</a>
</li>
<li><a>sjhfasdhljfdha</a>
</li>
</ul>
</li>
<li><a href="">About</a>
<ul>
<li><a>sdfsadfasdf</a>
</li>
<li><a>sjhfasdhljfdha</a>
</li>
</ul>
</li>
<li><a href="">Service</a>
<ul>
<li><a>sdfsadfasdf</a>
</li>
<li><a>sjhfasdhljfdha</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
CSS:
body {margin:0;}
nav {width: 100%;height: 40px;}
#top-ul {height: 25px; margin:0;}
li {
float:left;
padding-right:55px;
list-style-type:none;
}
a {
font-family:"Unica One", "Noto Reg", sans-serif;
font-size: 1.5em;
color: #393939;
text-decoration:none;
}
.sub {
position:absolute;
display:none;
background-color: #c6342e;
top: 35px;
padding-left: 5px;
font-family:"Noto Lgt", sans-serif;
font-size: 12pt;
border-radius:8px;
}
.sub a {
color: #fff;
}
.sub a:hover {
background-color: #d46762;
}
.sub li {
padding-right: 25px;
}
.main {margin-top:5px; height:35px;}
.main:hover > ul {
display:block;
}
Поделиться jonas kjellerup 26 февраля 2015 в 16:53
- как сделать горизонтальное выпадающее меню со многими иерархиями /sub-sub?
как сделать выпадающее горизонтальное меню, как на веб-странице parkour generation , но с подменю(когда я навожу курсор на подменю, появляется подменю с горизонтальным меню). в park our, как вы можете видеть в classes -> outdoor, есть подменю, но меню находится в вертикальном положении. то, что…
- Горизонтальное Выпадающее Меню Hover
Я устал строить горизонтальное выпадающее меню из этого tuts и демо Я хочу, чтобы меню выглядело так : Я хочу, чтобы подменю появилось в правом Родительском меню, http://alistapart.com/article/horizdropdowns#snippet4 Следующий шаг-это подменю. Мы хотим, чтобы каждое подменю появлялось справа от…
Похожие вопросы:
Горизонтальное подменю вертикальное меню с помощью Bootstrap
Есть ли способ создать горизонтальное подменю для вертикальной структуры меню с помощью bootstrap я не видел ни одного подменю с вертикальной ориентацией главного меню. Примерная структура структуры…
горизонтальное меню с горизонтальным подменю
Я пытаюсь сделать горизонтальное меню с горизонтальным подменю. Я пробовал что-то , но это не сработало : приведенный выше код должен был отображать горизонтальное главное меню, при наведении…
CSS выпадающее меню с горизонтальным подменю
У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…
ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное
У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии…
Asp.Net Горизонтальное Подменю
Как создать asp:Menu, который имеет горизонтальное подменю, а не вертикальное, сохраняя при этом верхнее меню горизонтальным?
как сделать горизонтальное выпадающее меню со многими иерархиями /sub-sub?
как сделать выпадающее горизонтальное меню, как на веб-странице parkour generation , но с подменю(когда я навожу курсор на подменю, появляется подменю с горизонтальным меню). в park our, как вы…
Горизонтальное Выпадающее Меню Hover
Я устал строить горизонтальное выпадающее меню из этого tuts и демо Я хочу, чтобы меню выглядело так : Я хочу, чтобы подменю появилось в правом Родительском меню,…
Горизонтальное меню с вертикальным подменю
Мне нужно горизонтальное меню с вертикальными подменю , которые взяты из базы данных сервера SQl, мне нужно вертикальное подменю с полосами прокрутки, может кто-нибудь дать мне ссылку на такое меню.
горизонтальное выпадающее меню
Я хочу создать горизонтальное выпадающее меню, например: Home Menu 1 Menu 2 Menu 3 Menu 4 Sub Menu 11 Sub Menu 12 Sub Menu 13ssssssssssssssssssssssssssssssssssssss Sub Menu 14 И каждое подменю будет…
Как создать вертикальное главное меню с горизонтальным подменю
Как создать вертикальное главное меню с горизонтальным подменю. Пункт 1 Пункт 2_ Item2_1 Item2_2 Item2_3 Пункт 3 Пункт 4 Таким образом, как я могу создать такое меню?
Выпадающее меню на CSS . Горизонтальное выпадающее меню
Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>.
Итак приступим к написанию основной структуры сайта
<!DOCTYPE html> <html> <head> <title> Выпадающее меню на CSS </title> </head> <body> </body>
После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>
<nav> <ul> <li><a href='#'>Главная</a></li> <li><a href='#'>HTML</a></li> <li><a href='#'>CSS</a></li> <li><a href='#'>PHP</a></li> <li><a href='#'>JavaScript</a></li> </ul> </nav>
Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню.
nav { margin: 50px 0; bacground-color: #E94f56; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { margin: 0px -7px 0 0; display: inline-block; background-color: #E94f56; } nav a { display: block; padding: 0 10px; color: #ffff; font-size: 23px; line-height: 60px; text-decoration: none; } nav a:hover { backgroung-color: #000001; }
Проверим то что у нас получилось.
Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке. Создадим структуру с вложенным меню.
<nav> <ul> <li><a href='#'>Главная</a></li> <li><a href='#'>HTML</a> <ul> <li><a href='#'>История HTML</a></li> <li><a href='#'>Структура HTML</a></li> <li><a href='#'>HTML5</a></li> </ul> </li> <li><a href='#'>CSS</a></li> <li><a href='#'>PHP</a></li> <li><a href='#'>JavaScript</a></li> </ul> </nav>
Теперь нужно добавить стили к вложенному меню. Для создания выпадающего меню необходимо задать вложенному списку абсолютное позиционирование и смещение от основного меню.
nav ul ul { display: none; position: absolute; top100%; } nav ul li:hover>ul { display: inherit; } nav ul ul li { min-width: 180px; float: none; display:list-item; position: relative; }
Должно получиться следующее
Добавим для пункта меню с вложенным подменю соответствующий индикатор.
li> a:after {content: '+'} li> a:only-child:after {content:'';}
В итоге у нас получилось следующее
Горизонтальное выпадающее меню в HTML 5 и CSS 3 | Всё о IT и не только
Несколько лет назад создание выпадающего меню на сайте было кошмаром для веб-мастеров. Без JavaScript-кода, который обычно состоял из нескольких сотен строк, никто бы даже не попытался реализовать такое решение. Сегодня, в эпоху CSS 3, создание выпадающего меню является чистым удовольствием и, что самое главное, нам не нужно использовать никакие скрипты, запущенные на стороне клиента.
Мы начинаем создавать наше меню, конечно же, с создания скелета в HTML 5:
Сам код:
/* задаем цвет фона для контейнера nav. */
nav {
margin: 100px 0;
background-color: E64A19;
}
/* убираем отступы и поля, а также list-style для «ul»,
* и добавляем «position:relative» */
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* применяем inline-block позиционирование к элементам навигации */
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: E64A19;
}
/* стилизуем ссылки */
nav a {
display:block;
padding:0 10px;
color:FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* изменяем цвет фона при наведении курсора */
nav a:hover {
background-color: 000000;
}
После применения стилей у нас должно получиться нечто вроде этого:
Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:
<nav>
<ul>
<li><a href=»»>Home</a></li>
<li><a href=»»>WordPress</a>
<!— первый уровень выпадающего списка —>
<ul>
<li><a href=»»>Themes</a></li>
<li><a href=»»>Plugins</a></li>
<li><a href=»»>Tutorials</a></li>
</ul>
</li>
<li><a href=»»>Graphic Design</a></li>
<li><a href=»»>Inspiration</a></li>
<li><a href=»»>Contact</a></li>
<li><a href=»»>About</a></li>
</ul>
</nav>
Выпадающее горизонтальное меню на css
Для того, чтобы использовать выпадающее горизонтальное меню, достаточно скопировать его html-код в нужное место на вашей странице, и добавить css в ваш файл стилей.
<ul>
<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=»#»>Подменю 1</a></li>
<li><a href=»#»>Подменю 2</a></li>
<li><a href=»#»>Подменю 3</a></li>
</ul>
</li>
<li><a href=»#»>Меню 3</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=»#»>Меню 4</a></li>
<li><a href=»#»>Меню 5</a></li>
</ul>
Работоспособность данной конструкции проверена в трех основных браузерах: Mozilla Firefox, Opera, и Internet Explorer.
Этот CSS проходит проверку по стандарту CSS3 !
* {
margin:0;
padding:0;
}
#nav {
font:13px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:120px;
margin-top:-10000px;
}
#nav li a {
width:120px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-119px;
margin-top:10000px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}
Скачать выпадающее горизонтальное меню
Иногда работающие в IE и Firefox’е стили, неработают или работают не корректно в Oper’е и наоборот, перед тем как применить «рецепт» проверяйте его работу в разных браузерах.
html — Использование CSS для отображения раскрывающегося меню по горизонтали
Я пытаюсь использовать горизонтальный список в веб-части в SharePoint. Я просматривал этот код снова и снова и не мог найти проблему. По какой-то причине список все еще отображается вертикально. Любые идеи?
CSS
ul {
отступ: 0;
стиль списка: нет;
ширина: 100%;
выравнивание текста: центр;
высота: 100 пикселей;
фон: #ffffff центр без повтора;
}
ul li {
дисплей: встроенный блок;
плыть налево; отступ: 25px 25px 0 125px;
маржа: 0;
положение: относительное;
размер шрифта: 25 пикселей; font-weight: жирный; цвет: #FFFFFF;
выравнивание текста: центр;
}
ul li a {
дисплей: блок;
цвет: #FFF; отступ: 10 пикселей 5 пикселей;
текстовое оформление: нет;
}
ul li a: hover {
}
ul li ul.падать{
минимальная ширина: 150 пикселей; / * Устанавливаем ширину раскрывающегося списка * /
ширина: 100%;
дисплей: нет;
позиция: абсолютная;
z-индекс: 999;
слева: 0;
плыть налево;
}
ul li: hover ul.dropdown {
дисплей: встроенный; / * Показать раскрывающийся список * /
фон: #FFFFFF;
слева: 0;
ширина: 100%;
маржа: 0;
отступ: 0;
}
ul li ul.dropdown li {
дисплей: встроенный;
плыть налево;
фон: #FFFFFF;
}
HTML List (все еще в процессе; просто тестирование, прежде чем я исправлю весь текст / ссылки)
Я не занимался этим уже много лет, но мой босс хочет, чтобы я попробовал это сделать.-_-
CSS горизонтальное меню с выпадающими списками
Ранее на этой неделе я искал простое руководство по горизонтальному выпадающему меню только для css, предназначенное для начинающих css. И я не смог его найти, поэтому вот как создать это меню….
Я сделаю это в два этапа:
Создание простого горизонтального меню — без раскрывающегося списка
Прежде чем мы перейдем к раскрывающимся спискам, давайте рассмотрим бит горизонтального меню. Начнем с разметки html, которая представляет собой стандартный неупорядоченный список.У нас будет четыре пункта меню:
Ничего особенного. Теперь давайте посмотрим на css:
ul # Horiznav { маржа: 0; отступ: 0; тип-стиль-список: нет; высота: 32 пикс. } #horiznav li { плыть налево; ширина: 150 пикселей } #horiznav li a { дисплей: блок; ширина: 150 пикселей; высота строки: 30 пикселей; выравнивание текста: центр; цвет белый; текстовое оформление: нет; цвет фона: # EA9531; граница: сплошной белый 1px } #horiznav li a: hover { цвет: # 333333 }
См. Комментарии в CSS для объяснения.Ключевым моментом, который делает меню горизонтальным, является плавающий элемент
. Этот код дает нам это:
Добавление раскрывающегося списка
Теперь добавим раскрывающийся список. Выпадающие элементы включены как дополнительные элементы
, вложенные в соответствующий элемент
. Как это:
Хорошо, теперь о css. Нам нужно сделать несколько дополнений — отмечено красным:
ul # Horiznav, #horiznav ul { маржа: 0; отступ: 0; тип-стиль-список: нет; высота: 32 пикс. } #horiznav li { плыть налево; width: 152px; позиция: относительная } #horiznav li a { дисплей: блок; ширина: 150 пикселей; высота строки: 30 пикселей; выравнивание текста: центр; цвет белый; текстовое оформление: нет; цвет фона: # EA9531; граница: сплошной белый 1px } #horiznav li a: hover { цвет: # 333333 } #horiznav li ul { дисплей: нет; позиция: абсолютная; слева: 0; верх: 32 пикселя } #horiznav li: hover ul { дисплей: блок } #horiznav li ul a { цвет фона: # FFB33B }
См. Пояснения в комментариях к коду.На самом деле удивительно небольшое количество css. Выпадающие списки обычно скрыты и появляются при наведении курсора на родительский
. Это дает нам (как и вверху страницы):
Вы увидите, что при использовании абсолютного позиционирования раскрывающийся список появляется поверх всего остального на странице — это то, что мы хотим. И это прекрасно работает практически во всех популярных сегодня браузерах. В частности, я тестировал IE7, IE8, FF3, Chrome, Opera9, Opera 10, Safari4. Вы заметите, что чего-то не хватает.Никаких призов за угадание того, какой браузер вызывает дополнительные трудности…
Работа с раскрывающимся списком в IE6
IE6 не поддерживает: hover, за исключением элементов
. Так что без лишнего кода наше красивое раскрывающееся меню вообще не будет работать в IE6. К счастью, есть решение под названием csshover, которое вы найдете здесь вместе с инструкциями по его использованию. Я лично считаю версию 2 этого программного обеспечения наиболее надежной.
Добавление анимации с помощью jQuery
Чтобы добавить анимацию — плавные переходы, слайды и т. Д. — взгляните на мой плагин jQuery здесь, который позволяет использовать более сложную анимацию для пользователей javascript, сохраняя при этом подход css для тех, у кого нет.
Простое горизонтальное раскрывающееся меню
Простое горизонтальное выпадающее меню CSS, совместимое с кроссбраузерностью, без изображений и JavaScript.
HTML код:
МенюКод CSS:Простое раскрывающееся меню CSS
/ * CSSTerm.com Простое горизонтальное выпадающее меню CSS * / .drop_menu { фон: # 005555; отступ: 0; маржа: 0; тип-стиль-список: нет; высота: 30 пикселей; } .drop_menu li {float: left; } .drop_menu li a { отступ: 9 пикселей 20 пикселей; дисплей: блок; цвет: #fff; текстовое оформление: нет; шрифт: 12px arial, verdana, sans-serif; } / * Подменю * / .drop_menu ul { позиция: абсолютная; слева: -9999 пикселей; верх: -9999 пикселей; тип-стиль-список: нет; } .drop_menu li: hover {позиция: относительная; фон: # 5FD367; } .drop_menu li: hover ul { слева: 0px; верх: 30 пикселей; фон: # 5FD367; отступ: 0 пикселей; } .drop_menu li: hover ul li a { отступ: 5 пикселей; дисплей: блок; ширина: 168 пикселей; текстовый отступ: 15 пикселей; цвет фона: # 5FD367; } .drop_menu li: hover ul li a: hover {background: # 005555; }
Как создать раскрывающееся меню с помощью CSS
В этом руководстве вы узнаете, как создать раскрывающееся меню с помощью CSS.
- Начните со следующего HTML-документа, содержащего неупорядоченный список:
Раскрывающееся меню навигации <основной> <заголовок>Горизонтальная навигация с раскрывающимся меню
- Создайте файл для внешней таблицы стилей и создайте ссылку на него из HTML, используя следующий тег:
- Внутри таблицы стилей используйте следующий CSS для создания базового горизонтального меню:
ol, ul { стиль списка: нет; } #главное меню { маржа: 10 пикселей; ширина: 900 пикселей; семейство шрифтов: без засечек; } #mainMenu li { дисплей: блок; ширина: 120 пикселей; плыть налево; маржа слева: 2px; граница: 1px solid # 000; } #mainMenu a { дисплей: блок; отступ: 3 пикселя; текстовое оформление: нет; цвет фона: #fff; цвет: # 009; } #mainMenu a: hover { цвет фона: # 009; цвет: #fff; }
- Откройте HTML-страницу в браузере.Этот код отображает следующее:
- В HTML добавьте вложенный список под элементом списка «О программе».
- В CSS установите относительное положение пунктов главного меню.Нам нужно будет
позиционирование подменю с использованием абсолютного позиционирования, но с абсолютным позиционированием
элементы располагаются в пределах ближайшего к ним нестатически позиционированного, содержащего
элемент. Итак, чтобы подготовиться к этому, мы сначала сделаем основные элементы списка относительно
позиционируется:
#mainMenu li { позиция: относительная; дисплей: блок; ширина: 120 пикселей; плыть налево; маржа слева: 2px; граница: 1px solid # 000; }
- Абсолютно позиционируйте подменю. Подменю содержатся в элементах ul
внутри li элементов.Следующее правило использует абсолютное позиционирование для позиционирования
их сразу под этими элементами li:
#mainMenu li ul { позиция: абсолютная; маржа: 0px; отступ: 0 пикселей; слева: -3px; верх: 22px; }
- Скрыть подменю. Добавить дисплей: нет; к правилу выше, чтобы скрыть
подменю.
#mainMenu li ul { дисплей: нет; позиция: абсолютная; маржа: 0px; отступ: 0 пикселей; слева: -3px; верх: 22px; }
- Стиль опций подменю.Два правила ниже добавляют границы вокруг подменю.
параметры. Мы отключаем верхнюю границу для всех, кроме первого варианта, который мы определяем
с псевдоклассом: first-child, чтобы мы не получали двойную толщину
граница, полученная из верхней и нижней границ смежных параметров.
#mainMenu li ul { позиция: абсолютная; маржа: 0px; отступ: 0 пикселей; слева: -3px; верх: 22px; дисплей: нет; } #mainMenu li ul li { ширина: 150 пикселей; размер шрифта: меньше; граница-верх: нет; } #mainMenu li ul li: first-child { border-top: 1px solid # 000; }
- Отображать подменю, когда пользователь наводит курсор на основную опцию.Современный
браузеры позволяют использовать псевдокласс: hover почти для всех элементов, включая
список пунктов. В приведенном ниже коде для свойства отображения подменю устанавливается значение
блокировать, когда пользователь наводит курсор на родительский элемент списка:
#mainMenu li: hover ul { дисплей: блок; }
- Готовый CSS должен выглядеть следующим образом:
#главное меню { маржа: 10 пикселей; ширина: 900 пикселей; семейство шрифтов: без засечек; } #mainMenu li { положение: относительное; отображение: блок; ширина: 120 пикселей; плыть налево; маржа слева: 2px; граница: 1px solid # 000; } #mainMenu a { дисплей: блок; отступ: 3 пикселя; текстовое оформление: нет; цвет фона: #fff; цвет: # 009; } #mainMenu a: hover { цвет фона: # 009; цвет: #fff; } #mainMenu li ul { позиция: абсолютная; маржа: 0px; отступ: 0 пикселей; слева: -3px; верх: 22px; дисплей: нет; } #mainMenu li ul li { ширина: 150 пикселей; размер шрифта: меньше; граница-верх: нет; } #mainMenu li ul li: first-child { border-top: 1px solid # 000; } #mainMenu li: hover ul { дисплей: блок; }
- Откройте HTML-страницу в браузере.Этот код отображает следующее:
Выпадающие списки · Bootstrap
Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.
Обзор
Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью встроенного плагина JavaScript для выпадающего меню Bootstrap. Они переключаются нажатием, а не наведением курсора; это намеренное дизайнерское решение.
Выпадающие списки созданы на основе сторонней библиотеки Popper.js, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Не забудьте включить popper.min.js перед загрузочным JavaScript или используйте bootstrap.bundle.min.js
/ bootstrap.bundle.js
, который содержит Popper.js. Popper.js не используется для размещения раскрывающихся списков на панели навигации, хотя динамическое позиционирование не требуется.
Если вы создаете наш JavaScript из исходного кода, для него требуется util.js
.
Доступность
Стандарт WAI ARIA определяет фактический виджет role = "menu"
, но он специфичен для меню, подобного приложению, которое запускает действия или функции. ARIA Меню может содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.
Bootstrap разработаны так, чтобы быть общими и применимыми к различным ситуациям и структурам разметки. Например, можно создавать раскрывающиеся списки, содержащие дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа в систему. По этой причине Bootstrap не ожидает (и не добавляет автоматически) ни один из атрибутов role
и aria-
, необходимых для истинных меню ARIA .Авторы должны сами включить эти более конкретные атрибуты.
Однако Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам .dropdown-item
с помощью клавиш курсора и закрывать меню с помощью клавиши ESC .
Примеры
Оберните переключатель раскрывающегося списка (ваша кнопка или ссылка) и раскрывающееся меню внутри .dropdown
или другого элемента, который объявляет position: relative;
.Выпадающие списки можно запускать из элементов
или
, чтобы лучше соответствовать вашим потенциальным потребностям.
Одинарная кнопка
Любой отдельный .btn
можно превратить в раскрывающийся список с некоторыми изменениями разметки. Вот как вы можете заставить их работать с элементами
:
Самое приятное то, что вы можете сделать это и с любым вариантом кнопок:
Кнопка разделения
Аналогичным образом создайте раскрывающиеся списки с разделенными кнопками с практически такой же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением .dropdown-toggle-split
для правильного интервала вокруг выпадающего курсора.
Мы используем этот дополнительный класс, чтобы уменьшить горизонтальное заполнение
по обе стороны от каретки на 25% и удалить margin-left
, добавляемое для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.
Калибр
Выпадающие кнопкиработают с кнопками любого размера, включая кнопки по умолчанию и кнопки с разделенным раскрывающимся списком.
...
...
...
...
Проезд
Выпадение
Запуск раскрывающихся меню над элементами путем добавления .dropup
к родительскому элементу.
Навесной
Выпадающее меню триггера справа от элементов путем добавления .dropright
родительскому элементу.
Капля
Триггер в раскрывающемся меню слева от элементов путем добавления .dropleft
родительскому элементу.
Раньше содержимое выпадающего меню содержало ссылок, но в версии 4 это уже не так.Теперь вы можете дополнительно использовать
элементов в раскрывающихся списках вместо
s.
Вы также можете создавать неинтерактивные раскрывающиеся элементы с помощью .выпадающий текст
. Не стесняйтесь изменять стиль с помощью пользовательских CSS или текстовых утилит.
Активный
Добавьте .active
к элементам в раскрывающемся списке, чтобы пометили их как активные .
Отключено
Добавьте .Отключено
для элементов в раскрывающемся списке до , пометьте их как отключенные .
По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя. Добавьте .dropdown-menu-right
к .dropdown-menu
, чтобы выровнять раскрывающееся меню по правому краю.
Внимание! Выпадающие списки размещаются благодаря Popper.js (кроме случаев, когда они содержатся в навигационной панели).
Адаптивное выравнивание
Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display = "static"
и используйте классы адаптивных вариантов.
Чтобы выровнять вправо, раскрывающееся меню с заданной точкой останова или больше, добавьте .dropdown-menu {-sm | -md | -lg | -xl} -right
.
Чтобы выровнять по левому краю раскрывающегося меню с заданной точкой останова или больше, добавьте .dropdown-menu-right
и . dropdown-menu {-sm | -md | -lg | -xl} -left
.
Обратите внимание, что вам не нужно добавлять атрибут data-display = "static"
к раскрывающимся кнопкам на панели навигации, начиная с Popper.js не используется в навигационных панелях.
Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.
Разделители
Отдельные группы связанных пунктов меню с разделителем.
Текст
Поместите произвольный текст в раскрывающееся меню с текстом и используйте служебные программы для определения интервалов.Обратите внимание, что вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.
Пример текста, который свободно перемещается в раскрывающемся меню.
И это еще один пример текста.
Формы
Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или заполнения, чтобы дать ей необходимое отрицательное пространство.
<форма>
Параметры раскрывающегося списка
Используйте data-offset
или data-reference
, чтобы изменить расположение раскрывающегося списка.
Использование
С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (раскрывающиеся меню) путем переключения .показать класс
в родительском элементе списка. Атрибут data-toggle = "dropdown"
используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.
На устройствах с сенсорным экраном открытие раскрывающегося списка добавляет пустые ( $ .noop
) обработчики mouseover
к непосредственным потомкам элемента
. Этот, по общему признанию, уродливый хакер необходим для обхода причуды в делегировании событий iOS, которая в противном случае помешала бы нажатию в любом месте за пределами раскрывающегося списка запускать код, закрывающий раскрывающийся список.После закрытия раскрывающегося списка эти дополнительные пустые обработчики mouseover
удаляются.
Через атрибуты данных
Добавьте data-toggle = "dropdown"
к ссылке или кнопке, чтобы переключить раскрывающийся список.
...
Через JavaScript
Вызов раскрывающихся списков с помощью JavaScript:
$ ('.dropdown-toggle '). dropdown ()
data-toggle = "dropdown"
по-прежнему требуется Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle = "dropdown"
всегда должен присутствовать в элементе триггера раскрывающегося списка.
Опции
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-offset = ""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
смещение | Номер| строка | функция | 0 | Смещение раскрывающегося списка относительно цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой.Узел DOM запускающего элемента передается в качестве второго аргумента. Для получения дополнительной информации см. Документацию по смещению Popper.js. |
флип | логический | правда | Разрешить разворачивание раскрывающегося списка в случае перекрытия ссылочного элемента. Для получения дополнительной информации обратитесь к документации Popper.js. |
граница | строка | элемент | ‘scrollParent’ | Граница ограничения переполнения раскрывающегося меню.Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации см. Документацию PreventOverflow Popper.js. |
ссылка | строка | элемент | ‘переключатель’ | Ссылочный элемент раскрывающегося меню. Принимает значения 'toggle' , 'parent' или ссылку HTMLElement. Для получения дополнительной информации обратитесь к Попперу.js referenceObject docs. |
дисплей | строка | динамический | По умолчанию мы используем Popper.js для динамического позиционирования. Отключите это с помощью static . |
Обратите внимание, когда для границы
установлено любое значение, отличное от 'scrollParent'
, стиль position: static
применяется к контейнеру .dropdown
.
Методы
Метод | Описание |
---|---|
$ ().раскрывающийся список ('переключение') | Переключает раскрывающееся меню данной панели навигации или навигации с вкладками. |
$ (). Раскрывающийся список ('показать') | Показывает раскрывающееся меню данной панели навигации или навигации с вкладками. |
$ (). Раскрывающийся список ('скрыть') | Скрывает раскрывающееся меню данной панели навигации или навигации с вкладками. |
$ (). Раскрывающийся список («обновление») | Обновляет позицию раскрывающегося списка элемента. |
$ (). Раскрывающийся список ('удалить') | Уничтожает раскрывающийся список элемента. |
События
Все события dropdown запускаются в родительском элементе .dropdown-menu
и имеют свойство relatedTarget
, значение которого является переключаемым элементом привязки. hide.bs.dropdown
и hidden.bs.dropdown
события имеют свойство clickEvent
(только если исходный тип события click
), который содержит объект события для события щелчка.
Событие | Описание |
---|---|
показать.bs.dropdown | Это событие запускается немедленно при вызове метода экземпляра шоу. |
показан раскрывающийся вниз | Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS). |
hide.bs.dropdown | Это событие запускается сразу после вызова метода экземпляра hide. |
hidden.bs.dropdown | Это событие вызывается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS). |
$ ('# myDropdown'). On ('show.bs.dropdown', function () {
// сделай что-нибудь...
})
Вертикальное раскрывающееся меню при наведении курсора с использованием CSS и HTML
Введение
В этой статье объясняется, как создать вертикальное раскрывающееся меню с помощью CSS и HTML.
Вы часто видите сайты, содержащие строку меню, которая опускается при наведении курсора и выглядит действительно здорово, но обычно это горизонтальные раскрывающиеся меню. Эта статья поможет вам создать вертикальное раскрывающееся меню.
Его вывод будет примерно таким:
Теперь мы увидим процедуру создания такого выпадающего меню.
Шаг 1
Прежде всего, добавьте таблицу стилей и форму или страницу HTML.
Затем на HTML-странице или в веб-форме .NET добавьте «Div» и назовите его «divMenu».
После создания Div нам нужно добавить список элементов и еще один список в эти элементы, поэтому окончательный код будет примерно таким:
Шаг 2
Прямо сейчас ваш код — это не что иное, как
Итак, чтобы он выглядел хорошо и интересно, мы внесем изменения в таблицу стилей, которую мы добавили ранее.
Добавьте этот код в свою таблицу стилей:
- #divMenu, ul, li, li li {
- маржа: 0;
- отступ: 0;
- }
- #divMenu {
- ширина: 150 пикселей;
- высота: 27 пикселей;
- }
- #divMenu ul
- {
- высота строки: 25 пикселей;
- }
- #divMenu li {
- стиль списка: нет;
- позиция: относительная;
- фон: # 641b1b;
- }
- #divMenu li li {
- стиль списка: нет;
- позиция: относительная;
- фон: # 641b1b;
- слева: 148 пикселей;
- верх: -27 пикселей;
- }
- #divMenu ul li a {
- ширина: 148 пикселей;
- высота: 25 пикселей;
- дисплей: блочный;
- оформление текста: нет;
- выравнивание текста: по центру; Семейство шрифтов
- : Georgia, Times New Roman, с засечками;
- цвет: #ffffff;
- граница: сплошная 1px #eee;
- }
- #divMenu ul ul {
- позиция: абсолютная;
- видимость: скрыта;
- верх: 27 пикселей;
- }
- #divMenu ul li: hover ul {
- видимость: видимая;
- }
- #divMenu li: hover {
- цвет фона: # 945c7d;
- }
- #divMenu ul li: hover ul li a: hover {
- цвет фона: # 945c7d;
- }
- #divMenu a: hover {
- font-weight: жирный;
- }
Здесь я использовал идентификатор
Теперь все изменится, и ваш результат будет совершенно другим и интересным.
Выход
Как создать горизонтальное раскрывающееся меню в HTML | Small Business
В HTML раскрывающиеся меню являются функцией форм.Они дают человеку, заполняющему форму, несколько предопределенных вариантов, не занимая много места. HTML-код для раскрывающегося меню прост и должен быть включен между открывающим и закрывающим тегами
для работы в почтовой программе формы. Вы можете дополнительно стилизовать раскрывающееся меню с помощью CSS, чтобы оно выглядело более единообразно и соответствовало дизайну вашей страницы.Напишите открывающий тег для раскрывающегося меню, то есть. Наличие имени для вашего меню помогает обработчику формы идентифицировать и соответствующим образом маркировать вывод.Однако это будет варьироваться в зависимости от того, как вы настроили свой веб-сайт для обработки форм.
Добавьте необходимые параметры для раскрывающегося меню с помощью тега параметра. Это может выглядеть примерно так:
AliceBob
Вы можете иметь столько, сколько хотите, хотя создание слишком большого количества опций для раскрывающегося меню может быть непрактичным, особенно если вы рискуете превысить высоту окна. Если у вас есть более десятка или около того раскрывающихся вариантов, вы можете рассмотреть возможность использования переключателей и столбцов для своих вариантов.
Закройте свой тег, как только вы закончите с тегами, например
AliceBobCharlieDaneEdwardFrances
Если вы хотите начать с определенной выбранной опции, вы можете добавить ‘selected = «selected»‘ к опции, например
AliceBobCharlieDaneEdwardFrances
Если вы не используете этот тег, в раскрывающемся списке будет использоваться первый вариант, выбранный по умолчанию.
Измените стиль раскрывающегося меню по умолчанию, указав тег select в таблице стилей, например:
select {font-size: 14px; фон: # 8CCCC8; цвет: #FFFFFF; граница: 1px solid # 000000; ширина: 75 пикселей; }
Вы также можете сделать это с помощью «option», если хотите изменить внешний вид параметров.Например, вы можете захотеть, чтобы выбранный параметр имел белый текст, а другие параметры — черный текст, когда пользователь щелкает стрелку, чтобы просмотреть их.
Ссылки
Советы
- Если вы хотите применить класс или идентификатор для выбора, чтобы ваш стиль CSS влиял только на одно раскрывающееся меню, вы должны изменить тег на