技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

【實例演示/源碼下載】欄目/目錄導(dǎo)航菜單(水平橫向)

作者:admin    時間:2022-2-14 15:21:38    瀏覽:

本文介紹一個常見的欄目/目錄導(dǎo)航菜單(水平橫向),它使用了CSS3+JS來實現(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)簽,其中ulclass屬性值是menu,而li標(biāo)簽的class屬性值是menu-item。

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

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

JS

該實例使用了外部JS文件smoothscroll.min.jssmoothscroll-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代碼里的各個標(biāo)簽及其各個屬性值不能隨便更改,否則JS找不到HTML dom元素而導(dǎo)致導(dǎo)航的鼠標(biāo)點擊事件失效。

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é)

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

您可能對以下文章也感興趣

x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */