Бургер меню должен открыватся вверх а не вниз

@valera_web · Регистрация: 12.07.2016

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

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

Есть навбра (бургер меню), когда его открываю елементы отображаются вниз, а нужно сделать вверх ((
Не знаю как это сделать то как с js вообще не работал.

В JS Файле бутстрапа нашел где идет работа с тем классом
Вроде вот.. но могу ошибаться

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $(document.createElement('div'))
          .addClass('dropdown-backdrop')
          .insertAfter($(this))
          .on('click', clearMenus)
      }
 
      var relatedTarget = { relatedTarget: this }
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
 
      if (e.isDefaultPrevented()) return
 
      $this
        .trigger('focus')
        .attr('aria-expanded', 'true')
 
      $parent
        .toggleClass('open')
        .trigger($.Event('shown.bs.dropdown', relatedTarget))
    }

Всем добра!

@valera_web · 19.07.2016, 02:06 **[ТС]**

Либо может что - то в css// ((
вообще не понимаю (

@BANO · 19.07.2016, 02:12

мне кажется вы не понимаете как там это работает всё...

в общем, нужно этому меню дать position: absolute; bottom: 0;
и тогда, может быть, маловероятно, бутстрап даст вам возможность послать его нафиг... но это маловероятно

@valera_web · 19.07.2016, 15:07 **[ТС]**

Частично понимаю.. но тут вообще тупняк (
пару дней только с этим..
Нет задавал разным классам эти параметры, не подходит..
(

Это html моего меню (может какой-то класс нужно добавить ? )

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 <nav class="navbar navbar-default" role="navigation">
 
                            <!-- Само бургер меню -->
                            <div class="navbar-header ">
                              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only ">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button>
                            </div>
 
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                             
                              <ul class="nav navbar-nav center-s">
                                <li class=""><a href="#">О нас</a></li>
                                <li><a href="#">Доставка</a></li>
                                <li><a href="#">Оплатаа</a></li>
                                <li><a href="#">Как оформить заказ</a></li>
                                <li><a href="#">Контакты</a></li>
                              </ul>
                            </div><!-- /.navbar-collapse -->
 
                        </nav>

Добавлено через 12 часов 40 минут
Доброго времени суток, решил данный вопрос..
нужно было немного поправить стили, и самым главным поменять местами строчки в html коде!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <nav class="navbar navbar-default" role="navigation">
 
                             
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                             
                              <ul class="nav navbar-nav center-s">
                                <li class=""><a href="#">О нас</a></li>
                                <li><a href="#">Доставка</a></li>
                                <li><a href="#">Оплатаа</a></li>
                                <li><a href="#">Как оформить заказ</a></li>
                                <li><a href="#">Контакты</a></li>
                              </ul>
                            </div><!-- /.navbar-collapse -->
 <!-- Само бургер меню -->
                            <div class="navbar-header ">
                              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only ">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button>
                            </div>
                        </nav>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты 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 - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@valera_web 1 / 1 / 0 Регистрация: 12.07.2016 Сообщений: 57
	19.07.2016, 02:06 [ТС]
	Либо может что - то в css// (( вообще не понимаю ( 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	19.07.2016, 02:12
	мне кажется вы не понимаете как там это работает всё... в общем, нужно этому меню дать `position: absolute; bottom: 0;` и тогда, может быть, маловероятно, бутстрап даст вам возможность послать его нафиг... но это маловероятно 0