Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Как сделать выпадающее меню в html css: Горизонтальное выпадающее меню

Содержание

Выпадающее меню исчезает слишком быстро



У меня есть небольшой фрагмент кода, написанный в HTML и CSS, который создает выпадающее меню. При наведении курсора на кнопку «E» появится всплывающее меню. Однако меню исчезает слишком быстро, чтобы я мог получить к нему доступ. Есть ли способ сделать так, чтобы меню оставалось достаточно времени для того, чтобы я мог получить к нему доступ при наведении кнопки «E» ?

Вот код:

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  position: relative;
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  display: none;
  position: absolute;
  top: 80px;
  //margin: 0;
  //padding: 0px;
  //overflow: hidden;
  z-index: 1;
}

#e_button:hover~#zul_menu {
  display: block;
}
<div>
  <p>Up...</p>
</div>

<div>
  <button>E</button>
  <ul>
    <li><a href="mainPage.php">Home</a></li>
    <li><a href="Cats.php"> Cats</a></li>
    <li><a href="Dogs.php">Dogs</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>
<div>
  <p>Down...</p>
</div>
html css
Поделиться Источник Orc2000     20 июня 2018 в 10:46

3 ответа

  • css выпадающее меню исчезает за содержимым

    На этой странице http://www.futureworkinstitute.com/2013/ я использую выпадающее меню отсюда http:/ / www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery/ но, как вы можете видеть, меню исчезает, как только оно покидает #navbar div.

  • Выпадающее меню исчезает

    Я довольно новичок в веб-дизайне и работаю над CSS способом создания выпадающего меню, которое изначально появляется при наведении родительского div. Однако, как только он будет виден, мне нужно, чтобы меню оставалось включенным до тех пор, пока мышь не будет перемещена со всего меню. Мне удалось…


3

Добавьте обертку div вокруг кнопки и выпадающего списка, сделайте ее относительной и добавьте стили к ее наведению.

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  display: none;
  position: absolute;
  top: 2px;
  //margin: 0;
  //padding: 0px;
  //overflow: hidden;
  z-index: 1;
}

#button_wrapper {
  position: relative;
  display: inline-block;
}

#button_wrapper:hover #zul_menu {
  display: block;
}
 
<div>
  <p>Up...</p>
</div>

<div>
  <div>
    <button>E</button>
    <ul>
      <li><a href="mainPage.php">Home</a></li>
      <li><a href="Cats.php"> Cats</a></li>
      <li><a href="Dogs.php">Dogs</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>
<div>
  <p>Down...</p>
</div>

Поделиться Nandita Sharma     20 июня 2018 в 10:50


1

скрыть с помощью анимации

используйте opacity вместо display: none/block

Вы можете использовать opacity: 0; , чтобы скрыть его, и transition: opacity 0.5s 1s; , чтобы анимировать … :hover , используйте opacity: 1; и transition: opacity 0.5s;

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  position: relative;
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  opacity: 0;
  transition: opacity 0.5s 1s;
  position: absolute;
  top: 80px;
  //margin: 0;
  //padding: 0px;
  //overflow: hidden;
  z-index: 1;
}

#e_button:hover~#zul_menu {
  opacity: 1;
  transition: opacity 0.5s;
}
<div>
  <p>Up...</p>
</div>

<div>
  <button>E</button>
  <ul>
    <li><a href="mainPage.php">Home</a></li>
    <li><a href="Cats.php"> Cats</a></li>
    <li><a href="Dogs.php">Dogs</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>
<div>
  <p>Down...</p>
</div>

Поделиться לבני מלכה     20 июня 2018 в 10:51

  • Выпадающее меню slideup идет слишком быстро

    мое решение : Я использую это: http://www.kriesi.at/архивы/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery А здесь на jsfiddle: http://jsfiddle.net/nBKZ9 / Спасибо вам, ребята, за вашу помощь! У меня есть это выпадающее меню, которое работает с этим маленьким кодом: $(…

  • Выпадающее Меню Исчезает

    Я создал выпадающее меню. Когда пользователь наводит курсор на навигационную кнопку, используя переходы CSS3, класс ‘dropdown-content’ исчезает, как показано в демо-версии ниже: https://jsfiddle.net/4xk78qse / Чего я не могу понять, так это как исчезнуть ‘dropdown-content’, когда пользователь не…


0

Ну, это немного странно, выпадающий список с таким запасом от триггера, но если вам это нравится, вы можете добиться этого, изменив свойство отображения на видимость и переход; также вам нужно будет добавить поведение # zul_menu:hover (поэтому, когда вы зависаете над выпадающим списком, он не будет закрываться):

#topbar {
  padding: 0px;
  background: black;
  height: 10%;
}

#e_button {
  position: relative;
  width: 40px;
  height: 100%;
}

#zul_menu {
  border: 1px black solid;
  visibility: hidden;
  position: absolute;
  top: 80px;
  z-index: 1;
  transition: all 1s;
}

