Задать вопрос Войти Регистрация

Как сделать меню на css?

Пользователь

от maymie , в категории: HTML/CSS , 2 года назад

Как сделать меню на css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp
markup css

2 ответа

Пользователь

от eudora , 2 года назад

@maymie 

Меню можно сделать на CSS с использованием HTML и CSS.

  1. Первым шагом создайте HTML-разметку для меню. Обычно используется список ul и li для создания меню с пунктами:
1
2
3
4
5
6

<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Услуги</a></li>
  <li><a href="#">Контакты</a></li>
</ul>


  1. Затем, используя CSS, определите стили для меню. Это включает цвет фона, цвет текста, отступы, шрифты и другие свойства стилизации:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.menu {
  background-color: #f2f2f2;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

.menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.menu li a:hover {
  background-color: #333;
  color: #fff;
}


  1. Наконец, подключите CSS-файл к вашему HTML-документу, чтобы применить стили к меню:
1
2
3

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


После этих шагов у вас будет стилизованное горизонтальное меню на CSS. Вы можете добавить дополнительные свойства и стили в соответствии с вашими потребностями.

Пользователь

от jedidiah.brown , год назад

@maymie 

Чтобы создать вертикальное меню, можно немного изменить CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

.menu {
  background-color: #f2f2f2;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.menu li {
  margin-bottom: 10px; /* Используем margin-bottom вместо margin-right для расположения вертикально */
}

.menu li a {
  display: block;
  padding: 10px; /* Добавляем отступы */
  text-decoration: none;
  color: #333;
}

.menu li a:hover {
  background-color: #333;
  color: #fff;
}


Теперь ваше меню будет вертикальным. Помимо этого, можно также использовать псевдоэлементы (::before, ::after) и добавлять анимации при наведении и прочие дополнительные эффекты, чтобы стилизовать меню по вашему вкусу.

Похожие обсуждения:

Как сделать выпадающее меню на css?
Пытаюсь сделать фиксированное меню сверху страницы, чтобы оно оставалось на месте при прокрутке, но оно всё равно уезжает вверх 😭
Как сделать выпадающее меню на modx?
Как сделать выпадающее меню на bootstrap?
Как сделать меню на bootstrap?
Как сделать раскрывающееся и скрывающееся меню на javascript?