html静态网页导航栏模板-网页设计-锦华智联科技

基础水平导航栏

这是最常见、最简单的导航栏，适合个人博客、作品集等网站。

特点

水平排列
简洁明了
响应式设计（在移动设备上会变成汉堡菜单）

代码

您可以直接复制以下代码到一个 .html 文件中，在浏览器中打开即可看到效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">基础导航栏模板</title>
    <style>
        /* --- 基础样式重置 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        /* --- 导航栏容器 --- */
        .navbar {
            background-color: #333;
            overflow: hidden; /* 确保内容溢出时隐藏，保持布局整洁 */
        }
        /* --- 导航链接 --- */
        .navbar a {
            float: left; /* 允许链接水平排列 */
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        /* --- 鼠标悬停效果 --- */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
        /* --- 当前活动页面高亮 --- */
        .navbar a.active {
            background-color: #04AA6D;
            color: white;
        }
        /* --- 响应式设计：汉堡菜单 --- */
        .navbar .icon {
            display: none; /* 默认不显示 */
        }
        @media screen and (max-width: 600px) {
            .navbar a:not(:first-child) { /* 隐藏除第一个链接外的所有链接 */
                display: none;
            }
            .navbar a.icon {
                float: right; /* 将汉堡菜单图标放在最右边 */
                display: block; /* 显示汉堡菜单图标 */
            }
        }
        @media screen and (max-width: 600px) {
            .navbar.responsive {class="navbar responsive">
            <a href="#home" class="active">首页</a>
            <a href="#news">新闻</a>
            <a href="#contact">联系</a>
            <a href="#about">lt;/a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
        <div style="padding-left:16px;">
            <h2>响应式导航栏演示</h2>
            <p>调整浏览器窗口大小，看看导航栏是如何变化的。</p>
            <p>当窗口宽度小于600像素时，导航链接会隐藏，只显示汉堡菜单图标。</p>
        </div>
        <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "navbar") {
                x.className += " responsive";
            } else {
                x.className = "navbar";
            }
        }
        </script>
</body>
</html>

代码解释

HTML结构:
- 一个 div 作为导航栏的容器，类名为 navbar。
- 多个 a 标签作为导航链接。
- 一个带有 icon 类的 a 标签，用于显示汉堡菜单图标（这里使用了 Font Awesome 图标库，您需要在 <head> 中引入其CDN链接）。
- onclick="myFunction()" 绑定了一个点击事件，用于切换导航栏的响应式状态。
CSS样式:
- .navbar: 设置背景色、防止内容溢出。
- .navbar a: 使用 float: left 让链接水平排列，并设置颜色、内边距等。
- hover: 鼠标悬停时的背景色和文字颜色变化。
- .active: 当前页面的链接高亮显示。
- @media screen and (max-width: 600px): 这是媒体查询，当屏幕宽度小于600像素时，会应用这里的样式。
  - 隐藏所有主要链接,只显示汉堡菜单图标。
  - .navbar.responsive: 当JavaScript添加了 responsive 类后，这个样式会生效，让所有链接以垂直列表的形式显示在汉堡菜单下方。
JavaScript脚本:
- myFunction() 函数负责在点击汉堡菜单图标时，为 navbar 添加或移除 responsive 类，从而控制导航栏的显示和隐藏。

带 Logo 和下拉菜单的导航栏

这是一个更专业的导航栏,包含 Logo 和下拉子菜单，适合企业官网或复杂的网站。

特点

包含 Logo 图片
带有下拉子菜单
固定在页面顶部（滚动时不会消失）
响应式设计

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">带Logo和下拉菜单的导航栏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            padding-top: 60px; /* 为固定导航栏留出空间 */
        }
        /* 导航栏主体 */
        .navbar {
            position: fixed; /* 固定定位 */
            top: 0;
            left: 0;
            width: 100%;
            background-color: #2c3e50;
            padding: 10px 20px;
            z-index: 1000; /* 确保导航栏在最上层 */
        }
        .navbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* Logo样式 */
        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }
        .logo img {
            height: 40px;
            margin-right: 10px;
        }
        /* 导航链接容器 */
        .nav-links {
            display: flex;
            list-style: none;
        }
        /* 导航链接样式 */
        .nav-links li {
            position: relative;
        }
        .nav-links a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 20px 15px;
            transition: background-color 0.3s;
        }
        .nav-links a:hover {
            background-color: #34495e;
        }
        /* 下拉菜单样式 */
        .dropdown-content {
            display: none; /* 默认隐藏 */
            position: absolute;
            background-color: #34495e;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content a {
            padding: 12px 16px;
            text-align: left;
        }
        .dropdown-content a:hover {
            background-color: #2c3e50;
        }
        /* 当鼠标悬停在父级链接上时，显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }
        /* 响应式汉堡菜单 */
        .hamburger {
            display: none;
            cursor: pointer;
        }
        .hamburger span {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            background-color: white;
            transition: all 0.3s ease-in-out;
        }
        /* 响应式布局 */
        @media screen and (max-width: 768px) {
            .nav-links, .logo {
                display: none; /* 默认隐藏导航链接和Logo */
            }
            .nav-links.responsive, .logo.responsive {
                display: block; /* 当添加responsive类时显示 */
            }
            .nav-links.responsive {
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: #2c3e50;
                flex-direction: column;
            }
            .nav-links.responsive li {
                width: 100%;
            }
            .nav-links.responsive a {
                text-align: center;
            }
            .hamburger {
                display: block;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-content">
            <a href="#" class="logo">
                <img src="https://via.placeholder.com/40" alt="Logo">
                MyBrand
            </a>
            <ul class="nav-links">
                <li><a href="#">首页</a></li>
                <li class="dropdown">
                    <a href="#">产品 <i class="fas fa-caret-down"></i></a>
                    <div class="dropdown-content">
                        <a href="#">产品 1</a>
                        <a href="#">产品 2</a>
                        <a href="#">产品 3</a>
                    </div>
                </li>
                <li><a href="#">服务</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <div class="hamburger" onclick="toggleMenu()">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>
    <div style="padding: 20px; text-align: center;">
        <h1>页面内容</h1>
        <p>向下滚动，导航栏会固定在顶部。</p>
    </div>
    <script>
        function toggleMenu() {
            const navLinks = document.querySelector('.nav-links');
            navLinks.classList.toggle('responsive');
        }
    </script>
</body>
</html>

代码解释

固定定位: position: fixed; 让导航栏始终停留在视口的顶部。
Flexbox布局: .navbar-content 使用 display: flex 和 justify-content: space-between 轻松实现Logo靠左、导航链接靠右的布局。
下拉菜单: 通过 .dropdown 和 .dropdown-content 的组合实现。.dropdown:hover .dropdown-content { display: block; } 是纯CSS实现下拉效果的关键。
响应式汉堡菜单: 使用 display: none 和 display: block 结合媒体查询和JavaScript的 classList.toggle() 来控制移动端菜单的显示。

现代风格粘性导航栏

这种导航栏在页面滚动时会有平滑的过渡效果,非常适合现代网站。

特点

粘性定位（Sticky）
滚动时背景和样式会改变
平滑的动画过渡效果
包含搜索框

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">现代粘性导航栏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Poppins', sans-serif;
            padding-top: 80px; /* 为粘性导航栏留出空间 */
        }
        /* 初始导航栏样式 */
        .modern-navbar {
            position: sticky; /* 粘性定位 */
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 10%;
            background-color: rgba(255, 255, 255, 0.95); /* 半透明背景 */
            transition: all 0.3s ease-in-out;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        /* 滚动后的导航栏样式 */
        .modern-navbar.scrolled {
            padding: 10px 10%;
            background-color: #fff;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }
        .modern-navbar.scrolled .logo {
            color: #333;
        }
        .modern-navbar.scrolled .nav-links a {
            color: #333;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .nav-links {
            display: flex;
            list-style: none;
        }
        .nav-links a {
            color: #fff;
            text-decoration: none;
            margin-left: 30px;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .nav-links a:hover {
            color: #3498db;
        }
        .search-box {
            position: relative;
            display: flex;
            align-items: center;
        }
        .search-box input {
            padding: 8px 15px;
            border: none;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            outline: none;
            width: 200px;
            transition: width 0.3s ease;
        }
        .modern-navbar.scrolled .search-box input {
            background-color: #f0f0f0;
            color: #333;
        }
        .search-box input::placeholder {
            color: #fff;
        }
        .modern-navbar.scrolled .search-box input::placeholder {
            color: #aaa;
        }
        .search-box button {
            position: absolute;
            right: 5px;
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
        }
        .modern-navbar.scrolled .search-box button {
            color: #333;
        }
        /* 汉堡菜单 */
        .hamburger {
            display: none;
            cursor: pointer;
        }
        .hamburger span {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            background-color: white;
            transition: all 0.3s ease-in-out;
        }
        @media screen and (max-width: 768px) {
            .nav-links, .search-box {
                display: none;
            }
            .nav-links.responsive, .search-box.responsive {
                display: block;
            }
            .nav-links.responsive {
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: #fff;
                flex-direction: column;
                padding: 20px;
                box-shadow: 0 5px 10px rgba(0,0,0,0.1);
            }
            .nav-links.responsive a {
                color: #333;
                margin: 10px 0;
            }
            .search-box.responsive {
                margin-top: 20px;
            }
            .hamburger {
                display: block;
            }
        }
    </style>
</head>
<body>
    <nav class="modern-navbar" id="myNavbar">
        <a href="#" class="logo">ModernNav</a>
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">探索</a></li>
            <li><a href="#">lt;/a></li>
            <li><a href="#">联系</a></li>
        </ul>
        <div class="search-box">
            <input type="text" placeholder="搜索...">
            <button type="submit"><i class="fas fa-search"></i></button>
        </div>
        <div class="hamburger" onclick="toggleMenu()">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
    <div style="height: 2000px; padding: 50px; text-align: center; background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);">
        <h1>向下滚动页面</h1>
        <p>观察导航栏的变化效果。</p>
    </div>
    <script>
        // 切换移动端菜单
        function toggleMenu() {
            const navLinks = document.querySelector('.nav-links');
            const searchBox = document.querySelector('.search-box');
            navLinks.classList.toggle('responsive');
            searchBox.classList.toggle('responsive');
        }
        // 监听滚动事件，改变导航栏样式
        window.onscroll = function() {
            const navbar = document.getElementById("myNavbar");
            if (window.scrollY > 50) { // 当滚动超过50像素时
                navbar.classList.add("scrolled");
            } else {
                navbar.classList.remove("scrolled");
            }
        };
    </script>
</body>
</html>

代码解释

粘性定位: position: sticky; 是 position: relative 和 position: fixed 的结合，它在元素在视口中时表现得像 relative，当滚动到指定位置（top: 0）时，它表现得像 fixed。
滚动监听: window.onscroll 事件会在用户滚动页面时触发，我们在这个事件中判断 window.scrollY（垂直滚动距离）是否大于一个阈值（这里是50px）。
动态类名: 如果满足条件，就给导航栏添加 scrolled 类；否则，就移除它，CSS中定义了 .scrolled 类的不同样式，从而实现了滚动时导航栏样式的平滑过渡。
搜索框: 使用了 position: absolute 将搜索按钮定位在输入框的右侧，实现了常见的搜索框样式。

如何选择和使用这些模板？

复制代码: 将您喜欢的模板的完整代码复制到一个新的 .html 文件中。
: 修改 <a> 标签中的链接文本（如“首页”、“关于我们”）和 href 属性（指向您的实际页面）。
自定义样式:
- 颜色: 修改CSS中的 background-color, color 等属性来改变配色方案。
- Logo: 将 <img src="..."> 中的 src 替换为您自己的Logo图片路径。
- 字体: 修改 font-family 属性来改变字体。
- 间距: 修改 padding 和 margin 来调整元素之间的距离。
添加功能: 如果您想让链接跳转到真实页面，只需确保 href 的值与您的文件名或路径匹配即可，下拉菜单和搜索框需要后端支持才能完全实现功能，但静态展示已经足够。

希望这些模板能帮助您快速搭建出漂亮的网站导航栏！