第八章利用CSS制作导航栏

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

1. 响应式设计

介绍： 响应式设计是指网页能够根据不同设备屏幕尺寸和分辨率自适应调整布局和样式，以确保在手机、平板和桌面等设备上都能提供良好的用户体验。

CSS实现：

@media (max-width: 768px) {.nav-menu {flex-direction: column;position: absolute;background-color: #333;width: 100%;top: 60px;left: 0;display: none;}.nav-item {text-align: center;margin: 10px 0;}.hamburger {display: block;}
}

这段代码使用媒体查询来调整导航栏的样式，当屏幕宽度小于768px时，导航菜单会垂直排列并默认隐藏，同时显示汉堡菜单按钮。

2. 汉堡菜单功能

介绍： 汉堡菜单（Hamburger Menu）是一个常见的移动设备导航图标，通常由三条横线组成，点击时可以展开或收起导航菜单。

HTML:

<button class="hamburger" onclick="toggleMenu()">☰</button>

CSS:

.hamburger {display: none;font-size: 24px;background: none;border: none;color: #fff;cursor: pointer;
}@media (max-width: 768px) {.hamburger {display: block;}
}

JavaScript:

function toggleMenu() {const menu = document.querySelector('.nav-menu');menu.classList.toggle('active');
}

这段代码通过JavaScript控制导航菜单的显示和隐藏，点击汉堡菜单按钮时会切换.nav-menu的active类。

3. 悬停效果

介绍： 悬停效果是指当鼠标悬停在元素上时触发的视觉效果，可以提高用户的交互体验。

CSS实现：

.nav-link:hover {color: #a9a9a9;
}

这段代码使得导航链接在鼠标悬停时颜色变化，增加了视觉反馈。

4. 活动链接高亮

介绍： 活动链接高亮是指当前页面对应的导航链接会以不同的样式显示，帮助用户识别当前所在页面。

CSS实现：

.nav-link.active {color: #007bff;font-weight: bold;
}

这段代码使得当前页面的导航链接颜色变为蓝色并加粗。

额外功能

a. 下拉菜单

介绍： 下拉菜单允许用户通过点击一个导航项来展开更多的选项，适用于有多层次菜单的网站。

HTML:

<li class="nav-item"><a href="#" class="nav-link">Services</a><ul class="dropdown-menu"><li><a href="#">Web Design</a></li><li><a href="#">Development</a></li></ul>
</li>

CSS:

.dropdown-menu {display: none;position: absolute;background-color: #333;
}.dropdown-menu li {text-align: left;padding: 10px;
}

这段代码创建了一个简单的下拉菜单，当鼠标悬停在“Services”导航项上时显示。

b. 渐变背景

介绍： 渐变背景可以为网站添加更现代和吸引人的视觉效果。

CSS实现：

.navbar {background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 100%);
}

这段代码为导航栏添加了一个从紫色到蓝色的渐变背景。

c. 动画效果

介绍： 动画效果可以提升网站的交互性和吸引力，例如在导航链接上添加渐变效果。

CSS实现：

.nav-link {position: relative;transition: color 0.3s ease;
}.nav-link::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background: #007bff;transform: scaleX(0);transition: transform 0.3s ease;
}.nav-link:hover::before {transform: scaleX(1);
}

这段代码为导航链接添加了一个渐变的下划线动画效果。

通过这些功能和代码示例，你可以创建一个功能丰富、视觉效果出众的水平导航栏。你可以根据需要进一步自定义样式和功能。

我们将上述功能整合到一个HTML页面中，并使用内嵌的<style>标签来包含CSS样式。这里是一个完整的示例，包括响应式设计、汉堡菜单功能、悬停效果、活动链接高亮、品牌Logo和搜索框。

