angularjs+bootstrap菜單的使用示例代碼

2019-11-19 17:17:16

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

需求背景：

使用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 --savebower 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）代碼。

菜單效果：