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

Question

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

Рейтинг: 2Ответов: 1Опубликовано: 18.04.2023

Вот это меню

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

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

Мой код

    <div class="page">
<div class="menu">
    <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 class="text">
<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 class="page">
    <div class="menu">
        <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 class="text">
    <pre>
          много текста
    </pre>
</div>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 5Принят

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

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

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 class="page">
  <div class="menu">
    <p>MENU</p>
    <ol>
      <li><img src="https://lh3.googleusercontent.com/a-/AOh14Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>EDIT</span></li>
      <li><img src="https://lh3.googleusercontent.com/a-/AOh14Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>FAVORITES</span></li>
      <li><img src="https://lh3.googleusercontent.com/a-/AOh14Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>HISTORY</span></li>
      <li><img src="https://lh3.googleusercontent.com/a-/AOh14Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>SECURITY</span></li>
      <li><img src="https://lh3.googleusercontent.com/a-/AOh14Gjz7sQ8RpOWGVtMb0OWmPKpdI1wYarHOsiiG3EqrQ=k-s64" alt=""><span>SETTINGS</span></li>
    </ol>
  </div>
  <div class="text">
      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>

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

Ответы