完整的HTML页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Simple Horizontal Navigation Bar</title><style>/* 重置基本样式 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 导航栏样式 */.navbar {background-color: #333;color: #fff;height: 60px;display: flex;justify-content: center;align-items: center;}/* 导航栏容器样式 */.navbar-container {width: 100%;max-width: 1200px;display: flex;justify-content: space-between;align-items: center;}/* Logo样式 */.navbar-logo {font-size: 24px;font-weight: bold;color: #fff;text-decoration: none;}/* 导航菜单样式 */.nav-menu {display: flex;list-style: none;}/* 导航项样式 */.nav-item {margin: 0 15px;}/* 导航链接样式 */.nav-link {color: #fff;text-decoration: none;font-size: 18px;transition: color 0.3s ease;}/* 悬停效果 */.nav-link:hover {color: #a9a9a9;}/* 活动链接高亮 */.nav-link.active {color: #007bff;font-weight: bold;}/* 汉堡菜单样式 */.hamburger {display: none;font-size: 24px;background: none;border: none;color: #fff;cursor: pointer;}/* 搜索框样式 */.search-container {display: flex;align-items: center;margin-left: 20px;}.search-container input {padding: 5px;border: 1px solid #ccc;border-radius: 4px;}.search-container button {background: none;border: none;color: #fff;cursor: pointer;}/* 响应式设计 */@media (max-width: 768px) {.nav-menu {flex-direction: column;position: absolute;background-color: #333;width: 100%;top: 60px;left: 0;display: none;}.nav-item {text-align: center;margin: 10px 0;}.hamburger {display: block;}.search-container {display: none;}}</style>
</head>
<body><nav class="navbar"><div class="navbar-container"><a href="#" class="navbar-logo">MyWebsite</a><ul class="nav-menu"><li class="nav-item"><a href="#home" class="nav-link active">Home</a></li><li class="nav-item"><a href="#services" class="nav-link">Services</a></li><li class="nav-item"><a href="#about" class="nav-link">About</a></li><li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li></ul><div class="search-container"><input type="text" placeholder="Search..." name="search"><button type="submit">🔍</button></div><button class="hamburger" onclick="toggleMenu()">☰</button></div>
</nav><script>function toggleMenu() {const menu = document.querySelector('.nav-menu');menu.classList.toggle('active');}
</script></body>
</html>

说明

内嵌CSS：所有CSS样式都放在<style>标签内，这样可以确保样式直接应用于HTML页面。
响应式设计：通过媒体查询，当屏幕宽度小于768px时，导航菜单会垂直排列并默认隐藏，同时显示汉堡菜单按钮。
汉堡菜单功能：点击汉堡菜单按钮会切换.nav-menu的active类，从而显示或隐藏导航菜单。
悬停效果：导航链接在鼠标悬停时颜色变化。
活动链接高亮：为当前页面的链接添加active类，使其颜色和字体加粗，突出显示。
品牌Logo：设置品牌Logo的字体大小、颜色和无下划线。
搜索框：在导航栏中添加搜索框，方便用户快速搜索网站内容。

这个示例提供了一个完整的水平导航栏实现，包括响应式设计和汉堡菜单功能，适用于不同设备和屏幕尺寸。你可以根据需要进一步自定义样式和功能。

8.1.2 下拉子菜单导航栏的设计与实现

基本功能和事件

鼠标悬停显示下拉菜单
- 功能：当用户将鼠标悬停在导航项上时，显示下拉子菜单。
- 事件：使用mouseover事件来触发下拉菜单的显示。
- 代码示例：
```
item.addEventListener('mouseover', function () {let dropdown = this.querySelector('.dropdown-menu');if (dropdown) {dropdown.classList.add('active');}
});
```
鼠标移出隐藏下拉菜单
- 功能：当用户将鼠标从导航项移开时，隐藏下拉子菜单。
- 事件：使用mouseout事件来触发下拉菜单的隐藏。
- 代码示例：
```
item.addEventListener('mouseout', function () {let dropdown = this.querySelector('.dropdown-menu');if (dropdown) {dropdown.classList.remove('active');}
});
```

额外功能和事件

点击导航链接页面跳转

功能：点击导航链接时，页面跳转到相应的部分。
事件：使用click事件来处理链接的点击行为。

代码示例：

document.querySelectorAll('.nav-link').forEach(link => {link.addEventListener('click', function (event) {event.preventDefault(); // 阻止默认的链接跳转行为const target = this.getAttribute('href');document.querySelector(target).scrollIntoView({ behavior: 'smooth' });});
});

焦点事件管理

功能：当用户使用键盘导航时，高亮显示当前焦点的导航项。
事件：使用focus和blur事件来处理焦点的变化。

代码示例：

document.querySelectorAll('.nav-link').forEach(link => {link.addEventListener('focus', function () {this.classList.add('focus');});link.addEventListener('blur', function () {this.classList.remove('focus');});
});

CSS：

.nav-link.focus {background-color: #555;
}

移动设备上的点击展开下拉菜单

功能：在移动设备上，点击导航项展开或收起下拉子菜单。
事件：使用click事件来控制下拉菜单的显示和隐藏。

代码示例：

document.querySelectorAll('.nav-item').forEach(item => {item.addEventListener('click', function (event) {event.preventDefault(); // 阻止默认事件let dropdown = this.querySelector('.dropdown-menu');if (dropdown) {dropdown.classList.toggle('active');}});
});

键盘可访问性

功能：确保导航栏可以通过键盘进行导航，特别是对于使用屏幕阅读器的用户。
事件：使用keydown事件来处理键盘输入。

代码示例：

document.addEventListener('keydown', function (event) {if (event.key === 'ArrowDown') {let currentFocus = document.querySelector('.nav-link:focus');if (currentFocus) {let nextFocus = currentFocus.nextElementSibling;if (nextFocus) {currentFocus.blur();nextFocus.focus();}}}
});

7. 响应式导航切换

功能：在移动设备上，通常使用汉堡菜单来控制导航栏的显示和隐藏。
事件：使用click事件来切换导航栏的显示状态。

代码示例：

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');hamburger.addEventListener('click', function () {navMenu.classList.toggle('active');
});

CSS：

.hamburger {display: none; /* 在大屏幕上隐藏 */
}@media (max-width: 768px) {.hamburger {display: block; /* 在小屏幕上显示 */}.nav-menu {display: none; /* 默认隐藏 */position: absolute;background-color: #333;width: 100%;}.nav-menu.active {display: flex; /* 显示菜单 */}
}

8. 多级下拉菜单

功能：实现多级下拉菜单，允许用户进一步导航到更深层次的页面。
事件：使用mouseover和mouseout事件来控制各级下拉菜单的显示和隐藏。

代码示例：

document.querySelectorAll('.dropdown-menu .nav-link').forEach(link => {link.addEventListener('mouseover', function () {let subDropdown = this.nextElementSibling;if (subDropdown && subDropdown.classList.contains('dropdown-menu')) {subDropdown.classList.add('active');}});link.addEventListener('mouseout', function () {let subDropdown = this.nextElementSibling;if (subDropdown && subDropdown.classList.contains('dropdown-menu')) {subDropdown.classList.remove('active');}});
});

9. 动态加载内容

功能：在不刷新页面的情况下，动态加载下拉菜单中链接的内容。
事件：使用click事件来请求新内容并更新页面的相应部分。

代码示例：

document.querySelectorAll('.dropdown-menu a').forEach(link => {link.addEventListener('click', function (event) {event.preventDefault();const contentId = this.getAttribute('href');fetchContent(contentId);});
});function fetchContent(contentId) {fetch(contentId).then(response => response.text()).then(html => {document.querySelector('#content').innerHTML = html;});
}

10. 无障碍支持（Accessibility）

功能：确保导航栏对残障用户友好，例如通过屏幕阅读器可以访问。
事件：使用aria-expanded属性来表示下拉菜单的状态。

代码示例：

const dropdownToggle = document.querySelectorAll('.dropdown-toggle');dropdownToggle.forEach(toggle => {toggle.addEventListener('click', function () {const expanded = this.getAttribute('aria-expanded') === 'true' || false;this.setAttribute('aria-expanded', !expanded);});
});

11. 动画效果

功能：为下拉菜单添加动画效果，如淡入淡出或滑动效果。
事件：使用CSS过渡或transition属性。

CSS示例：

.dropdown-menu {opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;
}.dropdown-menu.active {opacity: 1;visibility: visible;
}

12. 搜索框自动完成

功能：在搜索框中输入时，显示自动完成的建议列表。
事件：使用input事件来触发搜索建议的更新。

代码示例：

const searchInput = document.querySelector('.search-input');
const suggestions = document.querySelector('.suggestions');searchInput.addEventListener('input', function () {const value = this.value;getSuggestions(value);
});function getSuggestions(value) {// 假设有一个API可以根据搜索词返回建议fetch(`/api/suggestions?q=${value}`).then(response => response.json()).then(data => {suggestions.innerHTML = data.map(suggestion => `<div>${suggestion}</div>`).join('');});
}

这些功能和事件可以根据你的具体需求进行调整和扩展，以创建一个功能丰富、用户体验良好的导航栏。

下面是一个具有中文内容的导航栏案例，它包含了响应式设计、下拉子菜单、悬停和点击事件、无障碍支持等功能。

完整的HTML页面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中文导航栏</title><style>/* 基本样式重置 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 导航栏样式 */.navbar {background-color: #333;color: #fff;height: 60px;display: flex;justify-content: center;align-items: center;}/* 导航栏容器样式 */.navbar-container {width: 100%;max-width: 1200px;display: flex;justify-content: space-between;align-items: center;}/* Logo样式 */.navbar-logo {font-size: 24px;font-weight: bold;color: #fff;text-decoration: none;}/* 导航菜单样式 */.nav-menu {display: flex;list-style: none;}/* 导航项样式 */.nav-item {position: relative;}/* 导航链接样式 */.nav-link {color: #fff;text-decoration: none;padding: 10px 15px;display: block;}/* 下拉菜单样式 */.dropdown-menu {display: none;position: absolute;background-color: #444;min-width: 150px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;border-radius: 5px;}/* 下拉菜单项样式 */.dropdown-menu a {color: #fff;padding: 10px 15px;text-decoration: none;display: block;}/* 悬停效果 */.dropdown-menu a:hover {background-color: #555;}/* 显示下拉菜单 */.dropdown-menu.active {display: block;}/* 汉堡菜单样式 */.hamburger {display: none;font-size: 24px;background: none;border: none;color: #fff;cursor: pointer;}/* 响应式设计 */@media (max-width: 768px) {.nav-menu {flex-direction: column;display: none;position: absolute;background-color: #333;width: 100%;top: 60px;left: 0;}.nav-item {text-align: center;margin: 10px 0;}.hamburger {display: block;}}</style>
</head>
<body><nav class="navbar"><div class="navbar-container"><a href="#" class="navbar-logo">我的网站</a><button class="hamburger" onclick="toggleMenu()">☰</button><ul class="nav-menu"><li class="nav-item"><a href="#首页" class="nav-link">首页</a></li><li class="nav-item"><a href="#服务" class="nav-link">服务</a><ul class="dropdown-menu"><li><a href="#服务1">服务1</a></li><li><a href="#服务2">服务2</a></li><li><a href="#服务3">服务3</a></li></ul></li><li class="nav-item"><a href="#关于我们" class="nav-link">关于我们</a></li><li class="nav-item"><a href="#联系方式" class="nav-link">联系方式</a></li></ul></div>
</nav><script>function toggleMenu() {const navMenu = document.querySelector('.nav-menu');navMenu.classList.toggle('active');}document.querySelectorAll('.nav-item').forEach(item => {item.addEventListener('mouseover', function () {let dropdown = this.querySelector('.dropdown-menu');if (dropdown) {dropdown.classList.add('active');}});item.addEventListener('mouseout', function () {let dropdown = this.querySelector('.dropdown-menu');if (dropdown) {dropdown.classList.remove('active');}});});
</script></body>
</html>

说明

HTML结构：<nav>标签定义了导航栏，<ul class="nav-menu">包含了导航项，每个<li>代表一个导航项，其中包含<a>标签定义的链接和嵌套的<ul class="dropdown-menu">定义的下拉子菜单。
CSS样式：.dropdown-menu定义了下拉菜单的基本样式，包括隐藏、定位和背景色。.dropdown-menu a定义了下拉菜单项的样式。.dropdown-menu.active用于显示下拉菜单。
JavaScript：
- toggleMenu函数用于在点击汉堡菜单时切换整个导航菜单的显示状态。
- 为每个.nav-item添加了鼠标悬停和移出的事件监听器，以显示和隐藏下拉子菜单。

这个示例提供了一个中文内容的水平导航栏，包括响应式设计、下拉子菜单、悬停效果等。你可以根据需要进一步自定义样式和功能。

8.2 纵向侧边导航栏

8.1.2简单纵向导航栏的设计与实现

1. HTML结构搭建

<div class="sidebar"><ul class="sidebar-menu"><li><a href="#home" class="sidebar-link">首页</a></li><li><a href="#services" class="sidebar-link">服务</a></li><li><a href="#about" class="sidebar-link">关于我们</a></li><li><a href="#contact" class="sidebar-link">联系方式</a></li></ul>
</div><div class="main-content"><!-- 主内容区域 -->
</div>

2. CSS样式设置

.sidebar {width: 200px;height: 100vh;background-color: #333;color: #fff;padding: 20px;position: fixed;left: 0;top: 0;
}.sidebar-menu {list-style-type: none;
}.sidebar-link {color: #fff;text-decoration: none;padding: 10px 15px;display: block;
}.sidebar-link:hover {background-color: #555;
}

3. 响应式设计

@media (max-width: 768px) {.sidebar {width: 100%;height: auto;position: relative;}.main-content {margin-left: 0;}
}

4. 悬停和点击效果

这部分已经在CSS中通过:hover伪类实现。

5. 无障碍支持

.sidebar-link:focus {outline: 2px solid #fff;
}

综合案例

结合以上细节，我们来构建一个综合案例。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纵向侧边导航栏</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.sidebar {width: 200px;height: 100vh;background-color: #333;color: #fff;padding: 20px;position: fixed;left: 0;top: 0;}.sidebar-menu {list-style-type: none;}.sidebar-link {color: #fff;text-decoration: none;padding: 10px 15px;display: block;}.sidebar-link:hover,.sidebar-link:focus {background-color: #555;outline: 2px solid #fff;}.main-content {margin-left: 200px;padding: 20px;height: 100vh;background-color: #f4f4f4;}@media (max-width: 768px) {.sidebar {width: 100%;height: auto;position: relative;}.main-content {margin-left: 0;}}</style>
</head>
<body><div class="sidebar"><ul class="sidebar-menu"><li><a href="#home" class="sidebar-link">首页</a></li><li><a href="#services" class="sidebar-link">服务</a></li><li><a href="#about" class="sidebar-link">关于我们</a></li><li><a href="#contact" class="sidebar-link">联系方式</a></li></ul>
</div><div class="main-content"><h1>欢迎来到我的网站</h1><p>这里是主内容区域。</p>
</div></body>
</html>

这个综合案例提供了一个具有响应式设计、悬停和焦点效果以及无障碍支持的纵向侧边导航栏。你可以根据需要进一步自定义样式和功能。

让我们在之前的综合案例基础上增加一些额外的功能和细节，以丰富纵向侧边导航栏的设计与实现。

6. 活动链接高亮

.sidebar-link.active {background-color: #444;font-weight: bold;
}

7. 下拉子菜单

<li class="sidebar-item"><a href="#services" class="sidebar-link">服务</a><ul class="sidebar-submenu"><li><a href="#service1" class="sidebar-link">服务1</a></li><li><a href="#service2" class="sidebar-link">服务2</a></li><li><a href="#service3" class="sidebar-link">服务3</a></li></ul>
</li>

.sidebar-submenu {list-style-type: none;padding-left: 20px;display: none;
}.sidebar-item:hover .sidebar-submenu {display: block;
}

8. 动画效果

.sidebar-link {transition: background-color 0.3s, color 0.3s;
}.sidebar-link:hover {color: #ddd;
}

9. 点击事件处理

JavaScript 用于处理点击事件，例如展开下拉子菜单。

document.querySelectorAll('.sidebar-item').forEach(item => {item.addEventListener('click', function (event) {const submenu = this.querySelector('.sidebar-submenu');if (submenu) {submenu.classList.toggle('active');event.preventDefault();}});
});

10. 无障碍支持增强

.sidebar-link:focus {outline: 2px solid #fff;background-color: #555;
}

11. 主内容区域样式增强

.main-content {transition: margin-left 0.3s;
}

综合案例增强版

结合以上所有细节，我们来构建一个增强版的综合案例。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纵向侧边导航栏增强版</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.sidebar {width: 200px;height: 100vh;background-color: #333;color: #fff;padding: 20px;position: fixed;left: 0;top: 0;}.sidebar-menu {list-style-type: none;}.sidebar-link {color: #fff;text-decoration: none;padding: 10px 15px;display: block;transition: background-color 0.3s, color 0.3s;}.sidebar-link:hover,.sidebar-link:focus {background-color: #555;color: #ddd;}.sidebar-link.active {background-color: #444;font-weight: bold;}.sidebar-submenu {list-style-type: none;padding-left: 20px;display: none;}.sidebar-item:hover .sidebar-submenu {display: block;}.main-content {margin-left: 200px;padding: 20px;height: 100vh;background-color: #f4f4f4;transition: margin-left 0.3s;}@media (max-width: 768px) {.sidebar {width: 100%;height: auto;position: relative;}.main-content {margin-left: 0;}}</style>
</head>
<body><div class="sidebar"><ul class="sidebar-menu"><li><a href="#home" class="sidebar-link">首页</a></li><li class="sidebar-item"><a href="#services" class="sidebar-link">服务</a><ul class="sidebar-submenu"><li><a href="#service1" class="sidebar-link">服务1</a></li><li><a href="#service2" class="sidebar-link">服务2</a></li><li><a href="#service3" class="sidebar-link">服务3</a></li></ul></li><li><a href="#about" class="sidebar-link">关于我们</a></li><li><a href="#contact" class="sidebar-link">联系方式</a></li></ul>
</div><div class="main-content"><h1>欢迎来到我的网站</h1><p>这里是主内容区域。</p>
</div><script>document.querySelectorAll('.sidebar-item').forEach(item => {item.addEventListener('click', function (event) {const submenu = this.querySelector('.sidebar-submenu');if (submenu) {submenu.classList.toggle('active');event.preventDefault();}});});
</script></body>
</html>

这个增强版的综合案例提供了一个具有响应式设计、悬停和焦点效果、下拉子菜单、动画效果以及无障碍支持的纵向侧边导航栏。你可以根据需要进一步自定义样式和功能。

8.3 底部固定导航栏

1. HTML结构搭建

<div class="bottom-navbar"><a href="#home" class="nav-link">首页</a><a href="#features" class="nav-link">功能</a><a href="#pricing" class="nav-link">价格</a><a href="#contact" class="nav-link">联系</a>
</div>

2. CSS样式设置

.bottom-navbar {width: 100%;background-color: #333;color: #fff;position: fixed;bottom: 0;left: 0;display: flex;justify-content: space-around;align-items: center;padding: 10px 0;box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}.nav-link {color: #fff;text-decoration: none;padding: 10px 15px;display: block;
}

3. 响应式设计

@media (max-width: 768px) {.bottom-navbar {flex-direction: column;align-items: flex-start;padding: 10px;}.nav-link {padding: 10px;border-top: 1px solid #555; /* 分隔链接 */}.nav-link:first-child {border-top: none; /* 第一个链接不需要上边框 */}
}

4. 悬停和点击效果

.nav-link:hover {background-color: #555;
}.nav-link:active {background-color: #777;
}

5. 无障碍支持

.nav-link:focus {outline: 2px solid #fff;
}

综合案例

结合以上细节，我们来构建一个综合案例。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>底部固定导航栏</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.content {padding: 20px;background-color: #f4f4f4;min-height: 100vh;}.bottom-navbar {width: 100%;background-color: #333;color: #fff;position: fixed;bottom: 0;left: 0;display: flex;justify-content: space-around;align-items: center;padding: 10px 0;box-shadow: 0 -2px 5px rgba(0,0,0,0.2);}.nav-link {color: #fff;text-decoration: none;padding: 10px 15px;display: block;}.nav-link:hover {background-color: #555;}.nav-link:active {background-color: #777;}.nav-link:focus {outline: 2px solid #fff;}@media (max-width: 768px) {.bottom-navbar {flex-direction: column;align-items: flex-start;padding: 10px;}.nav-link {padding: 10px;border-top: 1px solid #555;}.nav-link:first-child {border-top: none;}}</style>
</head>
<body><div class="content"><h1>欢迎来到我的网站</h1><p>这里是页面内容，可以滚动查看。</p><!-- 更多内容 -->
</div><div class="bottom-navbar"><a href="#home" class="nav-link">首页</a><a href="#features" class="nav-link">功能</a><a href="#pricing" class="nav-link">价格</a><a href="#contact" class="nav-link">联系</a>
</div></body>
</html>

这个综合案例提供了一个具有响应式设计、悬停和点击效果以及无障碍支持的底部固定导航栏。你可以根据需要进一步自定义样式和功能。

除了前面提到的功能和细节，我们还可以添加更多功能来增强底部固定导航栏的用户体验和视觉效果。以下是一些额外的功能和细节：

6. 动画效果

为导航链接添加动画效果，比如渐变或滑动效果，以增强视觉效果。

.nav-link {transition: transform 0.3s ease-in-out;
}.nav-link:hover {transform: scale(1.1); /* 鼠标悬停时放大 */
}

7. 动态图标

在导航链接中加入图标，可以是字体图标库如Font Awesome，增加视觉效果。

<div class="bottom-navbar"><a href="#home" class="nav-link"><i class="fa fa-home"></i> 首页</a><a href="#features" class="nav-link"><i class="fa fa-magic"></i> 功能</a><a href="#pricing" class="nav-link"><i class="fa fa-usd"></i> 价格</a><a href="#contact" class="nav-link"><i class="fa fa-envelope"></i> 联系</a>
</div>

确保在HTML头部引入Font Awesome的CDN链接：

html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

8. 回到顶部功能

添加一个回到顶部的按钮，方便用户快速返回页面顶部。

<a href="#top" class="nav-link" id="back-to-top"><i class="fa fa-arrow-up"></i> 顶部</a>

javascript

// 回到顶部按钮点击事件
document.getElementById('back-to-top').addEventListener('click', function (e) {e.preventDefault();window.scrollTo({ top: 0, behavior: 'smooth' });
});

9. 状态指示器

为当前激活的导航链接添加一个状态指示器，比如底部边框。

css

.nav-link.active {border-bottom: 2px solid #fff; /* 激活链接底部边框 */
}

10. 夜间模式切换

添加一个切换夜间模式的功能，改变页面的颜色主题。

html

<a href="#" class="nav-link" id="toggle-dark-mode">夜间模式</a>

javascript

// 夜间模式切换
document.getElementById('toggle-dark-mode').addEventListener('click', function (e) {e.preventDefault();document.body.classList.toggle('dark-mode');
});

css

/* 夜间模式样式 */
body.dark-mode {background-color: #333;color: #fff;
}body.dark-mode .bottom-navbar {background-color: #555;
}body.dark-mode .nav-link {color: #ccc;
}body.dark-mode .nav-link:hover {background-color: #666;
}

综合案例增强版

结合以上所有细节，我们来构建一个增强版的综合案例。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>底部固定导航栏增强版</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}.content {padding: 20px;background-color: #f4f4f4;min-height: 100vh;}.bottom-navbar {width: 100%;background-color: #333;color: #fff;position: fixed;bottom: 0;left: 0;display: flex;justify-content: space-around;align-items: center;padding: 10px 0;box-shadow: 0 -2px 5px rgba(0,0,0,0.2);}.nav-link {color: #fff;text-decoration: none;padding: 10px 15px;display: block;transition: transform 0.3s ease-in-out;}.nav-link:hover {transform: scale(1.1);}.nav-link:active {background-color: #777;}.nav-link:focus {outline: 2px solid #fff;}@media (max-width: 768px) {.bottom-navbar {flex-direction: column;align-items: flex-start;padding: 10px;}.nav-link {padding: 10px;border-top: 1px solid #555;}.nav-link:first-child {border-top: none;}}body.dark-mode {background-color: #333;color: #fff;}body.dark-mode .bottom-navbar {background-color: #555;}body.dark-mode .nav-link {color: #ccc;}body.dark-mode .nav-link:hover {background-color: #666;}</style>
</head>
<body><div class="content"><h1>欢迎来到我的网站</h1><p>这里是页面内容，可以滚动查看。</p><!-- 更多内容 -->
</div><div class="bottom-navbar"><a href="#home" class="nav-link"><i class="fa fa-home"></i> 首页</a><a href="#features" class="nav-link"><i class="fa fa-magic"></i> 功能</a><a href="#pricing" class="nav-link"><i class="fa fa-usd"></i> 价格</a><a href="#contact" class="nav-link"><i class="fa fa-envelope"></i> 联系</a><a href="#" class="nav-link" id="toggle-dark-mode"><i class="fa fa-moon"></i> 夜间模式</a><a href="#top" class="nav-link" id="back-to-top"><i class="fa fa-arrow-up"></i> 顶部</a>
</div><script>document.getElementById('back-to-top').addEventListener('click', function (e) {e.preventDefault();window.scrollTo({ top: 0, behavior: 'smooth' });});document.getElementById('toggle-dark-mode').addEventListener('click', function (e) {e.preventDefault();document.body.classList.toggle('dark-mode');});
</script></body>
</html>

这个增强版的综合案例提供了一个具有响应式设计、悬停和点击效果、动态图标、回到顶部功能、状态指示器、夜间模式切换以及无障碍支持的底部固定导航栏。你可以根据需要进一步自定义样式和功能。

综合案例————————养生馆


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style type="text/css">body{background-image: url("img/bg.jpg");background-repeat: no-repeat;background-size: 100%;}ul{margin: 0;padding: 0;list-style-type: none;}li{width: 25%;float: left;line-height: 50px;}img{margin-top: 70px;margin-right: 40px;}.footer{height: 50px;width: 100%;background-image: url("img/footer-bg0.jpg");border-top: 3px solid gray;text-align: center;z-index: 9998;position: fixed;bottom: 0;left: 0;}.footer-top{height: 90px;width: 90px;text-align: center;line-height: 90px;z-index: 9999;position: fixed;bottom: 0;left: 45%;}.footer-top a{border-radius: 90px;}.footer-top a:link, a:visited{display: block;font-size: 20px;color: brown;text-decoration: none;font-weight: bold;border-top: 3px solid gray;background-image: url("img/footer-top-bg1.jpg");}.footer-top a:hover{background-image: url("img/footer-top-bg2.jpg");color: white;}.footer a:link, a:visited{display: block;font-size: 20px;color: brown;text-decoration: none;font-weight: bold;}.footer a:hover{background-color: darkgray;border-left: 2px solid white;border-right: 2px solid white;font-size: 16px;color: red;}</style></head><body><div><marquee direction="right" scrollamount="20"><img src="img/marquee1.jpg"/><img src="img/marquee2.jpg"/><img src="img/marquee3.jpg"/></marquee></div><div class="footer-top"><a href="综合案例01.html">进入官网</a></div><div class="footer"><ul><li><a href="#">奇幻世界</a></li><li><a href="#">主题风采</a></li><li><a href="#">加盟相关</a></li><li><a href="#">友情推荐</a></li></ul></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style>body{background-image: url("img/bg.jpg");background-repeat: no-repeat;background-size: 100%;}.all{margin: 0px auto;width: 1300px;/* height: 1000px; */}.top{width: 1300px;height: 300px;background-image: url("img/top-bg01.jpg");background-repeat: no-repeat;background-size: 100%;}.cent{width: 300px;margin-left: auto;margin-right: auto;font-size: 58px;font-family: "楷体";color: lemonchiffon;font-style: italic;}.nav{width: 400px;float: left;margin-top: 30px;font-size: 40px;font-weight: bold;color: saddlebrown;}.main{width: 800px;height: 300px;float: left;margin-top: 10px;/* font-size: 50px; */}.footer{font-size: 16px;font-weight: bold;color: brown;text-align: center;clear: both;background-image: url("img/footer-bg0.jpg");}p{color: brown;font-size: 20px;}img{margin: 15px;}ul{list-style-type: none;}li{height: 40px;font-size: 20px;}a:link{font-size: 30px;text-decoration: none;color: brown;}a:hover{background-color: burlywood;color: white;}</style></head><body><div class="all"><div class="top"><br /><div class="cent">优名养生馆</div></div><nav><div class="nav"><table><tr>养生之道</tr><tr><ul><li><a href="#">运动养生</a></li><li><a href="#">四季养生</a></li><li><a href="#">健康检测</a></li></ul></tr><tr>中医养生</tr><tr><ul><li><a href="#">经络养生</a></li><li><a href="#">体质养生</a></li><li><a href="#">特色疗法</a></li></ul></tr></table></div></nav><div class="main"><img src="img/main01.jpg" align="left" width="350px"/><p>&emsp;&emsp;古人云:善养生者,上养神智、中养形态、下养筋骨。</p><p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p><p>&emsp;&emsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复:也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老:心理层面的养生包括养心、养性、养神。</p></div><hr /><div class="footer">版权所有&copy;优名养生馆</div></div></body>
</html>