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

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

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

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 189 просмотров
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 109 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 110 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 80 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 101 просмотр
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 88 просмотров
2

ответа
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 61 просмотр
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 104 просмотра
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Изменить существующий индикатор на Pine Scripts

26 нояб. 2024, в 01:01

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

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

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

Разработка мобильного приложения с дополненной реальностью (AR)

25 нояб. 2024, в 23:32

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

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

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

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

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

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

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

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