使用bootstrap制作響應式導航欄

所謂響應式導航欄，便是能根據窗體大小适配的導航欄，以前見着覺得很進階，而現在終于有機會自己寫一個了，先上幾張效果圖。

這是正常螢幕：

這是手機等小螢幕：

點選右邊後能夠顯示出菜單

要實作這個效果，首先要先導入bootstrap架構

還有很重要的一點，一定記得加上下面這句話，否則當螢幕變小時點選那個菜單按鈕不會有反應：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
           

接下來，如果要将其制成響應式的，還需要将它的内容放在 .collapse navbar-collapse裡面。

接下來放代碼了，其中sr-only是給閱讀障礙人士使用的，這不是重點。

重要關注三個地方，data-target，navbar-fixed-top，navbar-right。

data-target：表示這裡将要填充的内容是從哪來的，可以看見代碼中data-target中的id和下面div中的id是一樣的。

navbar-fixed-top：表示導航欄會跟着頁面滾動，不會在頁面往下移後就不見了，相同的還有navbar-fixed-bottom。

navbar-right：這個的作用是将導航欄上的元件定位到最右邊，同樣的還有navbar-left。而至于截圖中為什麼那些選項明明離螢幕最右邊還有點距離呢，因為在上面套了一層 .container。

HTML：

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Comfortaa|Yellowtail" rel="stylesheet">

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
        <span class="sr-only">切換導航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand nav-title">YinyouPoet</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-menu">
      <ul class="nav navbar-nav navbar-right">
        <li class="cative"><a href="#">Home</a></li>
        <li class="cative"><a href="#">About</a></li>
        <li class="cative"><a href="#">Portfolio</a></li>
        <li class="cative"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav> 



<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
           

CSS:

*{
  margin:;
  padding:;
}
.nav-title{
   font-family: 'Abril Fatface', cursive; 
}
.navbar-header .nav-title:hover,
.navbar-header .nav-title:focus{
  background:#fff;
  color:#000;
}

.cative{
  font-family:'Comfortaa', cursive;
}
.navbar-collapse .navbar-nav li a:hover,
.navbar-collapse .navbar-nav li a:focus{
  color:#000;
  background:#fff;
}

           

完整代碼連結：https://codepen.io/yinyoupoet/pen/eRPwXP?editors=1100

歡迎大家加入QQ群一起交流讨論， 「吟遊」程式人生——YinyouPoet