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

Question

Alex Blinov @CEPII

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

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

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

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

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');

   });

});

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

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик + ИИ

9 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

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

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

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

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

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

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

HTML

+1 ещё

Средний
Как выставить элементу ширину по содержимому при переносах?
- 1 подписчик
- 30 июн.
- 151 просмотр
1

ответ
HTML

+3 ещё

Средний
Как создать каркас верстки который будет считаться по высоте, а не по ширине?
- 4 подписчика
- 26 июн.
- 349 просмотров
3

ответа
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 191 просмотр
1

ответ
HTML

+1 ещё

Простой
Как оформить так карточку типа бенто стиль?
- 1 подписчик
- 13 июн.
- 232 просмотра
3

ответа
CSS

Простой
Как убрать «треугольник» от скролла?
- 1 подписчик
- 12 июн.
- 194 просмотра
1

ответ
CSS

Простой
Как сделать background изображение темнее и более размытым, как в дизайне?
- 1 подписчик
- 29 мая
- 165 просмотров
1

ответ
CSS

+1 ещё

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

ответа
CSS

Простой
Почему @media запрос не работает?
- нет подписчиков
- 22 мая
- 146 просмотров
1

ответ
HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 2 подписчика
- 21 мая
- 193 просмотра
2

ответа
CSS

Простой
Как добиться одинаковой ширины для определеных блоков в гриде?
- 1 подписчик
- 15 мая
- 160 просмотров
1

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

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 вот так ?

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

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

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

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

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

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