「零基础」前端教程：手把手教你制作简洁美观的响应式导航栏（附完整源码） HTML+CSS+JS 实战：5分钟搭建一个新手友好的响应式导航栏 前端新手必看！一步步打造你的第一个移动端自适应导航栏（详细源

于 2024-10-02 20:20:46 发布
阅读量453 收藏 19
点赞数 16
文章标签： 前端 html css javascript 响应式导航栏 导航栏教程 前端新手教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/142684668
版权

创建一个响应式导航栏（完整代码在后面）

响应式导航栏效果图：
在这里插入图片描述

在这里插入图片描述

目录

步骤

在 Web 开发中，导航栏是网站中非常重要的组成部分。一个简洁、美观、响应式的导航栏可以提升用户体验。今天，我们将一起学习如何使用 HTML、CSS 和 JavaScript（不使用任何框架）来构建一个响应式的导航栏，实现移动端的菜单折叠和展开功能。

一、新建一个 HTML 项目

首先，创建一个新的 HTML 文件，命名为 index.html。你可以使用任何代码编辑器，如 VSCode、Sublime Text 或 Notepad++。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式导航栏示例</title>
</head>
<body>

</body>
</html>

二、创建基本结构

在 <body> 标签中，添加导航栏的基本结构，包括 Logo、导航菜单和移动端的菜单按钮。

<body>
    <header>
        <nav class="navbar">
            <div class="logo">My Website</div>
            <ul class="nav-links">
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系</a></li>
            </ul>
            <div class="menu-icon" id="menu-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>
</body>
  • .logo：网站的 Logo 或名称。
  • .nav-links：导航链接列表。
  • .menu-icon：移动端的菜单按钮（汉堡菜单）。

三、使用 CSS 美化页面

在 <head> 标签中，添加 <style> 标签，编写导航栏的样式。

