js+css實(shí)現(xiàn)全屏側(cè)邊欄
更新時間：2020年06月16日 08:16:41 作者：馬子日
這篇文章主要為大家詳細(xì)介紹了js+css全屏側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)全屏側(cè)邊欄的具體代碼，供大家參考，具體內(nèi)容如下
在瀏覽網(wǎng)站時我們經(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)文章
在JavaScript開發(fā)中,錯誤處理是一個不可忽視的重要環(huán)節(jié),本文將深入探討JavaScript中的錯誤處理機(jī)制,包括錯誤的類型、捕獲與拋出錯誤的方法,需要的可以參考下2024-10-10
在javascript開發(fā)中，js面試題是必問的一項(xiàng)，今天小編抽時間給大家整理些js常見的面試題，對js面試題相關(guān)知識感興趣的朋友一起看看吧2016-09-09
javascript面向?qū)ο笾x成員方法實(shí)例分析
這篇文章主要介紹了javascript面向?qū)ο笾x成員方法,實(shí)例分析了成員方法的定義與使用技巧,需要的朋友可以參考下2015-01-01
如何實(shí)現(xiàn)移動端瀏覽器不顯示 pc 端的廣告
隨著移動網(wǎng)絡(luò)的發(fā)展,越來越多的人使用手機(jī)等移動端瀏覽網(wǎng)頁辦公,那么如果在手機(jī)打開頁面的時候顯示大大的聯(lián)盟廣告，用戶體驗(yàn)度會非常差，經(jīng)過一番研究，用下面的方法實(shí)現(xiàn)了移動端瀏覽器不顯示PC端廣告。2015-10-10
下面小編就為大家?guī)硪黄獢?shù)組Array的一些方法(總結(jié))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
淺聊一下Javascript中的數(shù)據(jù)類型和類型轉(zhuǎn)換
在JavaScript中,理解數(shù)據(jù)類型,如何區(qū)分它們,以及它們?nèi)绾伪晦D(zhuǎn)換是至關(guān)重要的,在這篇文章中,我們將探討這些主題,以幫助大家鞏固JavaScript基礎(chǔ)2023-08-08
JavaScript實(shí)現(xiàn)彈性導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)彈性導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
本文記錄下JS中產(chǎn)生標(biāo)識符方式的演變，從ES5到ES6，ES5及其之前是一種方式，只包含兩種聲明（var/function），ES6則增加了一些產(chǎn)生標(biāo)識符的關(guān)鍵字，如 let、const、class。2015-06-06
如何將網(wǎng)頁表格內(nèi)容導(dǎo)入excel
這篇文章主要介紹了如何將網(wǎng)頁表格內(nèi)容導(dǎo)入excel,需要的朋友可以參考下2014-02-02
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11