#e_button:hover~#zul_menu,
#zul_menu:hover {
  visibility: visible;
}
 
 
<div>
  <p>Up...</p>
</div>

<div>
  <button>E</button>
  <ul>
    <li><a href="mainPage.php">Home</a></li>
    <li><a href="Cats.php"> Cats</a></li>
    <li><a href="Dogs.php">Dogs</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>
<div>
  <p>Down...</p>
</div>

Поделиться Damià     20 июня 2018 в 11:00

Похожие вопросы:


Css меню исчезает слишком быстро, когда я перемещаю мышь

Вот моя проблема http://jsfiddle.net/yf4W8/4 / Когда я пытаюсь получить доступ к пунктам меню, меню исчезает слишком быстро. Как я могу решить ?


Выпадающее меню исчезает прежде чем я добираюсь до ссылок

Взгляните на ссылку тура в меню на этой странице . Когда я навожу курсор на Тур, он должен показать меню и позволить мне выбрать, на какое из подменю я хочу нажать, но оно исчезает слишком быстро….


CSS выпадающее меню исчезает под слайд-шоу

Я создаю сайт , Домашняя страница состоит из четырех дивов , первый содержит выпадающее меню , следующий содержит слайд-шоу , проблема в том , что когда я помещаю слайд-шоу на этот div, выпадающее…


css выпадающее меню исчезает за содержимым

На этой странице http://www.futureworkinstitute.com/2013/ я использую выпадающее меню отсюда http:/ / www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery/ но,…


Выпадающее меню исчезает

Я довольно новичок в веб-дизайне и работаю над CSS способом создания выпадающего меню, которое изначально появляется при наведении родительского div. Однако, как только он будет виден, мне нужно,…


Выпадающее меню slideup идет слишком быстро

мое решение : Я использую это: http://www.kriesi.at/архивы/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery А здесь на jsfiddle: http://jsfiddle.net/nBKZ9 / Спасибо вам, ребята,…


Выпадающее Меню Исчезает

Я создал выпадающее меню. Когда пользователь наводит курсор на навигационную кнопку, используя переходы CSS3, класс ‘dropdown-content’ исчезает, как показано в демо-версии ниже:…


Навигационное меню SlideToggle исчезает слишком быстро

у меня есть эта функция slidetoggle: jQuery(document).ready(function(){ jQuery(.menu-trigger).click(function (){ jQuery(.nav-menu).slideToggle(400, function(){…


Сделать выпадающее меню исчезает

У меня есть код от W3schools, в котором мы получаем выпадающее меню после нажатия на кнопку. Выпадающее меню не исчезает, когда мы нажимаем в другом месте. Я немного серфил, но это кажется…


Меню наведения исчезает слишком быстро

У меня возникла проблема, я не знаю, в чем проблема с меню наведения, но оно исчезает слишком быстро <div> <li> <a…

Как сделать выпадающее меню списком?

Как вариант так:

HTML

<h2>Vertical Submenu</h2>
<nav>
<ul>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
</ul>
</nav>

CSS

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

https://jsfiddle.net/rrub99sy/

student_aPnalwdy

Горизонтальное выпадающее меню на CSS

Вы здесь: Главная — CSS — CSS Основы — Горизонтальное выпадающее меню на CSS

Я уже когда-то писал о том, как сделать вертикальное выпадающее меню на CSS. В этой же статье я расскажу о том, как сделать горизонтальное выпадающее меню на CSS.

Привожу HTML-код:

<ul>
  <li>
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Меню 1</a>
    <ul>
      <li>
        <a href="#">Подменю 1</a>
      </li>
      <li>
        <a href="#">Подменю 2</a>
      </li>
      <li>
        <a href="#">Подменю 3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Меню 2</a>
    <ul>
      <li>
        <a href="#">Подменю4</a>
      </li>
      <li>
        <a href="#">Подменю 5</a>
      </li>
      <li>
        <a href="#">Подменю 6</a>
      </li>
      <li>
        <a href="#">Подменю7</a>
      </li>
      <li>
        <a href="#">Подменю 8</a>
      </li>
    </ul>
  </li>
</ul>

И CSS-код:

ul.menu {
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul.menu li {
  float: left;
  list-style: none;
}
ul.menu li a {
  display: block;
  padding: 8px 20px 10px;
  text-decoration: none;
}
ul.menu li ul {
  display: none;
  padding-left: 10px;
}
ul.menu li:hover ul {
  display: block;
  position: absolute;
}
ul.menu li:hover ul li {
  float: none;
}
ul.menu li:hover ul li a {
  padding: 6px 0 8px;
}

Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.

Теперь у Вас не должно быть проблем с созданием горизонтального выпадающего меню на CSS.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

  • Создано 06.03.2013 04:25:07
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Выпадающее горизонтальное меню с поиском на CSS3 и HTML5