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

alexxlab

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

Вопрос задан

Изменён 7 месяцев назад

Просмотрен 151 раз

Есть вот такое выпадающее меню на flexbox-ах.Но оно не работает как нужно. При наведении на пункт с выпадающими подпунктами, происходит дополнение данного flex контейнера и эти подпункты сдвигаются вниз и названия подпунктов располагаются вниз, тем самым сдвигая всё меню за пределы обозначеного контейнера. Возможно ли сделать так, чтобы подпункты сдвигались не вниз относительно родителя, а право под другие пункты? Возможно ли такое на флексбоксах? При этом нужно чтобы меню было на всю ширину контейнера. Сама разметка и css.

*{
        margin: 0;
        padding: 0;
      }
    body {
      margin: 0;
      padding: 0;
      font-family: 'Montserrat', sans-serif;
      line-height: 1.
 
 5;
    }
    .container{
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
        border: 3px solid green;
    }
      .header {
        display: flex;
        flex-wrap: wrap; 
        justify-content: space-between;
        align-items: center; 
      }
        .header .menu ul {
          display: flex;
          list-style: none;
        }
        .menu{
          width: 100%;
        }
        .header .menu ul{
          justify-content: space-between;
        }
        .header .menu ul li {
          margin: 22px 55px 22px 0px;
        }
        .header .menu ul li:last-child{
          margin-right: 0px;
        }
        .header .menu ul a {
          text-transform: lowercase;
          text-decoration: none;
          font-size: 20px;
          font-weight: 400;
          color: #4F4F4F;
        }
        /*---Выпадающее меню---*/
        .header .menu ul ul{
          display: none;
          top: 100%;
        }
        .header .menu ul li:hover > ul{
          display: inherit;
        }
        .
  header .menu ul ul li{
          min-width: 225px;
          float: none;
          display: list-item;
          position: relative;
        }
        /*---Hover---*/
        .header .menu ul li a:hover {
          font-weight: 700;
        }
<div>  
  <div>
   <div>
      <ul>
         <li><a href="#">компания</a>
            <ul>
                <li><a href="#">LoremIpsum</a></li>
                <li><a href="#">LoremIpsumLoremIpsumLoremIpsumLoremIpsum</a></li>
                <li><a href="#">LoremIpsumLoremIpsum</a></li>
            </ul>
         </li>
         <li><a href="#">личный кабинет</a></li>
         <li><a href="#">документы</a></li>
         <li><a href="#">вопросы и ответы</a></li>
         <li><a href="#">новости</a></li>
         <li><a href="#">контакты</a></li>
      </ul>
   </div>
  </div>
</div>

На скринах зелёным выделен контейнер для контента. На первом — меню до наведения, на втором -после. Видно что выпадает меню из разметки контейнера.

  • html
  • css
  • flexbox
  • меню
  • разметка

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Делаем вместе анимированное выпадающее меню на CSS3

Основы PHP 8

Пройдя курс, Вы узнаете:

— Как установить и настроить OpenServer

— Всю необходимую базу по PHP 8

— Как писать самые различные скрипты на PHP

Общая продолжительность курса 7 часов, плюс более 100 упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Жизнь — гора: поднимаешься медленно, спускаешься быстро.

Ги де Мопассан

В этом уроке мы научимся с вами делать горизонтальное анимированное выпадающее меню на CSS3, при наведении курсором на его категории, будет меняться цвет.

Рассмотрим пример написания кода

выпадающего меню для создания категорий для Интернет-магазина. Открываем свою любимую программу для веб-разработки, у меня это Notepad++ и создаем два файла – index.html и style.css. Подключаем файл с нашими стилями к созданной HTML странице, а именно вставляем эту строчку кода между тегами head.

<link rel="stylesheet" href="styles.css">

Первым делом построим структуру нашего будущего выпадающего меню с помощью маркированного списка . Между тегами body разместим тег header, а внутри него контейнер nav с идентификатором тоже #nav . Если меню навигации будет только одно на странице, то ему можно присвоить id стилей, а не класс. Таким будет HTML код.

