卡卡網(wǎng)

本文介紹一個(gè)常見的欄目/目錄導(dǎo)航菜單(水平橫向)，它使用了CSS3+JS來(lái)實(shí)現(xiàn)。

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>

導(dǎo)航菜單外層容器使用nav標(biāo)簽，其class屬性值是nav-sections。

nav標(biāo)簽里面包含ul li列表標(biāo)簽，其中ul的class屬性值是menu，而li標(biāo)簽的class屬性值是menu-item。

欄目?jī)?nèi)容的外層容器使用main標(biāo)簽，其id的值是main-content，而其class的值是page-sections。

main標(biāo)簽內(nèi)部，每個(gè)內(nèi)容單元使用section標(biāo)簽作為容器，該標(biāo)簽的class值是page-section。每個(gè)section里面，都有一個(gè)h2標(biāo)簽，這是標(biāo)題標(biāo)簽，其id值對(duì)應(yīng)導(dǎo)航菜單各項(xiàng)目的鏈接錨點(diǎn)值。

JS

該實(shí)例使用了外部JS文件smoothscroll.min.js和smoothscroll-anchor-polyfill-1.3.4.min.js，所以在編寫JS程序前，先加載這兩個(gè)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代碼里的各個(gè)標(biāo)簽及其各個(gè)屬性值不能隨便更改，否則JS找不到HTML dom元素而導(dǎo)致導(dǎo)航的鼠標(biāo)點(diǎn)擊事件失效。

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代碼設(shè)置了導(dǎo)航菜單、內(nèi)容、文字、顏色等各種樣式，你可按照自己的喜好進(jìn)行修改。

總結(jié)

本文介紹了一個(gè)常見的欄目/目錄導(dǎo)航菜單(水平橫向)，該菜單樣式簡(jiǎn)單大氣，操作方便，它使用了CSS3+JS來(lái)實(shí)現(xiàn)。

您可能對(duì)以下文章也感興趣

• jQuery實(shí)現(xiàn)的水平可滾動(dòng)導(dǎo)航菜單
• 3款有下橫線平滑過(guò)渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)
• 簡(jiǎn)單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)
• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 漂亮的純CSS3水平導(dǎo)航菜單（有過(guò)渡動(dòng)畫效果）

• 可以展開和閉合子菜單的CSS3垂直導(dǎo)航菜單
• 又一個(gè)隨內(nèi)容滾動(dòng)而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動(dòng)而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡(jiǎn)單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】
• CSS3+JQuery實(shí)現(xiàn)的三級(jí)下拉導(dǎo)航菜單

標(biāo)簽: 導(dǎo)航菜單  目錄導(dǎo)航  欄目導(dǎo)航