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

Разное 

Содержание

Пытаюсь сделать всплывающее меню в HTML CSS

Задать вопрос

Вопрос задан

Изменён 2 месяца назад

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

Вот это меню

при наведении курсора должно отобразиться так

И мой вопрос таков Как зафиксировать иконки на своих местах чтобы при наведении меню раскрывалось а они стояли на месте?

Мой код

    <div>
<div>
    <ol>
        <li><img src="image/pencil.png" alt=""><span>Test</span></li>
        <li><img src="image/heart.png" alt=""><span>Test</span></li>
        <li><img src="image/clock.png" alt=""></li>
        <li><img src="image/shield.
 
 png" alt=""></li>
        <li><img src="image/equalizer.png" alt=""></li>
    </ol>
</div>   
<div>
<pre>
      много текста
</pre>

Пока результат такой

Я пытался написать position: fixed; но иконки вставали друг на друга

просто пожалуйста дайте совет как зафиксировать иконки на местах чтобы при наведении мышки они стояли а текст выплывал слева на право

Надеюсь я смог объяснить что мне нужно

по просьбе в комментах добавил CSS код

.page {
    display: inline-flex;
}
ol {
    list-style: none;
    margin: 100px 0;
}
li {
    margin: 100px 0;
    display: flex;
}
span {
    margin-left: 50px;
    margin-right: -50px;
}
.text {
    margin-left: 130px;
}
.menu:hover {
    position: relative;
    left: 100px;
}
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
 <div>
    <div>
        <ol>
            <li><img src="image/pencil.png" alt=""><span>Test</span></li>
            <li><img src="image/heart.png" alt=""><span>Test</span></li>
            <li><img src="image/clock.png" alt=""></li>
            <li><img src="image/shield.png" alt=""></li>
            <li><img src="image/equalizer.png" alt=""></li>
        </ol>
    </div>   
    <div>
    <pre>
          много текста
    </pre>
</div>
  • html
  • css
2

как зафиксировать иконки на местах чтобы при наведении мышки они стояли а текст выплывал слева на право

Просто уменьшите размер шрифта надписей до нуля, а при наведении восстанавливайте исходный:

body { margin: 0; }
. page {
  position: relative;
  display: flex;
}
.menu {
  position: fixed;
  height: 100vh;
  width: max-content;
  background-color: #8a8a8a;
}
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  margin: 0;
  display: flex;
  align-items: center;
  padding: 25px;
  cursor: pointer;
}
li:hover { background-color: #696969; }
img { height: 30px; width: 30px; }
span {
  margin-left: 30px;
  opacity: 1;
  transition: margin-left .4s ease-out, font-size .4s ease-in-out, opacity .4s ease-in;
}
.menu:not(:hover) span {
  margin-left: 0;
  font-size: 0;
  opacity: 0;
  transition: margin-left .4s ease-in-out, font-size .4s ease-in-out, opacity .4s ease-out;
}
.text {
  padding-left: 100px;
  font-size: 48px;
}
<div>
  <div>
    <p>MENU</p>
    <ol>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>EDIT</span></li>
      <li><img src="https://lh4. googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>FAVORITES</span></li>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>HISTORY</span></li>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>SECURITY</span></li>
      <li><img src="https://lh4.googleusercontent.com/a-/AOh24Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>SETTINGS</span></li>
    </ol>
  </div>
  <div>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error inventore similique sequi ab sint quisquam corporis nulla eligendi corrupti, mollitia eaque modi, unde ratione dolor voluptas, nam magnam quos. Culpa.
Ducimus qui iusto voluptatibus ipsam beatae in perferendis quam ratione? Deserunt ducimus ad incidunt aspernatur animi cupiditate debitis a eos neque temporibus nesciunt cum praesentium, aliquam nulla quae nemo voluptatibus?
Temporibus nulla, mollitia ab qui velit amet illo, voluptate sint saepe nemo tempora beatae totam ratione veritatis.

  
 
  Esse blanditiis, minima quod, eaque facere nemo alias odio ex tempora maxime odit.
Nam veniam animi temporibus consequatur nostrum voluptatem error cupiditate, fuga ipsam nulla quisquam sequi fugiat non tempora culpa aperiam facere repellat eum deserunt, rem ex dignissimos. Cupiditate inventore ipsum quisquam.
  </div>
</div>
1

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

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

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Выпадающее меню пользователя Pure CSS Пример

Выпадающее меню пользователя HomesnippetsPure CSS

Полный экран

меню, выпадающее меню, наведение

Разветвить это Подождите… 025 324

Draggable Sidebar Menu v2

Theme Maker

21.4K

меню электронной коммерции с поиском

BBBootstrap Team

900 12 7.4K

Выпадающий список с анимацией курсора

Ask SNB

88.4K

раскрывающийся список с множественным выбором

Ask SNB

3.9K

профиль в раскрывающемся списке при наведении

команда BBBootstrap

17.3 К

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

BBBoottrap Team

398

выпадающее меню для выбора элементов

BBBootstrap Team

9 . 9K

Гамбургер-меню с анимацией

BBBootstrap Team

16.0K

раскрывающийся список выберите опцию

BBBootstrap Team

56

кнопка курсора

Sukurulla Shaikh

324

Draggable Sidebar Menu v2

Theme Maker

21.4K

меню электронной коммерции с поиском

BBBootstrap Team

900 12 7.4K

Выпадающий список с анимацией курсора

Ask SNB

88.4K

раскрывающийся список с множественным выбором

Ask SNB

3.9K

профиль в раскрывающемся списке при наведении

команда BBBootstrap

17.3 К

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

BBBoottrap Team

398

выпадающее меню для выбора элементов

BBBootstrap Team

9 . 9K

Гамбургер-меню с анимацией

BBBootstrap Team

16.0K

раскрывающийся список выберите опцию

BBBootstrap Team

56

кнопка курсора

Sukurulla Shaikh

324

Draggable Sidebar Menu v2

Theme Maker

21.4K

меню электронной коммерции с поиском

BBBootstrap Team

900 12 7.4K

Выпадающий список с анимацией курсора

Спросите SNB

Посмотреть ещесниппеты created by

BBBootstrap Team

Посмотреть

Время викторины Проверьте свои знания

Проверьте свои знания с помощью 10+ викторин

Бесплатные шаблоны
(Просмотреть все)

Последние фрагменты

просмотреть все

флаг Германии

Tailwind Guy16 часов назад

оповещение диалоговой карты эмоций

Суприя Свами6 дней назад

90 012 модальное оповещение о выходе

Суприя Свами6 дней назад

Включить уведомления

Supriya Swami7 дней назад

Викторина( просмотреть все )

Try — Anytool. app

Раскрывающийся список — Tailwind CSS Components

Раскрывающийся список может открыть меню или любой другой элемент при нажатии кнопки.

Имя класса Тип
раскрывающийся список Компонент Контейнерный элемент
выпадающее содержимое Компонент Контейнер для содержимого
раскрывающийся список

Модификатор

 Выравнивается по концу
раскрывающийся список

Модификатор

 Открыть сверху
выпадающее меню

Модификатор

 Открыть снизу
раскрывающийся список слева

Модификатор

 Открыть слева
раскрывающийся список справа

Модификатор

 Открытие справа
выпадающее меню

Модификатор

 Открывается и при наведении
раскрывающееся меню

Модификатор

 Принудительно открыть

# Способ 1: использование тегов сведений и сводки

# Выпадающее меню с использованием тега

Остается открытым до повторного щелчка. Или вы можете закрыть его с помощью JS, удалив атрибут `open`

открыть или закрыть
  • Элемент 1
  • Элемент 2

#Метод 2: использование метки и фокуса CSS

Мы используем

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *