Как сделать выезжающее меню css

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

HTML:

<div class="menu">
  <button>Открыть меню</button>
  <ul class="menu-list">
    <li><a href="#">Пункт меню 1</a></li>
    <li><a href="#">Пункт меню 2</a></li>
    <li><a href="#">Пункт меню 3</a></li>
  </ul>
</div>

Здесь мы создаем элемент div с классом «menu», внутри которого есть кнопка и список меню. Список меню скрыт, пока не происходит наведение на кнопку.

CSS:

.menu {
  position: relative;
}

.button {
  font-size: 18px;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.menu-list {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 200px;
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ddd;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

.menu:hover .menu-list {
  visibility: visible;
  opacity: 1;
}

Этот CSS-код задает стиль элементам на странице, чтобы создать выезжающее меню. Мы используем свойства position, border-radius, box-shadow, visibility и opacity для определения размеров, цветов и других параметров элементов. Мы также используем свойство transition, чтобы добавить плавный эффект анимации для появления и исчезновения списка меню.

Когда происходит наведение на кнопку, меню выезжает, поскольку мы задали свойства opacity и visibility в CSS для класса «menu-list». В результате элемент становится видимым и пользователи могут увидеть список пунктов меню.

Вы можете изменять параметры CSS в зависимости от ваших потребностей, чтобы создать выезжающее меню, которое соответствует вашему дизайну сайта.