【前端WEB】2、使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）

【前端WEB】使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）

第一章 使用 HTML+CSS+JS 实现网页侧边导航栏效果
第二章 使用 HTML+CSS+JS 实现网页首页导航栏效果（本文）
第三章 使用 HTML+CSS+JS 实现网页正文整体布局
第四章 使用 HTML+CSS+JS实现网页footer布局
第五章 使用HTML+CSS+JS实现网页“搜猪输入法”的制作及成品展示

---

---

前言

侧边导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。

新人投稿！感谢大家的支持与点赞！此投稿为长期续更 以完成前端页面整体功能！

---

一、侧边栏是什么？

侧边导航栏主要位于网页的左侧或右侧，提供了一个清晰的导航菜单，使用户可以快速地跳转到网页的不同部分。

这种导航方式特别适合于内容丰富的网站，如在线教育平台、博客网站或企业网站。

其效果的实现通常由HTML表单、CSS样式控制、JavaScript点击事件组成。

侧边栏效果图如上所示，本文将提供上述图片效果的教程与源码，新人投稿欢迎大家的支持与点赞！！如有问题或需要帮助请欢迎您的指出！

二、使用步骤

1.HTML结构

代码如下（示例）：放置在HTML文件夹里，可以自行增加项。
代码解释：class引用css样式、onclick点击事件通过JS完成。

<!-- 侧边栏 -->
<div class="side-nav">
	<div class="side-nav-item" onclick="scrollToSection('box1')">首页</div>
    <div class="side-nav-item" onclick="scrollToSection('box2')">导航2</div>
    <div class="side-nav-item" onclick="scrollToSection('box3')">导航3</div>
    <div class="side-nav-item" onclick="scrollToSection('box4')">导航3</div>
</div>

2.CSS样式

代码如下（示例）：
封装两个盒子，父盒子定位屏幕位置自适应、小盒子封装各个子项。
使用方法：放置在head里style标签，或者引入css文件。

       /* 侧边栏 */
        .side-nav {
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            border-radius: 10px 0 0 10px;
            padding: 10px;
            z-index: 1000;
        }

        .side-nav-item {
            text-align: center;
            color: white;
            padding: 10px;
            margin: 5px 0;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        .side-nav-item:hover {
            background: #007bff;
            color: #fff;
        }

该处使用的url网络请求的数据。

2.JavaScript代码

代码如下（示例）：
let sections = [‘box1’, ‘box2’, ‘box3’, ‘box4’]
其中内部为HTML表单中的点击事件所绑定的ID：οnclick="scrollToSection(‘box1’)

    // 点击跳转
      function scrollToSection(sectionId) {
                document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
            }

            window.onscroll = function () {
                let sections = ['box1', 'box2', 'box3', 'box4'];
                sections.forEach(section => {
                    let element = document.getElementById(section);
                    let position = element.getBoundingClientRect();
                    if (position.top <= 150 && position.bottom >= 150) {
                        document.querySelectorAll('.side-nav-item').forEach(div => {
                            div.classList.remove('active');
                        });
                        document.querySelector(`.side-nav-item[onclick="scrollToSection('${section}')"]`).classList.add('active');
                    }
                });
            };

---

总结

本文简单介绍了HTML前端页面的侧边栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。
如需其他示例或有问题欢迎评论！！本人看到都会回复。