js+css實現(xiàn)全屏側邊欄
更新時間：2020年06月16日 08:16:41 作者：馬子日
這篇文章主要為大家詳細介紹了js+css全屏側邊欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)全屏側邊欄的具體代碼，供大家參考，具體內容如下
在瀏覽網(wǎng)站時我們經(jīng)常會看到一個菜單按鈕，點一下就會出現(xiàn)一欄側邊導航欄，直接上代碼！
HTML部分
<div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>全屏幕側邊欄</h2> <p>點擊以下菜單圖標打開側邊欄</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ 打開</span>
css部分
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;width: 0;position: fixed;z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; text-align:center;
}
.sidenav a {
padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px;color: #818181; display: block; transition: 0.3s;
}
.sidenav a:hover{ color: #f1f1f1;
}
.sidenav .closebtn {position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;
}
@media screen and (max-height: 450px)
{ .sidenav {padding-top: 15px;
}
.sidenav a {font-size: 18px;
}
}
JavaScript部分
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在JS中，window.opener只是對彈出窗口的母窗口的一個引用。本篇文章主要是對js中opener的使用進行了詳細介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
Div+CSS+JS樹型菜單，可刷新...2006-07-07
這篇文章主要給大家介紹了關于利用JS十分鐘判斷數(shù)組中存在元素的多種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)大文件分片上傳處理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Bootstrap中輪播圖插件叫作Carousel ，下面通過本文給大家詳細介紹了bootstrop中實現(xiàn)輪播圖效果，需要的朋友參考下2017-06-06
這篇文章主要給大家介紹了關于js手寫貪吃蛇游戲的相關資料,貪吃蛇游戲是一款經(jīng)典的游戲,在很多平臺上都有出現(xiàn),文中給出了詳細源代碼,需要的朋友可以參考下2023-09-09
js實現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運行時間功能的代碼3例
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運行時間功能的代碼3例,需要的朋友可以參考下2014-04-04
js 將canvas生成圖片保存,或直接保存一張圖片的實現(xiàn)方法
下面小編就為大家分享一篇js 將canvas生成圖片保存,或直接保存一張圖片的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了純原生js實現(xiàn)貪吃蛇游戲的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
微信小程序全局變量改變監(jiān)聽的實現(xiàn)方法
這篇文章主要給大家介紹了關于微信小程序全局變量改變監(jiān)聽的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07