如何使用JavaScript快速的创建一种常用类型的导航组件：sidebar

来源：互联网发布：刷单网站源码编辑：程序博客网时间：2024/04/29 11:18

本文标签： JavaScript小技巧 JavaScript JavaScript函数 JavaScript处理sidebar JavaScript导航组件

sidebar是一种常用类型的导航组件，它可从页面旁侧弹出，覆盖在正常内容上。

假设你的正常内容为：

    <div id="main">         Placeholder<p>         Placeholder<p>         Placeholder<p>    </div>

现在我们可以在内容内加入sidebar。其内有链接到Home和About。并加入一个按钮，可以打开sidebar，代码如下：

    <div id="mySidenav" class="sidebar">      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>      <a href="#a">Home</a>      <a href="#b">About</a>    </div>        <button onclick="openNav()">open sidebar</button><p>    <div id="main">         Placeholder<p>         Placeholder<p>         Placeholder<p>    </div>    <style>        .sidebar {        height: 100%;         width: 0;         position: fixed;         z-index: 1;         top: 0;        left: 0;        background-color: #111;         overflow-x: hidden;        padding-top: 60px;         transition: 0.5s;     }    .sidebar a {        padding: 4px 4px 4px 32px;        text-decoration: none;        color: #818181;        display: block;        transition: 0.3s    }        .sidebar a:hover{        color: #f1f1f1;    }    .sidebar .closebtn {        position: absolute;        top: 10px;        right: 10px;    }        </style>    <script>        function openNav() {        document.getElementById("mySidenav").style.width = "150px";    }            function closeNav() {        document.getElementById("mySidenav").style.width = "0";    }        </script>

要点在于：

默认情况下，sidebar是一个div内置任何html，且width为0，因此不可见
当需要使用sidebar时，可以使用函数设置其width为一个宽度，因此它变得可见
虽然它变得可见，但是因为z-index为1，因此不会引发主要内容的重新渲染和计算新的位置，而是覆盖其上
写在最后：FOR Freedom 看看外边的世界，以及IT这一行，少不了去Google查资料，最后，安利一个V——PN代理。一枝红杏 VPN，去Google查资料是绝对首选，连接速度快，使用也方便。我买的是99￥一年的，通过这个链接（http://my.yizhihongxing.com/aff.php?aff=2509）注册后输上会员中心得优惠码，平摊下来，每月才7块钱，特实惠。
本文标签： JavaScript小技巧 JavaScript JavaScript函数 JavaScript处理sidebar JavaScript导航组件
转自 SUN'S BLOG - 专注互联网知识，分享互联网精神！
原文地址： 《如何使用JavaScript快速的创建一种常用类型的导航组件：sidebar》
相关阅读:《Aaron Swartz – 互联网天才开挂的人生历程：每时每刻都问自己，现在这世界有什么最重要的事是我能参与去做的？》
相关阅读:《网站环境apache + php + mysql 的XAMPP，如何实现一个服务器上配置多个网站？》
相关阅读:《什么是工程师文化？各位工程师是为什么活的？作为一个IT或互联网公司为什么要工程师文化?》
相关阅读: 对程序员有用：2017最新能上Google的hosts文件下载及总结网友遇到的各种hosts问题解决方法及配置详解
相关阅读: 《win10永久激活教程以及如何查看windows系统是不是永久激活？》
相关BLOG：SUN’S BLOG - 专注互联网知识，分享互联网精神！去看看：www.whosmall.com

0 0