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()">&times;</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()">&#9776; 打開</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中的錯誤處理全面指南
在JavaScript開發(fā)中,錯誤處理是一個不可忽視的重要環(huán)節(jié),本文將深入探討JavaScript中的錯誤處理機(jī)制,包括錯誤的類型、捕獲與拋出錯誤的方法,需要的可以參考下
2024-10-10
JavaScript面試題大全(推薦)
在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
數(shù)組Array的一些方法(總結(jié))
下面小編就為大家?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)識符方式的演變
本文記錄下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框架示例詳解
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-11-11