不同风格的博客站导航栏样式

3004字约10分钟

技术文档

基本样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar basic-navbar">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
}

.basic-navbar {
    background-color: #333;
    overflow: hidden;
}

.basic-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.basic-navbar li {
    float: left;
}

.basic-navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.basic-navbar li a:hover {
    background-color: #111;
}

现代样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar modern-navbar">
        <div class="logo">博客站</div>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

body {
    font-family: 'Helvetica Neue', sans-serif;
}

.modern-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0044cc;
    padding: 0 20px;
}

.modern-navbar .logo {
    font-size: 24px;
    color: white;
    font-weight: bold;
}

.modern-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.modern-navbar li {
    margin-left: 20px;
}

.modern-navbar li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.modern-navbar li a:hover {
    border-bottom: 2px solid white;
}

极简样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar minimal-navbar">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

body {
    font-family: 'Open Sans', sans-serif;
}

.minimal-navbar {
    background-color: white;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.minimal-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.minimal-navbar li {
    display: inline;
    margin: 0 10px;
}

.minimal-navbar li a {
    color: #333;
    text-decoration: none;
    padding: 10px;
    font-size: 16px;
}

.minimal-navbar li a:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
}

这三种不同风格的导航栏可以根据你博客的主题和风格选择使用。

这三种背景效果的导航栏分别涉及图片背景、自动静音播放的视频背景和颜色渐变背景。以下是实现这三种效果的详细方法。

1. 图片背景导航栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Background Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar image-navbar">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.image-navbar {
    background: url('background.jpg') no-repeat center center;
    background-size: cover;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.image-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.image-navbar li {
    margin-right: 20px;
}

.image-navbar li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.image-navbar li a:hover {
    text-decoration: underline;
}

2. 视频背景导航栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Background Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="video-container">
        <video autoplay muted loop id="background-video">
            <source src="background.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <nav class="navbar video-navbar">
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#blog">博客</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.video-container {
    position: relative;
    height: 60px;
    overflow: hidden;
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.video-navbar {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.5); /* Add a semi-transparent overlay */
}

.video-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.video-navbar li {
    margin-right: 20px;
}

.video-navbar li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.video-navbar li a:hover {
    text-decoration: underline;
}

3. 颜色渐变背景导航栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Background Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar gradient-navbar">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.gradient-navbar {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #7f7fd5);
    background-size: 800% 800%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.gradient-navbar li {
    margin-right: 20px;
}

.gradient-navbar li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.gradient-navbar li a:hover {
    text-decoration: underline;
}

这三种导航栏背景样式可以根据你博客的需求和风格来选择使用。图片背景和视频背景需要相应的图片或视频文件，而颜色渐变背景可以通过CSS动画实现。

为了实现一个可以折叠的导航栏，我们需要添加JavaScript以处理折叠/展开的行为，并且使用媒体查询来确保在不同设备上有良好的兼容性。以下是基于前面提到的三种样式实现的可折叠导航栏示例。

基本样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Collapsible Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar basic-navbar">
        <div class="nav-header">
            <span class="nav-toggle" id="nav-toggle">☰</span>
        </div>
        <ul class="nav-menu" id="nav-menu">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
}

.basic-navbar {
    background-color: #333;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.nav-header {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

.basic-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.basic-navbar li {
    margin-right: 20px;
}

.basic-navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.basic-navbar li a:hover {
    background-color: #111;
}

@media (max-width: 768px) {
    .basic-navbar ul {
        flex-direction: column;
        display: none;
        width: 100%;
    }

    .basic-navbar ul.active {
        display: flex;
    }

    .nav-toggle {
        display: block;
    }
}

JavaScript

document.getElementById('nav-toggle').addEventListener('click', function() {
    document.getElementById('nav-menu').classList.toggle('active');
});

现代样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Collapsible Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar modern-navbar">
        <div class="logo">博客站</div>
        <span class="nav-toggle" id="nav-toggle">☰</span>
        <ul class="nav-menu" id="nav-menu">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: 'Helvetica Neue', sans-serif;
}

.modern-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0044cc;
    padding: 0 20px;
}

.modern-navbar .logo {
    font-size: 24px;
    color: white;
    font-weight: bold;
}

.nav-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

.modern-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.modern-navbar li {
    margin-left: 20px;
}

.modern-navbar li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.modern-navbar li a:hover {
    border-bottom: 2px solid white;
}

