快捷導(dǎo)航

js+css實現(xiàn)全屏側(cè)邊欄

更新時間：2020年06月16日 08:16:41 作者：馬子日

這篇文章主要為大家詳細(xì)介紹了js+css全屏側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)全屏側(cè)邊欄的具體代碼，供大家參考，具體內(nèi)容如下

在瀏覽網(wǎng)站時我們經(jīng)常會看到一個菜單按鈕，點一下就會出現(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>點擊以下菜單圖標(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)文章

js opener的使用詳解
在JS中，window.opener只是對彈出窗口的母窗口的一個引用。本篇文章主要是對js中opener的使用進(jìn)行了詳細(xì)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
Div+CSS+JS樹型菜單，可刷新
Div+CSS+JS樹型菜單，可刷新...
2006-07-07
利用JS十分鐘判斷數(shù)組中存在元素的多種方式
這篇文章主要給大家介紹了關(guān)于利用JS十分鐘判斷數(shù)組中存在元素的多種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
JavaScript實現(xiàn)大文件分片上傳處理
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)大文件分片上傳處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
在bootstrap中實現(xiàn)輪播圖實例代碼
Bootstrap中輪播圖插件叫作Carousel ，下面通過本文給大家詳細(xì)介紹了bootstrop中實現(xiàn)輪播圖效果，需要的朋友參考下
2017-06-06
js手寫貪吃蛇游戲?qū)嵗创a
這篇文章主要給大家介紹了關(guān)于js手寫貪吃蛇游戲的相關(guān)資料,貪吃蛇游戲是一款經(jīng)典的游戲,在很多平臺上都有出現(xiàn),文中給出了詳細(xì)源代碼,需要的朋友可以參考下
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)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了純原生js實現(xiàn)貪吃蛇游戲的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
微信小程序全局變量改變監(jiān)聽的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序全局變量改變監(jiān)聽的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07