Адаптивное меню

@maketta · Регистрация: 02.04.2016

Студворк — интернет-сервис помощи студентам

Добрый вечер! Создал менюшку для маленьких экранов, но есть проблемы, как их решить ?
Вот пример: http://polynor.com.ua/

JavaScript
1
2
3
4
5
$(document).ready(function() {
    $(".main_mnu_button").click(function() {
        $(".small-mnu").slideToggle();
    });
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.small-mnu ul {
        padding: 0;
        margin: 0;
        background-color: #615865;
        display: none;
        list-style-type: none;
    }
    .small-mnu li {
        display: block;
        text-align: center;
        padding: 10px;
    }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button class="main_mnu_button hidden-lg"><i class="fa fa-bars"></i></button>
 
<div class="col-lg-12">
                    <nav class="main-menu small-mnu hidden-lg">
                        <ul>
                            <li><a href="about/about.html" title="О Полиноре">О Полиноре</a></li>
                            <li><a href="gallery/photo.html" title="Фото и Видео">Фото и Видео</a></li>
                            <li><a href="news/news.html" title="Новости и Акции">Новости и Акции</a></li>
                            <li><a href="article/article.html" title="Статьи">Статьи</a></li>
                            <li><a href="#" title="Где купить">Где купить</a></li>
                            <li><a href="contact/contacts.html" title="Контакты">Контакты</a></li>
                        </ul>
                    </nav>
                </div>

@aj17 · 06.05.2017, 01:16

Сообщение от Denis Landar

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

Вы же используете бутстрап, почему не прикрутить бутстрап компонент для меню?

@KatS13 · 06.05.2017, 04:01

У вас стили неправильно указаны вот тут:
<div class="col-lg-12">
<nav class="main-menu small-mnu hidden-lg">
Здесь получается, что полная строка (12 колонок) выводится только при экране > 1280
А вы в неё вложили мобильное меню.
Укажите стили для меньших разрешений экрана и всё заработает. Вот так:
<div class="col-md-12 col-sm-12 col-xs-12">
<nav class="small-mnu hidden-lg">

@maketta · 06.05.2017, 11:04 **[ТС]**

KatS13, Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@KatS13 0 / 0 / 1 Регистрация: 06.05.2017 Сообщений: 6
	06.05.2017, 04:01
	Сообщение было отмечено Denis Landar как решение Решение У вас стили неправильно указаны вот тут: <div class="col-lg-12"> <nav class="main-menu small-mnu hidden-lg"> Здесь получается, что полная строка (12 колонок) выводится только при экране > 1280 А вы в неё вложили мобильное меню. Укажите стили для меньших разрешений экрана и всё заработает. Вот так: <div class="col-md-12 col-sm-12 col-xs-12"> <nav class="small-mnu hidden-lg"> 0

@maketta 16 / 16 / 9 Регистрация: 02.04.2016 Сообщений: 143
	06.05.2017, 11:04 [ТС]
	KatS13, Спасибо! 0

Адаптивное меню

Решение