利用js編寫響應式側邊欄

更新時間：2021年10月18日 11:08:23 作者：u010297791

這篇文章主要為大家詳細介紹了利用js編寫響應式側邊欄的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

為了練手，自己學敲網(wǎng)站時剛好碰到需要制作側邊欄，在網(wǎng)上也查了各種插件以及框架都可以實現(xiàn)這個功能，但是想自己學著用js原生學一個試試，于是就初略完成了側邊欄的實現(xiàn)，可以讓初學者參考參考，代碼能力有限。

其中主要設計的就是animate（）函數(shù)，animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動畫效果。只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）。更多的使用請自己去搜索，我就不具體介紹了。另外就是利用了媒體查詢的方法，通過檢測當前設備的屏幕大小進行調(diào)整側邊欄的大小設計。媒體查詢的方法可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面。

接下來是具體的實現(xiàn)，附上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
 <title>側邊欄</title>
 <link href="css/sideBar.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="nav-icon">
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
 <div class="content">側邊欄內(nèi)容</div>
 <div class="sideBar">
 <div class="sideBar-left">
 <div class="divider"></div>
 <div class="body-content">
  <div class="messageWarning item">
  <div><i class="message_icon"></i>消息提醒</div>
  <ul>
  <li class="news">
  <i class="circle"></i><a href="javascript:void()">消息1</a>
  </li>
  <li class="news">
  <i class="circle"></i><a href="javascript:void()">消息2</a>
  </li>
  <li class="news">
  <i class="circle"></i><a href="javascript:void()">消息3</a>
  </li>
  <li class="news">
  <i class="circle"></i><a href="javascript:void()">消息4</a>
  </li>
  </ul>
  </div>
  <div class="course item">
  <div><i class="icon"></i>課程</div>
  <ul>
  <li class="myInfo">
  <i class="circle"></i><a href="javascript:void()">我的課程</a>
  </li>
  <li class="Dynamic">
  <i class="circle"></i><a href="javascript:void()">課程動態(tài)</a>
  </li>
  <li class="question">
  <i class="circle"></i><a href="javascript:void()">問題空間</a>
  </li>
  <li class="homework">
  <i class="circle"></i><a href="javascript:void()">課程作業(yè)</a>
  </li>
  </ul>
  </div>
  <div class="myHome item">
  <a href="javascript:void()">
  <i class="home_icon"></i>我的主頁
  </a>
  </div>
  <div class="exit item">
  <a href="javascript:void()">
  <i class="exit_icon"></i>退出
  </a>
  </div>
 </div> 
 </div>
 <div class="sideBar-right"></div>
 </div> 
 </div>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/sideBar.js"></script>
</html>

js實現(xiàn)：

$(function(){

 var windowWidth = $(window).width();
 var windowHeight = $(window).height();
 var sideBarWidth = windowWidth*0.8;
 //設置側邊欄左邊寬度與右邊高度
 $(".sideBar-left").height(windowHeight);
 $(".sideBar-right").height(windowHeight);
 //側邊欄由左向右滑動
 $(".nav-icon").on("click",function(){
 $(".sideBar").animate({left: "0"},350);
 });
 //點擊退出，側邊欄由右向左滑動
 $(".exit").on("click",function(){
 $(".sideBar").animate({left: "-100%"},350);
 });

})

css設計：

*{
 margin: 0;
}
a{
 color: #fff;
 text-decoration: none;
}
.container{
 width: 100%;
 height: 100%;
 min-width: 280px;
 position: relative;
}
.header{
 background: #0C7AB3;
 list-style: none;
}
.nav-icon{
 width: 30px;
 background: #0C7AB3;
 padding: 8px;
}
.nav-icon span{
 display: block;
 border: 1px solid #fff;
 margin: 4px;
 width: 20px;
}
.nav-icon:hover{
 cursor: pointer;
}
.sideBar{
 width: 100%;
 position: absolute;
 top: 0px;
 left: -100%;
}
.sideBar-left{
 width: 75%;
 background: #fff;
 float: left;
 background-color: #343A3E;
}
.sideBar-left .divider{
 width: 80%;
 height: 6px;
 margin-top: 30px;
 padding-left: 15px;
 background-color: #3099FF;
}
.sideBar-left .body-content{
 width: 80%;
 margin-top: 15px;
 padding: 15px 0 15px 15px;
 border-top: 2px solid #3099FF;
 color: #EFEFEF;
}
.body-content .item{
 margin: 4px;
}
.item ul{
 list-style: none;
 margin-left: -24px;
}
.item ul li{
 margin:8px;
}
.item .circle{
 width: 10px;
 height: 10px;
 margin-right: 10px;
 border-radius: 50%;
 background-color: #3099FF;
 display: inline-block;
}
.sideBar-right{
 width:25%;
 display: inline-block;
 background-color: rgba(0, 0, 0, 0.5);
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: