Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Другие темы раздела
JavaScript как правильно передать пароль на сервер https://www.cyberforum.ru/ javascript/ thread2771258.html
Здраствуйте, скажите пожалуйста, как правильно передать пароль на сервер, (нужно использовать шифрование чтоб невозможно было просто перехватить пакет и использовать пароль). К сожалению я не знаком...
Получить минимальное изменение числа JavaScript
Здравствуйте. Есть число: 2.247. Как получить минимальный шаг для него? То есть - 0.001. Планируется использовать числа с разным количеством знаком после точки, поэтому интересует универсальное...
Как сделать чтобы при открытии одного элемента Collapsible закрывался другой? JavaScript
<div class="category-first"> <span class="computer-category collapsible">Computer</span> <ul class="computer-elements"> <li class="list-element"><a href="#">Software</a></li> ...
JavaScript Как превратить словарь в список? Добрый день! Хочу из словаря сделать список, например(есть словарь путей): d = {'a': {'b' : 1, 'c' : 5}, "b": {'a' : 1, 'c': 1}, 'c': {'a': 5, 'b' : 1}}; Нужно получить список всех дорог от вершины... https://www.cyberforum.ru/ javascript/ thread2770088.html
JavaScript Таймаут в слайдшоу https://www.cyberforum.ru/ javascript/ thread2769864.html
У меня есть слайдшоу, которые работает нажатием на кнопки вперед и назад, но я так же хочу добавить таймаут, чтобы слайд автоматически менялся через несколько секунд. Как это можно реализовать, не...
Как написать JSON Viewer на JS? JavaScript
Нужно написать JSON Viewer на JS. Еще только начинаю учить JS и Фронт, поэтому нужна помощь. <div id="content"> <div class="item"> <p>keyName</p> <small>valueType</small> ...
Создать код для магазина книг JavaScript
Создать html-страницу для магазина книг а потом сделать с помощью js чтоб: Пользователь должен иметь возможность выбрать книгу, указать количество экземпляров, ввести свое имя, дату доставки,...
JavaScript d3js как прикрепить данные к path ? Родная документация у это библиотеки (движка?) невероятно ущербная, непонятно абсолютно как и по каким принципам что должно работать. Тем более у её автора какая то мания все 0 нуля переписывать... https://www.cyberforum.ru/ javascript/ thread2769105.html
JavaScript Нарисовать Карту мира https://www.cyberforum.ru/ javascript/ thread2768384.html
Как мне на странице создать Карту мира(или отдельного региона, страны) как на прилогаемой картинке? Не просто наросовать а чтоб можно мыло выбирать фрагменты, менять цвет фрагментов. Какие готовые...
JavaScript Обработка изображения Доброго времени суток, есть "программа" для обработки изображения, одна из функций которой - наложение шума, но вместе с эти изображение также преобразуется в негатив, в чём может быть проблема? ... https://www.cyberforum.ru/ javascript/ thread2768003.html
JavaScript Слайдер с круговой диаграммой https://www.cyberforum.ru/ javascript/ thread2767598.html
Добрый день. Сейчас есть слайдер с круговой диаграммой. Код: <div class="slider-section--slider"> <div class="iphone"> <div...
JavaScript Поиск текста на странице с шрифтом красный и НЕ красный здравствуйте, подскажите как сделать, вверху странички поле ввода и две кнопки Поиск 1-чтобы искало текст на странице шрифт у которого красный 2-чтобы искало текст на странице шрифт у которого НЕ... https://www.cyberforum.ru/ javascript/ thread2767362.html
-4 / 1 / 0
Регистрация: 11.12.2018
Сообщений: 108
0

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

18.01.2021, 20:55. Просмотров 744. Ответов 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
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.