前面介紹的都是使用Bootstrap框架制作一級(jí)導(dǎo)航,但很多時(shí)候,在Web頁(yè)面中是離不開(kāi)二級(jí)導(dǎo)航的效果。那么在Bootstrap框架中制作二級(jí)導(dǎo)航就更容易了。只需要將li當(dāng)作父容器,使用類名“dropdown”,同時(shí)在li中嵌套另一個(gè)列表ul,使用前面介紹下拉菜單的方法就可以:
<ul class="nav nav-pills"> <li class="active"><a href="##">首頁(yè)</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> … </ul> </li> <li><a href="##">關(guān)于我們</a></li> </ul>
運(yùn)行效果如下:
通過(guò)瀏覽器調(diào)試工具,不難發(fā)現(xiàn),點(diǎn)擊有二級(jí)導(dǎo)航的菜單項(xiàng),會(huì)自動(dòng)添加“open”類名,再次點(diǎn)擊就會(huì)刪除添加的“open”類名:
簡(jiǎn)單點(diǎn)來(lái)說(shuō),就是依靠這個(gè)類名來(lái)控制二級(jí)導(dǎo)航顯示與否,并且設(shè)置了背景色和邊框:
/*源碼查看bootstrap.css文件第3479行~3484行*/
.nav .open > a, .nav .open >a:hover, .nav .open >a:focus { background-color: #eee; border-color: #428bca; }
大家回憶一下,在制作下拉菜單時(shí),可以用分隔線,那么在二級(jí)導(dǎo)航中是否可以呢?我們一起來(lái)看看:
不用再說(shuō)太多,只需要添加“<li class=”nav-divider”></li>”這樣的一個(gè)空標(biāo)簽就可以了。
運(yùn)行效果如下:
/*源碼請(qǐng)查看bootstrap.css文件第3485行~第3490行*/
.nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
我來(lái)試試;完成下面任務(wù)
編寫(xiě)代碼實(shí)現(xiàn)“tab型二級(jí)導(dǎo)航”,效果圖如下:
備注:這一小節(jié)沒(méi)有正確性驗(yàn)證,請(qǐng)查看結(jié)果窗口與任務(wù)所給的結(jié)果圖片是否一致,從而判斷輸入代碼是否正確。
參考代碼:
<ul class="nav nav-tabs"> <li class="active"><a href="##">首頁(yè)</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li class="nav-divider"></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> </li> <li><a href="##">關(guān)于我們</a></li> </ul>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)