用JavaScript写一个简易的可收缩侧边导航栏

于 2024-06-30 14:04:39 发布
阅读量1k 收藏 18
点赞数 37
分类专栏： JavaScript 文章标签： javascript 开发语言 html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52530691/article/details/140078304
版权

一.  HTML 部分代码及代码解释

        此处的三级导航栏是自己手写的，等到大家真正开发项目的时候。这些数据后端都会写好传递过来，我们写好自己的代码逻辑就好。

1.1  CSS文件 和 JavaScript 文件引入的位置

        在本文中，引用 CSS 样式表 和 JavaScript 页面的时候，都在 head 标签中进行了引用。

        CSS 文件可以在 HTML 页面的引用位置并没有什么明确的限制，甚至是可以在 body   标签中引入。但是为了美观，一般选择在 head 标签中进行引用。

        JavaScript 文件引入一般选择在 body 标签和 html 标签中间引用，很少在其他位置引用。因为在其他位置引用会可能关于出现错误，本文在 head 标签中引用虽然没有出错，但是不推荐使用。

1.1 JavaScript 文件正常引用位置

</body>
    <!-- JavaScript 正确的引用位置 -->
    <script type="text/javascript" src="index.js"></script>

</html>

1.2 标签的解释        

  • class="one"   一级导航栏

  • class="one"   二级导航栏

  • class="one"   三级导航栏

1.3  代码部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏页面</title>

    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>
</head>

<body>

    <div class="navigator" id="vegetablesFruits">
        <div class="one" onclick="isShowVF()">
            <span>蔬菜与水果</span>
        </div>

        <div id="fruits">
            <div class="two" onclick="isShowFruit()">
                <span>水果</span>
            </div>
            <div class="three" id="fruitList">
                <ul>
                    <li><span>苹果</span></li>
                    <li><span>香蕉</span></li>
                    <li><span>橘子</span></li>
                </ul>
            </div>
        </div>
        
        <div id="vegetables">
            <div class="two" onclick="isShowVegetable()">
                <span>蔬菜</span>
            </div>

            <div class="three" id="vegetableList">
                <ul>
                    <li><span>胡萝卜</span></li>
                    <li><span>西红柿</span></li>
                    <li><span>西兰花</span></li>
                </ul>
            </div>
        </div>
            

        <div class="one" onclick="isShowFood()">
            <span>主食</span>
        </div>

        <div class="two" id="food">
            <ul>
                <li><span>大米</span></li>
                <li><span>馒头</span></li>
                <li><span>水饺</span></li>
            </ul>
        </div>


        <div class="one" onclick="isShowDrink()">
            <span>饮料</span>
        </div>

        <div class="two" id="drink">
            <ul>
                <li><span>可乐</span></li>
                <li><span>啤酒</span></li>
                <li><span>雪碧</span></li>
            </ul>
        </div>
    </div>

    <div >
        <img src="menu.png" alt="菜单图片" id="imgMenu" onclick="isShow()" >
    </div>

</body>

</html>

二. CSS 部分代码及代码解释

        CSS 代码部分大家加载出来之后可能太小，但是代码实现是没问题的。如果感觉不合适的话，可以自己调动。

 2.1 代码部分解释

        calc() 函数 用于动态计算长度值。可以获取 <div> 元素的宽度。

    height: calc(50vh);     /*当前窗口高度的 50%*,动态的,会随页面的大小变动而变动*/

    width: calc(25vw);      /*当前窗口宽度的 25%*,动态的,会随页面的大小变动而变动*/

        需要注意的是，calc() 函数中是可以有计算公式的，但是需要复合calc的规则。并且，运算符前后都需要保留一个空格，例如：

width: calc(100% - 50px)

width: calc(50% - 1em);

 

        代码中有大量，display: none;   是为了让页面初始的时候导航栏是关闭状态。类似于下图所示：

 

 2.2 代码部分

        部分解释在代码中有标注。


body,html{
    margin: 0;
    font-family: STKaiti;   /* 字体华文新魏 */
    font-weight: bold;
    user-select: none;  /* 禁止在双次点击的时候选中文本 */ 
}

ul{
    margin: 0;
    padding: 0;
}

li{
    list-style-type:none;  /* 清楚 li 样式*/
}



/*------------------------------------------------------------------------------------*/
.navigator{
    width: 130px;
    height: calc(100vh); /* 设置为页面可视高度 */
    overflow-y:scroll;  /* y轴方向超出部分滑轮滚动 */
    overflow-x:hidden; /* x轴方向超出部分隐藏 */
    scrollbar-color: transparent transparent; /* 设置滑轮透明 */
    float: left;
}

.navigator .one{
    border: 1px solid black;
    height: 35px;
    line-height: 35px;
    background-color: rgba(51,51,51,1);
    color: aliceblue;
    margin: -1px;
}

.navigator .one span{
    display: inline-block;
    font-size: 20px;
    margin-left: 5px;
}

.navigator #fruits{
    display: none;
}

.navigator #fruitList{
    display: none;
}

.navigator #vegetables{
    display: none;
}
 
.navigator #vegetableList{
    display: none;
}

.navigator #food{
    display: none;
}

.navigator #drink{
    display: none;
}

.navigator .two{
    border: 1px solid black;
    background-color: rgba(51,51,51,0.7);
    color: aliceblue;
    margin: -1px;
}

.navigator .two li{
    height:20px;
    line-height: 20px;
    border: 1px solid black;
    margin: -1px;
}

.navigator .two span{
    margin-left: 15px;
}

.navigator .three{
    border: 1px solid black;
    background-color: rgba(51,51,51,0.4);
    color: aliceblue;
    margin: -1px;
}

.navigator .three li{
    border: 1px solid black;
    height:20px;
    line-height: 20px;
    margin: -1px;
}

.navigator .three span{
    margin-left: 20px;
}

/*------------------------------------------------------------------------------------*/

img {
    width: 20px;
    height: 20px;
    float: left;
    background-color: #333333;
    margin-left: -19px;
}

三. JS 部分代码及代码解释       

 3.1 代码逻辑

  •      把所有的导航栏初始设置为关闭，让页面在加载导航栏在页面展示
  •      通过函数来控制导航栏是否打开
    • 如果打开，就改变他的判断属性,例如    displayVF = !displayVF。代码意思就是改变导航栏，当导航栏开启的时候，下一次点击关闭。
  • 其中在有三级导航栏的地方，关闭一级导航，就会关闭二级和三级导航。

3.2 代码片段


// VF 是 vegetable 和 food 的缩写
// 其余都是 英语直译
// Meau 侧边栏效果 

let  displayVF = false;
let  displayFood = false;
let  displayDrink = false;
let  displayVegetable = false;
let  displayFruit = false;
let  displayMenu = false;

// 蔬菜和食物展示 
function isShowVF(){

    if(!displayVF){

        document.getElementById("vegetables").style.display = "block";
        document.getElementById("fruits").style.display = "block";

    }else{

        document.getElementById("vegetables").style.display = "none";
        document.getElementById("fruits").style.display = "none";

    }

    displayVF = !displayVF
    document.getElementById("fruitList").style.display = "none";
    document.getElementById("vegetableList").style.display = "none";

}

// 食物展示
function isShowFood(){

    if(!displayFood){

        document.getElementById("food").style.display = "block";

    }else{

        document.getElementById("food").style.display = "none";

    }
    displayFood = !displayFood

}

// 饮料展示
function isShowDrink(){

    if(!displayDrink){

        document.getElementById("drink").style.display = "block";

    }else{

        document.getElementById("drink").style.display = "none";

    }

    displayDrink = !displayDrink

}

// 水果展示
function isShowFruit(){

    if(!displayFruit){

        document.getElementById("fruitList").style.display = "block";

    }else{

        document.getElementById("fruitList").style.display = "none";

    }

    displayFruit = !displayFruit

}

// 蔬菜展示
function isShowVegetable(){

    if(!displayVegetable){

        document.getElementById("vegetableList").style.display = "block";

    }else{

        document.getElementById("vegetableList").style.display = "none";

    }

    displayVegetable = !displayVegetable
    
}

// 侧边栏按钮
function isShow(){

    if(!displayMenu){

        document.getElementById("vegetablesFruits").style.display = "none";
        document.getElementById("imgMenu").style.margin = "0"

    }else{

        document.getElementById("vegetablesFruits").style.display = "block";
        document.getElementById("imgMenu").style.margin = "0 0 0 -19px"

    }

    displayMenu = !displayMenu



}

四. 效果演示

          代码是可以直接复制运行的，有不懂的可以评论区直接询问。关闭和打开侧边栏，可能会和电脑显示屏大小有关系，所以 CSS 样式可以自己手动设置。

大拇指的约定
关注
  • 37
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用 JavaScript 构建带有下拉菜单的响应式导航栏
我的博客，不一样的自我表达
05-28 3297
aria-label带有 id 和汉堡包的按钮，aria-haspopup设置为“true”，aria-expanded设置为“false”。这些标签将使我们能够使屏幕阅读器更容易访问此按钮。现在在平板电脑和手机屏幕上，导航栏是响应式的，汉堡包按钮是可见的。这意味着当 dropdown1单击数据集为的按钮时，divid 为的元素dropdown1将记录到控制台，按钮则相反dropdown2。现在，只要下拉菜单可见，该aria-expanded属性就会设置为 true，而在折叠时，它会设置为 false。
js简单的侧边导航栏
qq_45749658的博客
11-18 1991
思路：通过改变两个div的width；形成侧边导航栏的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
13个漂亮的JS导航菜单
01-07
13个漂亮的JS导航菜单 13种样式,个个好看、实用， 欢迎下载
Js导航菜单,js菜单,漂亮的Js导航
08-22
漂亮的Js导航,使用简单，兼容IE,FF
js-手动伸缩栏
记录编程学习笔记
03-11 204
js-手动伸缩栏
前端Js左侧菜单栏伸缩功能（隐藏/显示）
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
01-28 5268
网上搜索的方法代码很多，就是比较复杂，逻辑该没有搞懂，我想到更简单的方法，比如小学生做算术题，你不会做就数手指脚趾头的笨方法咯；不管白猫黑猫能抓到老鼠就是好猫，能实现该功能就行； 首先界面我这里就省略了，大家应该都会写界面了，我的界面大概如下，现在向隐藏左2所有的区域； 展开状态（显示）： ---此处有图 缩进状态（左二隐藏）： ---此处有图 就是点击图片的按钮就缩进，再点击一次就展开，这个怎么实现?我的思路是建两个按钮，每个按钮的onclick.........
【前端WEB】2、使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）
最新发布
weixin_52938153的博客
12-23 6897
侧边导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的侧边栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。如需其他示例或有问题欢迎评论！！本人看到都会回复。
js实现侧导航栏
qq_43228899的博客
05-07 1031
实现效果： 实现源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
Javascript简易导航栏
weixin_46461358的博客
06-10 738
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>导航&
bootstrap4实现侧边导航栏带隐藏按钮
12-09
首先，要创建一个侧边导航栏，我们需要引入Bootstrap的CSS和JavaScript库。这通常通过在HTML文件的`<head>`部分添加链接和脚本标签来完成： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>Bootstrap...
react-demo:用react写的一个底部导航栏
05-02
在本项目中，我们主要探讨的是如何使用React技术来创建一个底部导航栏。React是Facebook开发的一款用于构建用户界面的JavaScript库，尤其适用于构建大型、复杂的应用程序。它以其组件化思维、虚拟DOM和高效的更新...
一个非常好看的侧边菜单栏
08-26
标题中的“一个非常好看的侧边菜单栏”表明我们要讨论的是网页设计中的一种组件，即用于导航的侧边菜单。这种菜单通常在网页的左侧或右侧，提供网站的主要链接和子菜单，帮助用户轻松地在各个页面之间切换。设计时...
jquery入门—编写一个导航条(可伸缩)
10-27
jQuery入门知识点包括如何利用jQuery实现一个可伸缩的导航条。具体实现方式是在导航条标题被点击时切换内容的显示与隐藏状态，从而达到简化内容或显示更多内容的效果。以下为详细知识点： 1. HTML结构：首先，需要...
jquery+css实现侧边导航栏效果
10-19
在本文中，我们将探讨如何使用jQuery和CSS实现一个具有良好视觉效果的侧边导航栏。侧边导航栏在网页设计中扮演着重要角色，它提供了一种直观的方式来导航网页内容或切换页面。实现这样的侧边导航栏，需要对HTML结构...
使用js实现侧边栏楼层导航功能
weixin_46936691的博客
04-27 443
scroll-behavior属性的使用
简单记录—vue 用js方法实现侧边导航栏联动选择
qq_44782585的博客
03-29 1438
因为滚动要跟着一起变，所以要在 watch 里面实时监听scroll的变化，发生变化时，判断当前距离顶部最近的是第几章，得到index把侧边目录栏选中样式改为对应的即可实现。页面初始化的时候，给内容滚动的元素加一个侦听事件，定义一个变量 scroll 用来保存当前滚动的数值。页面结构部分，根据数据循环写一个ul > li，生成侧边目录。解决第一个需求，点击任意一条目录页面滚动到对应内容。1、选择任意一条页面滚动到指定目录位置。解决第二个需求，页面滚动，目录跟着滚动。2、页面内容滚动侧边栏跟随一起滚动。
js实现淘宝右侧导航栏功能
SqlloveSyn的博客
12-27 538
模拟淘宝右侧导航栏
JS实现侧边栏案例
qq_45179355的博客
07-16 625
代码】JS实现侧边栏案例。
写一个侧边导航栏+滑动电梯效果
04-01
这里是一个简单的侧边导航栏滑动电梯效果的示例： HTML代码： ``` <div class="sidebar"> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> <li><a href="#section5">Section 5</a></li> </ul> </div> <div id="section1" class="section"> <h2>Section 1</h2> <p>Content goes here</p> </div> <div id="section2" class="section"> <h2>Section 2</h2> <p>Content goes here</p> </div> <div id="section3" class="section"> <h2>Section 3</h2> <p>Content goes here</p> </div> <div id="section4" class="section"> <h2>Section 4</h2> <p>Content goes here</p> </div> <div id="section5" class="section"> <h2>Section 5</h2> <p>Content goes here</p> </div> ``` CSS代码： ``` .sidebar { position: fixed; top: 50%; left: 0; transform: translateY(-50%); width: 100px; background-color: #f1f1f1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } ul { list-style: none; padding: 0; margin: 0; } li { margin: 10px 0; } a { display: block; padding: 10px; color: #333; text-decoration: none; transition: background-color 0.3s ease; } a:hover { background-color: #ccc; } .section { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 2rem; } ``` JavaScript代码： ``` const sidebar = document.querySelector('.sidebar'); const sections = document.querySelectorAll('.section'); window.addEventListener('scroll', () => { const currentSection = [...sections].findIndex((section) => section.getBoundingClientRect().top >= 0) - 1; if (currentSection >= 0) { const currentLink = sidebar.querySelector(`a[href="#${sections[currentSection].id}"]`); const links = sidebar.querySelectorAll('a'); links.forEach((link) => link.classList.remove('active')); currentLink.classList.add('active'); } }); sidebar.addEventListener('click', (event) => { event.preventDefault(); const target = event.target; if (target.tagName === 'A') { const link = target.getAttribute('href'); const section = document.querySelector(link); section.scrollIntoView({ behavior: 'smooth' }); } }); ``` 这个示例中，我们使用了CSS定位和盒模型来创建了一个固定在屏幕左侧的侧边导航栏，其中包含了一些链接，每个链接都指向了页面上的不同部分，这些部分都使用了一个共同的类名`.section`来标识。 在JavaScript中，我们使用了`window`对象上的`scroll`事件来监听页面的滚动，然后根据当前滚动位置来确定用户目前正在查看哪个部分。我们使用了`getBoundingClientRect()`方法来获取每个部分的位置，然后使用`findIndex()`方法来查找最接近顶部的部分索引。一旦我们找到了当前的部分，我们就可以在侧边导航栏中高亮显示相应的链接。 我们还监听了侧边导航栏上的`click`事件，以便能够响应用户点击导航链接的行为。当用户点击一个链接时，我们使用`getAttribute()`方法来获取链接的`href`属性，然后使用`querySelector()`方法来查找对应的部分。最后，我们使用`scrollIntoView()`方法来滚动到该部分并平滑进行动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值