前端页面简化导航栏写法

最新推荐文章于 2024-05-19 09:58:49 发布

会撸代码的懒羊羊

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量1.2k

点赞数 41

分类专栏： Knowledge 文章标签：前端 html5 css3 js html

懒羊羊

本文链接：https://blog.csdn.net/kangqiao0422/article/details/138106969

版权

Knowledge 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前端页面简化导航栏写法

基于HTML、CSS和JavaScript（使用Fetch API或jQuery的Ajax）实现导航栏的基本框架。

在这个例子中，我们使用HTML5的nav元素、CSS用于样式布局，以及JavaScript实现导航栏的响应式折叠和链接点击效果。

创建一个名为navbar.html的文件，如下（全部集成于一个页面中，实际开发中应存放于多个文件夹）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
    <style>
        /* 添加一些基本样式，您可以根据需要调整或引入外部CSS文件 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
        }
        nav {
            background-color: #333;
            overflow: hidden;
        }
        .nav-links {
            display: flex;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .nav-links li {
            position: relative;
            padding: 1rem 1.5rem;
        }
        .nav-links li a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .nav-links li a:hover {
            color: #f0f0f0;
        }
        .toggle-nav-button {
            display: none;
            color: white;
            cursor: pointer;
            padding: 1rem 1.5rem;
        }
        @media screen and (max-width: 768px) {
            .nav-links {
                display: none;
            }
            .toggle-nav-button {
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <nav>
        <div class="nav-links">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/services">Services</a></li>
            <li><a href="/contact">Contact</a></li>
        </div>
        <span class="toggle-nav-button">&#9776;</span>
    </nav>

    <script>
        const toggleButton = document.querySelector('.toggle-nav-button');
        const navLinks = document.querySelector('.nav-links');

        toggleButton.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });
    </script>
</body>
</html>

在这里插入图片描述

上述HTML文件包含以下部分：

基本样式：使用内联CSS定义了导航栏的基本样式，包括背景色、字体、链接样式等。
导航栏结构：
- 使用nav元素包裹整个导航栏，包含一个包含链接的无序列表（ul.nav-links）和一个用于响应式折叠的按钮（.toggle-nav-button）。
- 链接列表中的每个链接项（li）包含一个指向相应页面的a标签。
JavaScript脚本：
- 为折叠按钮添加点击事件监听器，当点击时，切换链接列表的.active类，使其在小屏幕设备上显示或隐藏。

注：这只是一个基础的前端导航栏示例，实际应用中还需要考虑以下几点：

响应式设计：根据需要调整媒体查询的断点，以适应不同屏幕尺寸和设备类型。
导航栏内容：根据实际网站结构和需求，添加或修改链接项和对应的URL。
用户体验：可以添加滚动监听、激活状态指示、下拉菜单等功能，提升导航栏的易用性。
了解更多知识请戳下：

@Author:懒羊羊

会撸代码的懒羊羊

关注

41
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端页面简化导航栏写法

基于HTML、CSS和JavaScript（使用Fetch API或jQuery的Ajax）实现导航栏的基本框架。元素、CSS用于样式布局，以及JavaScript实现导航栏的响应式折叠和链接点击效果。：可以添加滚动监听、激活状态指示、下拉菜单等功能，提升导航栏的易用性。/* 添加一些基本样式，您可以根据需要调整或引入外部CSS文件 */：根据需要调整媒体查询的断点，以适应不同屏幕尺寸和设备类型。：根据实际网站结构和需求，添加或修改链接项和对应的URL。在这个例子中，我们使用HTML5的。
复制链接

扫一扫