Bootstrap меню и гамбургер вместе

Каков наилучший способ в Bootstrap4 отображать меню и меню гамбургеров вместе (на панели навигации)? Идея — менее важные элементы меню через гамбургер-меню. Спасибо за любую помощь! Джерард

Спасибо, что приняли мой ответ :) Надеюсь, это помогло. Также найдите секунду, чтобы проголосовать за.. Чтобы другие разработчики могли извлечь выгоду :) Happy Coding Mate

Imran Rafiq Rather 05.01.2021 14:39
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
296
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Проверьте этот пример и попробуйте адаптировать его к вашему случаю:

codepen.io/Plagu33/pen/yoNOJw

Где твой пример?

Joël A 21.12.2020 12:31

Отредактировано.. проверьте сейчас

Mohcin Bounouara 21.12.2020 12:31

Спасибо за вашу помощь! Я имел в виду часть расширенного меню и часть (менее часто используемые варианты) в виде гамбургера. Это возможно?

Gerard 23.12.2020 10:14

Пример меню гамбургера Вы можете посмотреть на getbootstrap.com:

<

nav class = "navbar navbar-inverse navbar-static-top" role = "navigation">
  <div class = "container">
    <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">
        <li><a href = "index.php">Home</a></li>
        <li><a href = "about.php">About</a></li>
        <li><a href = "#portfolio">Portfolio</a></li>
        <li><a href = "#">Blog</a></li>
        <li><a href = "contact.php">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
Ответ принят как подходящий

Если вы зайдете на официальный сайт bootstrap. https://getbootstrap.com/docs/4.0/components/navbar/ , примеров навбара очень много.

Основная идея - точка останова экрана. Чтобы решить, на какой точке останова показывать значок hamburger.

В bootstrap-4 это контролируется служебным классом navbar-expand-X. Так что, если мы хотим показать наш значок гамбургера, когда размер экрана средний и ниже, мы будем использовать navbar-expand-md на родительском элементе nav.

<nav class = "navbar navbar-expand-md navbar-light bg-light">...</nav>

Bootstrap предоставит свои собственные стили для панели навигации, которые мы затем можем переопределить нашими собственными стилями в зависимости от наших требований.

Другие вопросы по теме