js+css實(shí)現(xiàn)全屏側(cè)邊欄
更新時(shí)間：2020年06月16日 08:16:41 作者：馬子日
這篇文章主要為大家詳細(xì)介紹了js+css全屏側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)全屏側(cè)邊欄的具體代碼，供大家參考，具體內(nèi)容如下
在瀏覽網(wǎng)站時(shí)我們經(jīng)常會看到一個菜單按鈕，點(diǎn)一下就會出現(xiàn)一欄側(cè)邊導(dǎo)航欄，直接上代碼！
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>全屏幕側(cè)邊欄</h2> <p>點(diǎn)擊以下菜單圖標(biāo)打開側(cè)邊欄</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";
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在JS中，window.opener只是對彈出窗口的母窗口的一個引用。本篇文章主要是對js中opener的使用進(jìn)行了詳細(xì)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
Div+CSS+JS樹型菜單，可刷新...2006-07-07
這篇文章主要給大家介紹了關(guān)于利用JS十分鐘判斷數(shù)組中存在元素的多種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JavaScript實(shí)現(xiàn)大文件分片上傳處理
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)大文件分片上傳處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在bootstrap中實(shí)現(xiàn)輪播圖實(shí)例代碼
Bootstrap中輪播圖插件叫作Carousel ，下面通過本文給大家詳細(xì)介紹了bootstrop中實(shí)現(xiàn)輪播圖效果，需要的朋友參考下2017-06-06
這篇文章主要給大家介紹了關(guān)于js手寫貪吃蛇游戲的相關(guān)資料,貪吃蛇游戲是一款經(jīng)典的游戲,在很多平臺上都有出現(xiàn),文中給出了詳細(xì)源代碼,需要的朋友可以參考下2023-09-09
js實(shí)現(xiàn)網(wǎng)頁倒計(jì)時(shí)、網(wǎng)站已運(yùn)行時(shí)間功能的代碼3例
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁倒計(jì)時(shí)、網(wǎng)站已運(yùn)行時(shí)間功能的代碼3例,需要的朋友可以參考下2014-04-04
js 將canvas生成圖片保存,或直接保存一張圖片的實(shí)現(xiàn)方法
下面小編就為大家分享一篇js 將canvas生成圖片保存,或直接保存一張圖片的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了純原生js實(shí)現(xiàn)貪吃蛇游戲的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
微信小程序全局變量改變監(jiān)聽的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序全局變量改變監(jiān)聽的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07