Как создать полную раскрывающуюся панель навигации с помощью Bootstrap?

Опубликовано: 6 Января, 2022

В Bootstrap 4 NavBar является важным компонентом меню. NavBar содержит так много элементов, как текст, текст ссылки, отключение ссылки, кнопки раскрывающегося списка, формы и т. Д. Чтобы сделать вложенные элементы раскрывающегося списка на всю ширину, можно использовать либо свойства CSS, либо служебные программы Bootstrap 4 по умолчанию. Следующие подходы ясно объяснят:

Подход 1:

  1. В Bootstrap 4 раскрывающееся меню во всю ширину на панели навигации может быть возможно путем добавления свойств CSS либо внутри, либо снаружи в зависимости от удобства. Сосредоточьтесь только на раскрывающемся списке классов и раскрывающемся меню.
  2. Первое раскрывающееся меню фокуса, которое является родительским классом раскрывающегося меню, затем сделайте его статическим по положению следующим образом:
    < style >
    .dropdown {
    position:static !important;
    }
    </ style >
  3. Теперь сделайте верхнее поле выпадающего меню нулевым пикселем и добавьте ширину до 100%.
  4. Затем добавьте тень окна, чтобы выделить выпадающее меню (декоративная цель) следующим образом:
    < style >
    .dropdown-menu {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
    margin-top:0px !important;
    width:100% !important;
    }
    </ style >
  5. Мы также можем использовать свойства CSS с помощью встроенного метода.

Пример 1. Пример ниже иллюстрирует, как создать раскрывающийся список Bootstrap 4 на всю ширину в панели навигации с использованием свойств CSS.

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
" https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " >
< script src =
" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
</ script >
< script src =
" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js " >
</ script >
< script src =
" https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " >
</ script >
< style >
.dropdown {
position: static !important;
}
.dropdown-menu {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
margin-top: 0px !important;
width: 100% !important;
}
</ style >
</ head >
< body >
< div class = "fluid-container" >
< center >
< h1 style = "color:green;padding:13px;" >
GeeksforGeeeks
</ h1 >
< b >Bootstrap 4 full width dropdown in Navbar</ b >
< br >
< br >
< nav class="navbar navbar-expand-lg navbar-dark
justify-content-between text-white"
style = "background-color: green;" >
< a class = "navbar-brand" href = "#" >
< img src =
" https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png "
width = "30" height = "30"
class = "d-inline-block align-top" alt = "" >
GfG BS4 Navbar
</ a >
< button class = "navbar-toggler "
type = "button" data-toggle = "collapse"
data-target = "#navbarNavDropdown01"
aria-controls = "navbarNavDropdown01"
aria-expanded = "false"
aria-label = "Toggle navigation"
style = "outline-color:#fff" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
< div class = "collapse navbar-collapse"
id = "navbarNavDropdown01" >
< ul class = "navbar-nav " >
<!--dropdown item of menu-->
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle"
href = "#" id = "navbarDropdown"
role = "button" data-toggle = "dropdown"
aria-haspopup = "true"
aria-expanded = "false" >
Dropdown 01
</ a >
<!--dropdown sub items of menu-->
< div class = "dropdown-menu"
aria-labelledby = "navbarDropdown" >
< a class = "dropdown-item" href = "#" >
Action 01
</ a >
< a class = "dropdown-item" href = "#" >
Action 02
</ a >
< div class = "dropdown-divider" ></ div >
< a class = "dropdown-item" href = "#" >
More Content here
</ a >
</ div >
</ li >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle"
href = "#" id = "navbarDropdown"
role = "button"
data-toggle = "dropdown"
aria-haspopup = "true"
aria-expanded = "false" >
Dropdown 02
</ a >
<!--dropdown sub items of menu-->
< div class = "dropdown-menu"
aria-labelledby = "navbarDropdown"
style = "max-width: 1366px;" >
< a class = "dropdown-item" href = "#" >
Action 01
</ a >
< a class = "dropdown-item" href = "#" >
Action 02
</ a >
< div class = "dropdown-divider" ></ div >
< a class = "dropdown-item" href = "#" >
More Content here
</ a >
</ div >
</ li >
</ ul >
<!--Form item of menu for search purpose-->
< form class = "form-inline ml-auto " >
< input class = "form-control mr-sm-4"
type = "search" placeholder = "Search"
aria-label = "Search" >
< button class = "btn btn-success my-4 my-sm-2 "
type = "submit" >Search</ button >
</ form >
</ div >
</ nav >
</ center >
</ div >
</ body >
</ html >

