Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版
側(cè)邊欄在響應(yīng)式設(shè)計中起到很大的作用,當(dāng)屏幕小到手機(jī)的屏幕時,能夠自適應(yīng)屏幕大小的側(cè)邊欄固然能夠為網(wǎng)站添加色彩,那么在Bootstrap的框架中提供了導(dǎo)航條和下拉菜單的組件,詳情請自行到官網(wǎng)Bootstrap的文檔查看,這里就不作介紹了。
本文是將其中的導(dǎo)航條和下拉菜單進(jìn)行結(jié)合,然后設(shè)計并改進(jìn)了側(cè)邊欄的制作。
html:
<div class="container"> <nav class="navbar navbar-default mynavbar"> <div class="container-fluid"> <!--按鈕--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed btn-sider" data-toggle="collapse" data-target="#side-menu" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- 導(dǎo)航條內(nèi)容 --> <div class="collapse navbar-collapse" id="side-menu"> <ul class="nav navbar-nav" id="side-item"> <li><a href="#">后端開發(fā)</a></li> <li><a href="#">數(shù)據(jù)庫</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端開發(fā) <span class="caret"></span></a> <!--下拉菜單按鈕--> <ul class="dropdown-menu"> <li><a href="#">HTML/CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">node.js</a></li> </ul> </li> <li><a href="#">移動開發(fā)</a></li> <li><a href="#">視覺設(shè)計</a></li> <li><a href="#">云計算</a></li> </ul> </div> </div> </nav> </div>
css:
.mynavbar{ background-color: #fff; border:none; } .navbar-header,#side-item{ background-color: #0b3558; } #side-menu>ul>li>a{ color:#fff; font-size: 18px; font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } #side-menu>ul{ width: 100%; } #side-menu>ul>li{ text-align: center; width: 16%; margin-left: 5px; } #side-menu .dropdown-menu { border: none; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } #side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover { color: #24b0ff; text-decoration: none; background-color: transparent; } .btn-sider{ float: left; border:none; outline: none; margin-left: 10px; } .mynavbar .btn-sider .icon-bar{ background-color:#fff; width:23px; height:3px; } .mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover { background-color: transparent; } @media (max-width: 768px) { .container { padding-left: 0px; } #side-menu{ border: none; } #side-item{ background: rgba(43, 54, 67, 0.97); } #side-menu>ul { margin-top: 0px; margin-right: 0px; margin-left: -15px; margin-bottom: 0px; width: 40%; height: 999px; } #side-menu>ul>li { text-align: left; width:100%; margin-left:0px; } #side-menu>ul>li a{ font-size:16px; } #side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{ background-color: #38a99c; color:#fff; } #side-menu .dropdown-menu{ box-shadow:none; } #side-menu .dropdown-menu li a{ padding-top:10px; color:#fff; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
如果大家還想深入學(xué)習(xí),可以點擊這里進(jìn)行學(xué)習(xí),再為大家附兩個精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- Bootstrap實現(xiàn)響應(yīng)式導(dǎo)航欄效果
- BootStrap實現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機(jī)屏幕瀏覽時自動折疊隱藏)
- 20分鐘成功編寫bootstrap響應(yīng)式頁面 就這么簡單
- Bootstrap實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片
- 談一談bootstrap響應(yīng)式布局
- BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實例代碼
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- 利用ASP.NET MVC和Bootstrap快速搭建響應(yīng)式個人博客站(一)
- bootstrap響應(yīng)式工具使用詳解
相關(guān)文章
腳本吧 - 幻宇工作室用到j(luò)s,超強推薦expand.js
腳本吧 - 幻宇工作室用到j(luò)s,超強推薦expand.js...2006-12-12Clipboard.js 無需Flash的JavaScript復(fù)制粘貼庫
這篇文章主要介紹了JavaScript 內(nèi)容復(fù)制(無需flash) Clipboard.js使用方法,需要的朋友可以參考下2015-10-10