@media (max-width: 768px) {
    .modern-navbar ul {
        flex-direction: column;
        display: none;
        width: 100%;
        text-align: center;
    }

    .modern-navbar ul.active {
        display: flex;
    }

    .nav-toggle {
        display: block;
    }
}

JavaScript

document.getElementById('nav-toggle').addEventListener('click', function() {
    document.getElementById('nav-menu').classList.toggle('active');
});

极简样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal Collapsible Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar minimal-navbar">
        <span class="nav-toggle" id="nav-toggle">☰</span>
        <ul class="nav-menu" id="nav-menu">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: 'Open Sans', sans-serif;
}

.minimal-navbar {
    background-color: white;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.nav-toggle {
    display: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
}

.minimal-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.minimal-navbar li {
    margin-right: 20px;
}

.minimal-navbar li a {
    color: #333;
    text-decoration: none;
    padding: 10px;
    font-size: 16px;
}

.minimal-navbar li a:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .minimal-navbar ul {
        flex-direction: column;
        display: none;
        width: 100%;
    }

    .minimal-navbar ul.active {
        display: flex;
    }

    .nav-toggle {
        display: block;
    }
}

JavaScript

document.getElementById('nav-toggle').addEventListener('click', function() {
    document.getElementById('nav-menu').classList.toggle('active');
});

这些导航栏在较大屏幕上显示为水平布局，在较小屏幕上显示为垂直布局，并且在移动设备上可以通过点击汉堡菜单按钮（☰）进行折叠和展开。每个示例都确保在不同设备上有良好的兼容性，并保持其各自的样式和设计。

当然，我们可以将前面提到的图片、视频和渐变颜色背景结合到可折叠的导航栏中。以下是实现这些效果的详细示例。

图片背景导航栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Background Collapsible Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar image-navbar">
        <div class="nav-header">
            <span class="nav-toggle" id="nav-toggle">☰</span>
        </div>
        <ul class="nav-menu" id="nav-menu">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.image-navbar {
    background: url('background.jpg') no-repeat center center;
    background-size: cover;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.nav-header {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

.image-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.image-navbar li {
    margin-right: 20px;
}

.image-navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.image-navbar li a:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .image-navbar ul {
        flex-direction: column;
        display: none;
        width: 100%;
    }

    .image-navbar ul.active {
        display: flex;
    }

    .nav-toggle {
        display: block;
    }
}

JavaScript

document.getElementById('nav-toggle').addEventListener('click', function() {
    document.getElementById('nav-menu').classList.toggle('active');
});

视频背景导航栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Background Collapsible Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="video-container">
        <video autoplay muted loop id="background-video">
            <source src="background.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <nav class="navbar video-navbar">
            <div class="nav-header">
                <span class="nav-toggle" id="nav-toggle">☰</span>
            </div>
            <ul class="nav-menu" id="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#blog">博客</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.video-container {
    position: relative;
    height: 60px;
    overflow: hidden;
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.video-navbar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.5); /* Add a semi-transparent overlay */
}

.nav-header {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

.video-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.video-navbar li {
    margin-right: 20px;
}

.video-navbar li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.video-navbar li a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .video-navbar ul {
        flex-direction: column;
        display: none;
        width: 100%;
    }

    .video-navbar ul.active {
        display: flex;
    }

    .nav-toggle {
        display: block;
    }
}

JavaScript

document.getElementById('nav-toggle').addEventListener('click', function() {
    document.getElementById('nav-menu').classList.toggle('active');
});

颜色渐变背景导航栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Background Collapsible Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar gradient-navbar">
        <div class="nav-header">
            <span class="nav-toggle" id="nav-toggle">☰</span>
        </div>
        <ul class="nav-menu" id="nav-menu">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#blog">博客</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.gradient-navbar {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #7f7fd5);
    background-size: 800% 800%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.nav-header {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

.gradient-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.gradient-navbar li {
    margin-right: 20px;
}

.gradient-navbar li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.gradient-navbar li a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .gradient-navbar ul {
        flex-direction: column;
        display: none;
        width: 100%;
    }

    .gradient-navbar ul.active {
        display: flex;
    }

    .nav-toggle {
        display: block;
    }
}

JavaScript

document.getElementById('nav-toggle').addEventListener('click', function() {
    document.getElementById('nav-menu').classList.toggle('active');
});

这些示例结合了折叠功能和不同背景样式，确保在不同设备上都有良好的兼容性。通过点击汉堡菜单按钮，导航菜单会在移动设备上展开和折叠。