Как сделать выпадающее меню как на Тостере или на Хабре?

Question

Alex Blinov @CEPII

Житель убежища 101

Как сделать выпадающее меню как на Тостере или на Хабре?

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

Вопрос задан более трёх лет назад
138 просмотров

1 комментарий

Подписаться 2 Простой 1 комментарий

Alex Blinov @CEPII Автор вопроса

BD_ l3ftoverZ!, HTML

spoiler

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
        <header class="page-header">
            <div id="menu">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        <nav class="page-header__menu">
            <a href="https://"><h1>_a_g</h1></a>
        </nav>
        <div class="page-header__logout">
            <a href="/">
                <img src="https://svgshare.com/i/Cqb.svg" alt="" height="22"/>
            </a>
        </div>
        </header>
        <div id="main">
            <ul>
                <li>Курсы</li>
                <li>Новости</li>
                <li>Вопросы</li>
                <li>Блог</li>
                <li>О нас</li>
            </ul>
        </div>
        <div id="main1">
            r
        </div>
    </body>
</html>

CSS:

spoiler

html,
body {
    margin:0;   
    padding:0; 
    background-color:#dcdcdc;
}
header {
    background-color:white;
    width:100%;
    height:50px;
    position:fixed;
}
.page-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

JS

spoiler

$(function(){

   $('#menu').on('click', function(){

      $('#main').toggleClass('menu-open');

      $('#main1').toggleClass('menu-open1');

   });

});

$(function(){

   $('#main1').on('click', function(){

      $('#main').toggleClass('menu-close');

      $('#main1').toggleClass('menu-close1');

   });

});

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 17 часов назад
- 89 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 20 часов назад
- 107 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 79 просмотров
0

ответов
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- вчера
- 89 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- вчера
- 1094 просмотра
2

ответа
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 30 апр.
- 46 просмотров
0

ответов
CSS

Простой
Как применить свойство к псевдоэлементу?
- 3 подписчика
- 29 апр.
- 232 просмотра
2

ответа
HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- 28 апр.
- 49 просмотров
1

ответ
HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 28 апр.
- 71 просмотр
1

ответ
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Перенести 9 страниц сайта из песочницы на бой

02 мая 2024, в 10:01

15000 руб./за проект

Скрипт регистрации и организации личного кабинета посетителя

02 мая 2024, в 09:26

10000 руб./за проект

Подключить платежку и црм к интернет-магазину на modX

02 мая 2024, в 09:12

5000 руб./за проект

BD_ l3ftoverZ!, HTML
spoiler
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <header class="page-header"> <div id="menu"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <nav class="page-header__menu"> <a href="https://"><h1>_a_g</h1></a> </nav> <div class="page-header__logout"> <a href="/"> <img src="https://svgshare.com/i/Cqb.svg" alt="" height="22"/> </a> </div> </header> <div id="main"> <ul> <li>Курсы</li> <li>Новости</li> <li>Вопросы</li> <li>Блог</li> <li>О нас</li> </ul> </div> <div id="main1"> r </div> </body> </html>

CSS:
spoiler
html, body { margin:0; padding:0; background-color:#dcdcdc; } header { background-color:white; width:100%; height:50px; position:fixed; } .page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }

JS
spoiler
$(function(){ $('#menu').on('click', function(){ $('#main').toggleClass('menu-open'); $('#main1').toggleClass('menu-open1'); }); }); $(function(){ $('#main1').on('click', function(){ $('#main').toggleClass('menu-close'); $('#main1').toggleClass('menu-close1'); }); });

Answer 1 · 2019-05-04 09:43:53

Максим @LenovoId

svg, css,js

https://codepen.io/topicstarter/pen/KLPeNP вот так ?

Ответ написан более трёх лет назад

Комментировать

Как сделать выпадающее меню как на Тостере или на Хабре?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт