改進Bootstrap中的響應式側邊欄
阿新 • • 發佈:2019-02-17
側邊欄在響應式設計中起到很大的作用,當螢幕小到手機的螢幕時,能夠自適應螢幕大小的側邊欄固然能夠為網站新增色彩,那麼在Bootstrap的框架中提供了導航條和下拉選單的元件,詳情請自行到官網Bootstrap的文件檢視,這裡就不作介紹了。
本文是將其中的導航條和下拉選單進行結合,然後設計並改進了側邊欄的製作。
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> <!-- 導航條內容 --> <div class="collapse navbar-collapse" id="side-menu"> <ul class="nav navbar-nav" id="side-item"> <li><a href="#">後端開發</a></li> <li><a href="#">資料庫</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端開發 <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="#">移動開發</a></li> <li><a href="#">視覺設計</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; } }