Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
-5 / 0 / 0
Регистрация: 11.12.2018
Сообщений: 104
1

Как реализовать такое выпадающее меню

18.01.2021, 20:55. Просмотров 698. Ответов 0
Метки нет (Все метки)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<header class="header">
        <div class="container">
            <div class="header-inner">
                <div class="logo">
                    <img class="logo-img" src="./images/logo.png" alt="logo">
                </div>
                <nav class="menu">
                    <ul class="menu-list">
                        <li class="menu-item">
                            <a class="menu-link" href="#">Главная</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Каталог товаров</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Доставка</a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Оплата</a>
                        </li>
                        <li class="menu-item menu-item--active">
                            <a class="menu-link" href="#">Еще</a>
                            <ul class="submenu">
                                <li>
                                    <a href="">Гарантия и сервис</a>
                                </li>
                                <li>
                                    <a href="">Контакты</a>
                                </li>
                                <li>
                                    <a href="">О нас</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
body {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
}
 
.container {
    max-width: 1200px;
    margin: 0 auto;
}
 
/*HEADER*/
 
.header {
    padding-top: 20px;
    background-color: #0a408a;
}
 
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.logo {
    margin-right: 40px;
    width: 350px;
}
 
.menu {
    margin-right: auto;
    position: relative;
}
 
.menu-list {
    display: flex;
}
 
.menu-link {
    margin-right: 25px;
    text-decoration: none;
    color: #fff;
}
 
 
.menu-item--active::before {
    background-image: url(../images/chevron-down-solid.svg);
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    position: absolute;
    right: 100px;
    bottom: 87px;
}
Нужно примерно вот так:
Как реализовать такое выпадающее меню
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.01.2021, 20:55
Ответы с готовыми решениями:

Создать выпадающее меню, как???
Создать выпадающее меню. Текст, выбранный в меню, должен отображаться при нажатии на кнопку в...

Как реализовать такое меню
Здраствуйте , я новичок в React. Не подскажете как такое меню реализовать? Есть сайт:...

Как создать выпадающее меню средствами js?
есть менюшка: Пунк1 Пункт2 Пункт3 Как сделать так что бы при наведении мыши например на пункт 2...

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

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.01.2021, 20:55

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Выпадающее меню сайта. Как показать / скрыть?
Всем здравствуйте! Делаю меню, которое появляется при клике на ссылку. Для его появления в...

Как через выпадающее меню присвоить значение переменной?
Приветствую, мне нужно реализовать присвоение значения переменной, которое выберет человек из меню....

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

Как сделать такое выпадающее меню?
Вот меню для магазина, как сделать такую выпадающую вкладку?? Скрипты тут нужны или можно на CSS,...

Как сделать такое выпадающее меню?
Добрый день.Я приактикующий начинающий верстальщик , сейчас для практики делаю такой шаблон ...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.