【实例演示/源码下载】栏目/目录导航菜单(水平横向)
本文介绍一个常见的栏目/目录导航菜单(水平横向)，它使用了CSS3+JS来实现。
demodownload
HTML
<nav class="nav-sections">
<ul class="menu">
<li class="menu-item"><a class="menu-item-link active" href="#about">About</a></li>
<li class="menu-item"><a class="menu-item-link" href="#documentation">Documentation</a></li>
<li class="menu-item"><a class="menu-item-link" href="#showcase">Showcase</a></li>
<li class="menu-item"><a class="menu-item-link" href="#latest-news">Latest News</a></li>
<li class="menu-item"><a class="menu-item-link" href="#contact-us">Contact Us</a></li>
<div class="active-line"></div>
</ul>
</nav>
<main id="main-content" class="page-sections">
<section class="page-section">
<h2 class="section-title" id="about">About</h2>
<p>As you scroll through each section</p>
</section>
<section class="page-section">
<h2 class="section-title" id="documentation">Documentation</h2>
<ul>
<li>Lorem ipsum dolor sit</li>
<li>Ipsa dolor eveniet explicabo.</li>
</ul>
</section>
<section class="page-section">
<h2 class="section-title" id="latest-news">Latest News</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
<p>Itaque blanditiis soluta magni</p>
</section>
</main>
导航菜单外层容器使用nav标签，其class属性值是nav-sections。
nav标签里面包含ul li列表标签，其中ul的class属性值是menu，而li标签的class属性值是menu-item。
栏目内容的外层容器使用main标签，其id的值是main-content，而其class的值是page-sections。
main标签内部，每个内容单元使用section标签作为容器，该标签的class值是page-section。每个section里面，都有一个h2标签，这是标题标签，其id值对应导航菜单各项目的链接锚点值。
JS
该实例使用了外部JS文件smoothscroll.min.js和smoothscroll-anchor-polyfill-1.3.4.min.js，所以在编写JS程序前，先加载这两个JS文件。
<script src='dist/smoothscroll.min.js'></script>
<script src='dist/smoothscroll-anchor-polyfill-1.3.4.min.js'></script>
JS代码
<script>
const sectionsContainer = document.querySelector('.page-sections');
const sections = document.querySelectorAll('.page-section');
const nav = document.querySelector('.nav-sections');
const menu = nav.querySelector('.menu');
const links = nav.querySelectorAll('.menu-item-link');
const activeLine = nav.querySelector('.active-line');
const sectionOffset = nav.offsetHeight + 24;
const activeClass = 'active';
let activeIndex = 0;
let isScrolling = true;
let userScroll = true;
const setActiveClass = () => {
links[activeIndex].classList.add(activeClass);
};
const removeActiveClass = () => {
links[activeIndex].classList.remove(activeClass);
};
const moveActiveLine = () => {
const link = links[activeIndex];
const linkX = link.getBoundingClientRect().x;
const menuX = menu.getBoundingClientRect().x;
activeLine.style.transform = `translateX(${menu.scrollLeft - menuX + linkX}px)`;
activeLine.style.width = `${link.offsetWidth}px`;
};
const setMenuLeftPosition = position => {
menu.scrollTo({
left: position,
behavior: 'smooth' });
};
const checkMenuOverflow = () => {
const activeLink = links[activeIndex].getBoundingClientRect();
const offset = 30;
if (Math.floor(activeLink.right) > window.innerWidth) {
setMenuLeftPosition(menu.scrollLeft + activeLink.right - window.innerWidth + offset);
} else if (activeLink.left < 0) {
setMenuLeftPosition(menu.scrollLeft + activeLink.left - offset);
}
};
const handleActiveLinkUpdate = current => {
removeActiveClass();
activeIndex = current;
checkMenuOverflow();
setActiveClass();
moveActiveLine();
};
const init = () => {
moveActiveLine(links[0]);
document.documentElement.style.setProperty('--section-offset', sectionOffset);
};
links.forEach((link, index) => link.addEventListener('click', () => {
userScroll = false;
handleActiveLinkUpdate(index);
}));
window.addEventListener("scroll", () => {
const currentIndex = sectionsContainer.getBoundingClientRect().top < 0 ?
sections.length - 1 - [...sections].reverse().findIndex(section => window.scrollY >= section.offsetTop - sectionOffset * 2) :
0;
if (userScroll && activeIndex !== currentIndex) {
handleActiveLinkUpdate(currentIndex);
} else {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(() => userScroll = true, 100);
}
});
init();
</script>
从JS代码开头的const常量定义可知，HTML代码里的各个标签及其各个属性值不能随便更改，否则JS找不到HTML dom元素而导致导航的鼠标点击事件失效。
CSS
:root {
--space: 1rem;
--border: 4px;
--page-width: 80ch;
--font-family: "Helvetica", sans-serif;
--color-link: black;
--color-active: royalblue;
--ease: cubic-bezier(0.23, 1, 0.32, 1);
--duration: 350ms;
--section-offset: 0;
}
* {
box-sizing: border-box;
}
html {
--scroll-behavior: smooth;
scroll-behavior: var(--scroll-behavior);
}
@media (prefers-reduced-motion: reduce) {
html {
--scroll-behavior: auto;
}
}
body {
font-family: var(--font-family);
line-height: 1.5;
}
h1, h2, h3 {
font-weight: bold;
line-height: 1.25;
}
h1 {
font-size: 2.75rem;
}
h2 {
font-size: 2.25rem;
}
h3 {
font-size: 1.5rem;
}
ul {
list-style:none;
}
ul:not(.menu) {
list-style-type: disc;
margin-left: var(--space);
}
ul:not(.menu) > li + li {
margin-top: var(--space);
}
.nav-sections {
position: sticky;
top: 0;
width: 100%;
background-color: white;
box-shadow: inset lightgray 0 -1px 0, rgba(0, 0, 0, 0.15) 0 3px 10px 0;
z-index: 100;
}
.nav-sections .menu {
position: relative;
display: flex;
flex-wrap: nowrap;
overflow: scroll;
-ms-scroll-chaining: none;
overscroll-behavior: none;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 auto;
max-width: var(--page-width);
transform: translateZ(0);
transition: transform var(--ease) var(--duration);
}
.nav-sections .menu::-webkit-scrollbar {
display: none;
}
.nav-sections .menu-item-link {
display: block;
padding: calc(var(--space) * 1.5) var(--space);
text-decoration: none;
white-space: nowrap;
color: var(--color-link);
transition: color var(--ease) var(--duration);
}
.nav-sections .menu-item-link.active {
color: var(--color-active);
}
.active-line {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: var(--color-active);
transition: width var(--ease) var(--duration), transform var(--ease) var(--duration);
}
.placeholder-section {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 50vh;
background-color: lightgray;
}
.page-sections {
margin: 0 auto;
max-width: var(--page-width);
}
.page-section {
margin: calc(var(--space) * 2) 0;
padding: calc(var(--space) * 2) var(--space);
}
.page-section > * + * {
margin-top: calc(var(--space) * 1.5);
}
.section-title {
outline: none;
}
.section-title:before {
content: "";
display: block;
visibility: hidden;
pointer-events: none;
margin-top: calc(var(--section-offset) * -1px);
height: calc(var(--section-offset) * 1px);
}
CSS代码设置了导航菜单、内容、文字、颜色等各种样式，你可按照自己的喜好进行修改。
总结
本文介绍了一个常见的栏目/目录导航菜单(水平横向)，该菜单样式简单大气，操作方便，它使用了CSS3+JS来实现。
您可能对以下文章也感兴趣
- jQuery实现的水平可滚动导航菜单
- 3款有下横线平滑过渡效果的导航栏菜单
- 非常漂亮的响应式导航栏设计
- 简单实用的响应式导航菜单设计
- CSS3实现的可缩进的侧栏导航菜单
- 漂亮的纯CSS3水平导航菜单（有过渡动画效果）
- 可以展开和闭合子菜单的CSS3垂直导航菜单
- 又一个随内容滚动而变化的侧边/左侧目录导航
- 侧边/左侧目录导航随内容滚动而变化
- 纯CSS：非常漂亮的左侧导航/内容目录导航
- 简单却实用的CSS水平和垂直导航栏【演示/源码】
- CSS3+JQuery实现的三级下拉导航菜单