<!DOCTYPE html>
<html>
<head>
<title>Интернет магазин</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
   <header>
     <nav id = "nav">
    <ul>
   <li><a href = "#">Одежда</a>
   <ul class = "second">
    <li><a href = "#">Мужская</a></li>
   <li><a href = "#">Женская</a></li>
   <li><a href = "#">Детская</a></li>
  </ul>
   </li>
   <li><a href = "#">Электроника</a>
   <ul class = "second">
   <li><a href = "#">Телефоны</a></li>
   <li><a href = "#">Телевизоры</a></li>
   <li><a href = "#">Компьютеры</a></li>
  </ul>
   </li>
   <li><a href = "#">Мебель</a>
   <ul class = "second">
   <li><a href = "#">Диваны</a></li>
   <li><a href = "#">Столы</a></li>
   <li><a href = "#">Кровати</a></li>
  </ul>
   </li>
   <li><a href = "#">Техника</a>
   <ul class = "second">
   <li><a href = "#">Холодильники</a></li>
   <li><a href = "#">Стиральные машины</a> </li>
   <li><a href = "#">Электроплиты</a></li>
  </ul>
  </li>
  </ul>
  </nav>
  </header>
</body>
</html>

А здесь мы видим результат в браузере. Далее приступим к описанию внешнего вида нашего меню. Все вложенные списки второго уровня получили класс .second. Таким образом вложенные или выпадающие списки перешли под свое управление другим классом. Сделаем все списки меню кликабельными с помощью атрибута

a href=»#».

Теперь обратимся к CSS и пропишем все нужные нам стили в заранее подготовленном style.css Обнуляем все отступы, так как разные браузеры отображают их по своему.

#nav *{
   padding: 0;
   margin: 0;
   } /* отступ от края 150 пикселей */
header{
   font-family: Arial;
   margin-top: 150px;
   } /* говорим маркерам нет */
#nav ul{
   list-style: none;
} /* прячем подменю второго уровня */
#nav li .second{
   top: 100%;
   display: none;
   position: absolute;
} /* ставим видимые списки в ряд */
#nav > ul > li{
   float: left;
   position: relative;
   width: 180px;
}

Атрибут float прижимает списки к левой стороне браузера, ставя их в один ряд. А так же необходимо задать относительное позиционирование, чтобы выпадающие списки располагались относительно блока

nav, а не окна браузера.

Далее красиво стилизуем наше выпадающее меню.

#nav > ul li a{
font-size: 17px;
background: #E0E0E4;
display: block;
padding: 16px 32px 16px 42px;
color: #4E4E4F;
text-decoration: none;
}

Вот и подошли мы к самому главному действию – как сделать само выпадающее меню. Только две строчки кода и при наведении курсора невидимая часть станет видимой.

#nav li:hover .second{
   display: block;
}

После придания внешнего вида, сделаем так, что при наведении курсора на категории, меняется цвет ссылки и самого блока:

#nav li a:hover{
transition: all 0.4s ease; /* плавный переход */
color: #ededf2;
background: #4e4e4f;
}

Двухуровневое выпадающее и анимированное меню на CSS готово и работает. Посмотреть весь код и попробовать меню в действии можно на фиддле.

  • Создано 03.08.2017 12:58:06
  • Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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]

html. Есть ли какой-нибудь быстрый код для создания интерактивного всплывающего меню без js? 

 /*---Всплывающее меню CSS---*/
.коробка{
положение: фиксированное;
верх: 0,1%;
слева: 14 пикселей;
отображение: встроенный блок;
курсор: указатель;
}
ул {
тип стиля списка: нет;
}
уль ли {
семейство шрифтов: Lato;
отступ: 10 пикселей;
}
уль ли а {
текстовое оформление: нет;
черный цвет;
}
уль ли: наведите {
цвет фона: бисквитный;
}
.box1{
положение: абсолютное;
верх: 3%;
слева: 15 пикселей;
z-индекс: 1;
цвет фона: цветочный белый;
максимальная ширина: 260 пикселей;
box-sizing: граница-коробка;
box-shadow: 2px 5px 15px черный;
дисплей: нет;
}
. box2{
    положение: абсолютное;
    верх: 3%;
    слева:8%;
    z-индекс: 2;
    цвет фона: цветочный белый;
    максимальная ширина: 260 пикселей;
    box-sizing: граница-коробка;
    box-shadow: 2px 5px 15px черный;
    дисплей: нет;
}
.box:наведите .box1{
дисплей: блок;
}
#navli:focus .box2 {
    дисплей:блок;
  } 
 
<дел>
        
              
        <дел>
            <ул>
         
  • элемент 1 »
    • 
            
  • элемент2
    • 
            
  • элемент3
    • 
            
  • элемент4
    • 
            
  • item5
    • 
            
  • элемент6
    •