移動尺寸和桌面上的不同導航欄樣式

Question

我正在嘗試為自己的網站實現一種類似的導航樣式，就像在WordPress上名為Enliven的模板上看到的那樣（請參見此處-http: //themezhut.com/demo/enliven/ ）。 該模板似乎有2個不同的導航...在移動設備中，導航並沒有固定在頂部，而是在單擊時擴展了。.當992px或更寬時，導航在頂部擴展並在滾動時固定。

有人可以幫我實現這樣的導航嗎？ 可能會指出正確的方向？ 我試圖對Bootstrap 3更加熟悉，但是主要學習了有關Bootstrap 4的課程。

謝謝！ :)

Answer 1

添加滾動事件偵聽器可以正常工作。 因此，您只需添加一個功能即可在滾動時更改導航的樣式。 因此，例如，您更改背景顏色，顏色，高度，...

Answer 2

 $(document).ready(function() { if (document.documentElement.clientWidth > 480) { $("#menu").addClass("navbar-fixed-top"); } else { $("#menu").removeClass("navbar-fixed-top"); } });

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav id="menu" class="navbar navbar-inverse "> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a> </li> <li><a href="#">Page 1-2</a> </li> <li><a href="#">Page 1-3</a> </li> </ul> </li> <li><a href="#">Page 2</a> </li> <li><a href="#">Page 3</a> </li> </ul> </div> </div> </nav> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> <p>abc</p> </body> </html>

Answer 3

有效的bootply鏈接： http : //www.bootply.com/105915#

您必須將按鈕類用於按鈕切換折疊，以在單擊按鈕和媒體查詢時切換導航菜單，以僅在小屏幕上顯示按鈕

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header navbar-right">
        <p class="navbar-text">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>


//css

body {
    padding-top:70px;
}

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Answer 4

我在這里回答了一個非常類似的問題

使用Bootstrap，可以使用ScrollSpy組件“監視”滾動位置並在滾動位置達到特定點時更改樣式，從而完成這種導航欄。 您最終得到2種不同的nabvar樣式。

   /* navbar style once attached to the page */ 
   .affix {
         background-color: black;   
    }

    @media (min-width:768px) {
        .affix-top {
          /* initial navbar style at top */
          background-color:transparent;
          border-color:transparent;
          padding: 15px; 
        }
    }

演示： http ： //www.codeply.com/go/xp2fY6sVHP

移動尺寸和桌面上的不同導航欄樣式

問題描述

4 個解決方案

解決方案1
0 2017-01-12 06:42:30

解決方案2
0 2017-01-12 06:44:10

解決方案3
0 2017-01-12 07:03:55

解決方案4
0 2017-01-17 13:32:40

移動尺寸和桌面上的不同導航欄樣式

問題描述

4 個解決方案

解決方案1 0 2017-01-12 06:42:30

解決方案2 0 2017-01-12 06:44:10

解決方案3 0 2017-01-12 07:03:55

解決方案4 0 2017-01-17 13:32:40

解決方案1
0 2017-01-12 06:42:30

解決方案2
0 2017-01-12 06:44:10

解決方案3
0 2017-01-12 07:03:55

解決方案4
0 2017-01-17 13:32:40