為了練手,自己學敲網站時剛好碰到需要製作側邊欄,在網上也查了各種插件以及框架都可以實現這個功能,但是想自己學著用js原生學一個試試,於是就初略完成了側邊欄的實現,可以讓初學者參考參考,代碼能力有限。
其中主要設計的是animate()函數,animate() 方法執行 CSS 屬性集的自訂動畫。 此方法透過CSS樣式將元素從一個狀態改變為另一個狀態。 CSS屬性值是逐漸改變的,這樣就可以創造出動畫效果。 只有數字值可建立動畫(例如 "margin:30px")。字串值無法建立動畫(例如 "background-color:red")。更多的使用請自己去搜索,我就不具體介紹了。另外就是利用了媒體查詢的方法,透過偵測目前裝置的螢幕大小來調整側邊欄的大小設計。媒體查詢的方法可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面。
接下來是具體的實現,附上程式碼:
<!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> <p class="container"> <p class="header"> <p class="nav-icon"> <span></span> <span></span> <span></span> </p> </p> <p class="content">侧边栏内容</p> <p class="sideBar"> <p class="sideBar-left"> <p class="pider"></p> <p class="body-content"> <p class="messageWarning item"> <p><i class="message_icon"></i>消息提醒</p> <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> </p> <p class="course item"> <p><i class="icon"></i>课程</p> <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()">课程动态</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()">课程作业</a> </li> </ul> </p> <p class="myHome item"> <a href="javascript:void()"> <i class="home_icon"></i>我的主页 </a> </p> <p class="exit item"> <a href="javascript:void()"> <i class="exit_icon"></i>退出 </a> </p> </p> </p> <p class="sideBar-right"></p> </p> </p> </body> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/sideBar.js"></script> </html>js實作:
$(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);
});
})
#########
*{ 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 .pider{ 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); }
以上是利用js編寫響應式側邊欄實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!