<head>
    <meta charset="UTF-8">
    <title>响应式导航栏示例</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #34495e;
            padding: 10px 20px;
            color: #ecf0f1;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .nav-links {
            list-style: none;
            display: flex;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: #ecf0f1;
            font-size: 18px;
        }

        .nav-links a:hover {
            color: #bdc3c7;
        }

        /* 移动端菜单按钮 */
        .menu-icon {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .menu-icon span {
            width: 25px;
            height: 3px;
            background-color: #ecf0f1;
            margin: 4px;
            transition: 0.3s;
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .nav-links {
                position: fixed;
                right: -100%;
                top: 60px;
                flex-direction: column;
                background-color: #34495e;
                width: 200px;
                height: calc(100% - 60px);
                transition: 0.3s;
            }

            .nav-links li {
                margin: 20px 0;
                text-align: center;
            }

            .menu-icon {
                display: flex;
            }
        }

        /* 菜单展开时的样式 */
        .nav-active {
            right: 0;
        }
    </style>
</head>
  • 使用 @media 查询，实现响应式布局。
  • 在屏幕宽度小于 768px 时，导航菜单变为侧边栏，菜单按钮显示。

四、添加交互功能

为了实现点击菜单按钮时导航菜单的展开和收起，我们需要添加 JavaScript 代码。

在 <body> 底部，添加 <script> 标签，编写交互逻辑。

<body>
    <!-- 上面的代码 -->
    <!-- ... -->

    <!-- JavaScript 部分 -->
    <script>
        const menuIcon = document.getElementById('menu-icon');
        const navLinks = document.querySelector('.nav-links');

        menuIcon.addEventListener('click', () => {
            navLinks.classList.toggle('nav-active');
            // 菜单动画
            menuIcon.classList.toggle('toggle');
        });
    </script>
</body>

同时，为了实现菜单按钮的动画效果，更新 CSS 样式：

/* 菜单按钮动画 */
.menu-icon.toggle span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-icon.toggle span:nth-child(2) {
    opacity: 0;
}

.menu-icon.toggle span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

完整代码

将以上部分组合在一起，得到完整的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式导航栏示例</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #34495e;
            padding: 10px 20px;
            color: #ecf0f1;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .nav-links {
            list-style: none;
            display: flex;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: #ecf0f1;
            font-size: 18px;
        }

        .nav-links a:hover {
            color: #bdc3c7;
        }

        /* 移动端菜单按钮 */
        .menu-icon {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .menu-icon span {
            width: 25px;
            height: 3px;
            background-color: #ecf0f1;
            margin: 4px;
            transition: 0.3s;
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .nav-links {
                position: fixed;
                right: -100%;
                top: 60px;
                flex-direction: column;
                background-color: #34495e;
                width: 200px;
                height: calc(100% - 60px);
                transition: 0.3s;
            }

            .nav-links li {
                margin: 20px 0;
                text-align: center;
            }

            .menu-icon {
                display: flex;
            }
        }

        /* 菜单展开时的样式 */
        .nav-active {
            right: 0;
        }

        /* 菜单按钮动画 */
        .menu-icon.toggle span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        .menu-icon.toggle span:nth-child(2) {
            opacity: 0;
        }

        .menu-icon.toggle span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="logo">My Website</div>
            <ul class="nav-links">
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系</a></li>
            </ul>
            <div class="menu-icon" id="menu-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>

    <!-- JavaScript 部分 -->
    <script>
        const menuIcon = document.getElementById('menu-icon');
        const navLinks = document.querySelector('.nav-links');

        menuIcon.addEventListener('click', () => {
            navLinks.classList.toggle('nav-active');
            // 菜单动画
            menuIcon.classList.toggle('toggle');
        });
    </script>
</body>
</html>

结语

通过本篇教程，我们学习了如何使用 HTML、CSS 和 JavaScript 构建一个响应式的导航栏。这个导航栏在桌面端展示为水平菜单，在移动端则变为侧边栏菜单，并且包含了菜单按钮的动画效果。希望通过本次实践，大家对前端开发有了更深入的了解。

提示：在实际项目中，您可以根据需要，调整导航栏的样式，添加更多的菜单项，或者集成到您的网站中。

版权声明：本文为原创文章，转载请注明出处。

南北极之间
关注
基于HTML+CSS+JavaScript制作网站开发公司网站7页 自适应，响应式页面
而风不止
11-17 290
⛵✈网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制| HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
《前端框架开发技术》HTML+CSS+JavaScript (个人简介 5页 响应式)
qq_524614081的博客
11-19 361
个人设计web前端大作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
html网页制作期末大作业成品：基于HTML+CSS+JavaScript简洁汽车网站
而风不止
11-26 140
J
HTML+CSS+JS大作业：网站设计——家具装修公司(12页 bootstrap, 响应式)
11-20 561
网页设计大作业模板-网页设计大作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
期末前端web大作业——我的家乡甘肃介绍网页制作源码HTML+CSS+JavaScript
11-21 577
HTML网页设计结课作业 web前端开发技术 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
基于HTML+CSS+JS制作服装商城（web前端网页制作课作业）带登录
11-28 452
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
《前端框架开发技术》HTML+CSS+JavaScript 制作个人简历简单个人主页
qq_524614081的博客
11-28 2592
F
web期末大作业：基于html+css+js制作 学校班级网页制作
11-21 339
HTML网页设计制作 网站设计源代码制作素材成品 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
web期末大作业：基于html+css+js制作 学校班级网页制作我的校园
qq_524614081的博客
11-19 230
⛵✈网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 | 校园运动会 | 等网站的设计与制作 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 501
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 275
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
第十一章 【前端】调用接口（11.1）——Vite 环境变量
qdbest的专栏
09-29 91
Vite。
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 824
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
前端面试经验总结2(经典问题篇)
rita_0567的博客
09-28 948
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
构建.NET Core Web API为Windows服务安装包
学习和分享
09-28 349
请注意，以上步骤仅适用于将.NET Core Web API作为Windows服务安装。如果需要更高级的功能，例如服务启动类型、日志记录等，可能需要进一步的自定义和配置。安装完成后，.NET Core Web API将作为Windows服务在目标服务器上运行。可以通过NuGet包管理器或在.csproj文件中手动添加引用。方法，以便将Web API应用程序作为Windows服务运行。创建一个新的.NET Core Web API项目或使用现有的项目。文件夹中，找到发布的Web API应用程序和安装脚本。
Java Web核心技术阶段的学习要点
2401_87352036的博客
09-27 533
JavaWeb核心技术阶段的学习要点涵盖了多个关键技术和概念，这些技术和概念对于开发动Web应用程序至关重要。
周末总结(2024/09/29)
weixin_44125071的博客
09-29 385
日常工作生活总结
nodejs fs 模块的简介与相关案例
正是修行时，正是修行时，正式修行时...
09-27 365
nodejs fs 模块的简介与相关案例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值