這篇文章主要為大家展示了“angularjs+bootstrap菜單怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angularjs+bootstrap菜單怎么用”這篇文章吧。

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)固原免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

需求背景：

使用yo angular生成的項(xiàng)目默認(rèn)主頁是這樣的：

body部分涉及具體的業(yè)務(wù)內(nèi)容，后續(xù)研究。這里主要研究菜單項(xiàng)、頁眉的處理。

頁腳處理：

自動(dòng)生成的項(xiàng)目中，菜單和頁腳設(shè)置都是在index.html文件中實(shí)現(xiàn)的。

# index.html
  <div class="footer">
   <div class="container">
    <p><span class="glyphicon glyphicon-heart"></span> 京東金融·杭州研發(fā)中心</p>
   </div>
  </div>

設(shè)置css格式：

/* Custom page footer */
.footer {
 padding-top: 20px;
 color: rgba(204, 3, 8, 0.91);
 border-top: 1px solid #e5e5e5;
 text-align: center;
}
 .container {
  max-width: 730px;
  margin-left: auto;
  margin-right: auto;
 }

上述截圖還可見頁面格式問題，是因?yàn)閯?chuàng)建工程時(shí)，沒有依賴bootstrap還有compass，項(xiàng)目根目錄下安裝相關(guān)依賴即可：

bower install compass --save
bower install bootstrap --save

菜單處理：

菜單功能主要在index.html文件中的header代碼段實(shí)現(xiàn)。

  <div class="header">
   <div class="menu">
    <nav class="navbar navbar-default" role="navigation">
     <div class="navbar-header">
      <!--![](images/jdjr.jpg)-->
     </div>

     <div class="collapse navbar-collapse" id="">
      <ul class="nav navbar-nav">
       <li class="active dropdown">
        <a class="dropdown-toggle" href="#" rel="external nofollow" data-toggle="dropdown">網(wǎng)關(guān)信息</a>
        <ul class="dropdown-menu">
         <li><a href="">NAT網(wǎng)關(guān)</a></li>
         <li><a href="">ROUTER網(wǎng)關(guān)</a></li>
        </ul>
       </li>
      </ul>
     </div>
    </nav>
   </div>
  </div>

這些class設(shè)置了默認(rèn)屬性，所以能夠呈現(xiàn)出較為友好的樣式，所以如果使用自定義類名，那樣式需要自己設(shè)置。如果需要鼠標(biāo)移動(dòng)到菜單上就能夠顯示子菜單，則需要設(shè)置css屬性。

.dropdown:hover .dropdown-menu {
 display: block;
}

菜單增加跳轉(zhuǎn)：

菜單的跳轉(zhuǎn)主要通過href實(shí)現(xiàn)，如下代碼就是操作日志菜單跳轉(zhuǎn)到/oplog頁面：

<li><a href="#!/oplog" rel="external nofollow" >操作日志</a></li>

然后需要在app.js中增加相關(guān)控制代碼：

   .when('/oplog', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl',
    controllerAs: 'about'
   })

由于這里我重用了項(xiàng)目初始化時(shí)就生成的about.html代碼，所以，不需要開發(fā)相關(guān)html文件，實(shí)際開發(fā)中這個(gè)跳轉(zhuǎn)后的網(wǎng)頁是需要自己在views目錄下創(chuàng)建并開發(fā)頁面的，同時(shí)需要在controllers目錄下開發(fā)相關(guān)控制（此處就為AboutCtrl.js）代碼。

菜單效果：

以上是“angularjs+bootstrap菜單怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：angularjs+bootstrap菜單怎么用
URL分享：http://jinyejixie.com/article14/podhge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)