Как происходит переключение на мобильную версию сайта?

Question

[akula22]

Подскажите как происходит переключение на этом сайте www.proleague.de/overview.php на мобильную версию сайта, когда сужаешь размер окна, левое меню переключается на иконки.
Какой код в исходнике за это отвечает, я понимаю что это бутсрап

Comments

[Ankhena]

Это не мобильная версия, это адаптивная верстка с media запросами

[akula22]

при уменьшение ширины появляется вот эта иконка

<ul class="nav pull-left notifcation-center visible-xs" id="main-menu-toggle-wrapper">
                <li class="dropdown"> <a id="main-menu-toggle" href="#main-menu"  class="" >
                    <div class="iconset top-menu-toggle-white"></div>
                    </a> 
                </li>
            </ul>

Но при нажатие на нее ничего не происходит, а должно появлятся меню, в чем причина?

Answer 1

[Игорь]

В загловках страницы есть такое:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Этим мы сообщаем браузеру, что ширина области просмотра страницы равна ширине экрана, а так же запрещаем любое масштабирование страницы.
А далее с помощью CSS вы задаете как будут выглядеть те или иные элементы (или будут скрыты) страницы в зависимости от ширины экрана с помощью медиа запросов @media ...
htmlbook.ru/css/value/media

Comments

[akula22]

при уменьшение ширины появляется вот эта иконка
ul class="nav pull-left notifcation-center visible-xs" id="main-menu-toggle-wrapper

Но при нажатие на нее ничего не происходит, а должно появлятся меню, в чем причина?

[Игорь]

akula22: Где? по той ссылке, что вы указали, по нажатию на это меню, открывается собственно самом меню. Там все работает

[akula22]

а что ответчает за это переключение? я делаю подобный сайт и у меня не работает, не могу понять где в коде за это отвечает

[Игорь]

akula22: за это отвечает в данном случает Bootstrap: getbootstrap.com/components

[akula22]

у меня он подключен

[akula22]

Игорь: у меня джиквери 2.2 а там на сайте 1.8 из-за этого не работает, а 1.8 я не могу использовать, у меня другие функции перестают работать (

Answer 2

[Justin Bieber]

www.proleague.de/assets/css/responsive.min.css

Comments

[akula22]

у меня в коде тоже он есть, а переключения не происходит

[Justin Bieber]

рипнул шаблон но он у тебя не адаптивится?

[akula22]

Justin Bieber: не совсем рипал, просто на базе этого шаблона делаю, диз у меня свой будет

[akula22]

при уменьшение ширины появляется вот эта иконка
ul class="nav pull-left notifcation-center visible-xs" id="main-menu-toggle-wrapper

Но при нажатие на нее ничего не происходит, а должно появлятся меню, в чем причина?

Answer 3

[Андрей Канаев]

В медиа запросе просто текст скрываеться

.page-sidebar .page-sidebar-wrapper > ul li span.title {
    display: none;
}

Comments

[akula22]

при уменьшение ширины появляется вот эта иконка

Но при нажатие на нее ничего не происходит, а должно появлятся меню, в чем причина?

[Андрей Канаев]

akula22: с помощью js добавляешь класс к меню, например active. допустим по умолчанию меню display: none, а с классом active display: block