使引導導航欄成為小屏幕上的下拉菜單

Question

我正在使用引導導航欄，我希望它成為一個導航欄，當它顯示在小屏幕上時，它在左側帶有導航欄品牌，在右側帶有列表項。 現在我有一個很好的工作導航欄，但是當它被調整到一個非常小的尺寸時，右邊沒有下拉菜單，列表項完全消失了。 並且導航欄品牌存在問題，我想在顯示下拉列表的同時更改其樣式。 我考慮過使用@media但有更簡單的解決方案嗎？

這是 html：

  <nav class="navbar navbar-transparent" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" 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>
                        <span class="navbar-brand">All kinds of pizza</span>
                    </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 class="btn">All</li>
                            <li class="btn">Meat taste</li>
                            <li class="btn">Pineapple taste</li>
                            <li class="btn">Mushroom taste</li>
                            <li class="btn">Seafood taste</li>
                            <li class="btn">Vegetarian</li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>

這是更少：

.navbar-nav
{
  width: 100%;
  text-align: center;

  > li
  {
    float: none;
    display: inline-block;
  }
}

.navbar-header
{
  float: left;
  padding: 15px;
  text-align: center;
  width: 100%;

  .navbar-brand
  {
    font:@mainFont;
    font-size: 40px;
    color: white;
    text-shadow: @shadowToGoOverText;
  }
}
.navbar-brand {float:none;}

.navbar-inner
{
  background:transparent;
}

.navbar-nav
{
  li
  {
    color: white;
    font: @mainFont;
    border: @mainBorder;
    border-color: transparent;
    text-shadow: @shadowToGoOverText;
  }

  li:hover
  {
    color: @mainColor;
    border-color: @borderColor;
    border-radius: @generalRoundness;
    background-color: white;
    text-shadow: none;
  }

以及它的常數：

//borders

@mainBorder: 4px dashed #407a15;
@generalRoundness: 15px 0px 0px 15px;
@borderColor: #407a15;

//text
@mainFont: bold 25px Tahoma;
@shadowToGoOverText: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;

如果我的代碼似乎讓您感到困惑，請隨時從頭開始編寫導航欄，然后我會將其中的一部分集成到我自己的代碼中。

Answer 1

我使用一個導航欄和兩個“ul”元素，一個有 display:none，使用 javascript 檢測顯示寬度大小，並只顯示一個“ul”元素，改變顯示屬性。

 function detectDisplay(){ var displayWidth = window.screen.width; changeMenu(displayWidth); } // show a specific menu according to the display size function changeMenu(displayWidt) { if (displayWidt < 576) { document.getElementById("menu1").style.display = "none"; document.getElementById("menu2").style.display = ""; } else if (displayWidt > 575) { document.getElementById("menu1").style.display = ""; document.getElementById("menu2").style.display = "none"; } }

HTML

 <body onresize="detectDisplay();" onload="detectDisplay();"> <form id="form1" runat="server"> <div class="container-fluid imgBackground"> <!-- menu bar --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark" style="margin:0 -15px;"> <asp:Label ID="Label1" runat="server" Text="UndergroundCR" CssClass="navbar-brand"></asp:Label> <!-- menu 1 --> <ul id="menu1" class="navbar-nav ml-auto" style="display:none;"> <li class="nav-item active "> <a class="nav-link" href="index.aspx">Inicio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Nuestros Servicios</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Precios</a> </li> </ul> <!-- menu 2 --> <ul id="menu2" class="navbar-nav ml-auto" style="display:none;"> <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 </a> <div class="dropdown-menu" 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> </nav> </div> </div> </body>

注意：僅在 Firefox v76 上測試

使引導導航欄成為小屏幕上的下拉菜單

問題描述

1 個解決方案

解決方案1
0 2020-04-29 21:53:53

使引導導航欄成為小屏幕上的下拉菜單

問題描述

1 個解決方案

解決方案1 0 2020-04-29 21:53:53

解決方案1
0 2020-04-29 21:53:53