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

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

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

Imran Rafiq Rather 05.01.2021 14:39
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Разница между тегами Br и Wbr в HTML 5
Разница между тегами Br и Wbr в HTML 5
В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...
HTML И VS CODE Для Веб-разработки
HTML И VS CODE Для Веб-разработки
Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...
Как использовать WAI-ARIA
Как использовать WAI-ARIA
В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...
Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.
Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.
Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...
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 предоставит свои собственные стили для панели навигации, которые мы затем можем переопределить нашими собственными стилями в зависимости от наших требований.

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