Выход:
”

Подход 2:

  1. В Bootstrap 4 раскрывающееся меню во всю ширину на панели навигации возможно с помощью утилит Bootstrap 4.
  2. Подобно подходу 1, сосредоточьтесь только на раскрывающемся списке классов и раскрывающемся меню.
  3. Добавление класса position-static вместе с классом раскрывающегося списка, который является родительским классом раскрывающегося меню, как показано ниже:
    < li class = "nav-item dropdown position-static" >
  4. Теперь добавьте класс w-100, mt-0 вместе с классом раскрывающегося меню следующим образом:
    < div class = "dropdown-menu mt-0 w-100 shadow border-outline-success"
    aria-labelledby = "navbarDropdown" >

Пример 2: В приведенном ниже примере показано, как создать раскрывающийся список Bootstrap 4 на всю ширину в панели навигации с помощью утилит Bootstrap 4.

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
" https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " >
< script src =
" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
</ script >
< script src =
" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js " >
</ script >
< script src =
" https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " >
</ script >
</ head >
< body >
< div class = "fluid-container" >
< center >
< h1 style = "color:green;padding:13px;" >
GeeksforGeeeks
</ h1 >
< b >Bootstrap 4 full width dropdown in Navbar</ b >
< br >
< br >
< nav class="navbar navbar-expand-lg navbar-dark
justify-content-between text-white"
style = "background-color: blue;" >
< a class = "navbar-brand" href = "#" >
< img src =
" https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png "
width = "30" height = "30"
class = "d-inline-block align-top" alt = "" >
GfG BS4 Navbar
</ a >
< button class = "navbar-toggler "
type = "button"
data-toggle = "collapse"
data-target = "#navbarNavDropdown01"
aria-controls = "navbarNavDropdown01"
aria-expanded = "false"
aria-label = "Toggle navigation"
style = "outline-color:#fff" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
< div class = "collapse navbar-collapse"
id = "navbarNavDropdown01" >
< ul class = "navbar-nav " >
<!--dropdown item of menu-->
< li class = "nav-item dropdown position-static" >
< a class = "nav-link dropdown-toggle"
href = "#" id = "navbarDropdown"
role = "button" data-toggle = "dropdown"
aria-haspopup = "true"
aria-expanded = "false" >
Dropdown 01
</ a >
<!--dropdown sub items of menu-->
< div class="dropdown-menu mt-0 w-100
shadow border-outline-success"
aria-labelledby = "navbarDropdown" >
< a class = "dropdown-item" href = "#" >Action</ a >
< a class = "dropdown-item" href = "#" >
Another action
</ a >
< div class = "dropdown-divider" ></ div >
< a class = "dropdown-item" href = "#" >
Something else here
</ a >
</ div >
</ li >
</ ul >
<!--Form item of menu for search purpose-->
< form class = "form-inline ml-auto " >
< input class = "form-control mr-sm-2"
type = "search" placeholder = "Search"
aria-label = "Search" >
< button class = "btn btn-primary my-2 my-sm-0 "
type = "submit" >Search</ button >
</ form >
</ div >
</ nav >
</ center >
</ div >
</ body >
</ html >

Выход:

Ссылка: https://getbootstrap.com/docs/4.0/components/navbar/

Вопросы о Web технологиях Picked HTML-Misc Bootstrap

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023