如何在我的 html/css 網站上垂直添加“填充”點導航樣式

Question

我正在創建我的第一個 html css 網站，並想在我的頁面上垂直添加“填充”點導航樣式，以便我的訪問者知道他們在哪個頁面上。

查看我鏈接的網站以進行澄清。

https://tympanus.net/Development/DotNavigationStyles/

我認為我應該使用 js，但我不知道如何將它實際編碼到我的網站中。

這是我的網站代碼。

HTML：

<div class="container">
        <nav class="navbar">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

<section id="home">
            <img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
        </section>

我的部分示例以指示布局和頁面更改。

CSS：

    .container{
    widows:100%;
    height:100%;
    /* CSS Smooth Scroll */
    overflow-y:scroll;
    scroll-behavior:smooth;
    scroll-snap-type:y mandatory;
}

.navbar{
    position:fixed;
    top:0;
    z-index:1;
    display:flex;
    width:100%;
    height:60px;
    background:rgba(0,0,0,0.7);
}

.navbar ul{
    display:flex;
    list-style:none;
    width:100%;
    justify-content:center;
}

.navbar ul li{
    margin:0 1rem;
    padding:1rem;
}

我要添加什么 JS 代碼以及如何將其鏈接到 HTML 和 CSS？

如果我單擊第二個點，它會填滿，進入該頁面然后取消填充，但第一個點保持紅色（活動），因此它們不是過渡。

在我的 html 中為點：

<script src="dot-nav.js"></script>

在我的 js 文件中

// listen for clicks on the navbar
document.querySelector('.navbar').addEventListener('click', (e) => {

  // ignore it if the click isn't on an anchor element
    if (e.target.tagName.toLowerCase() === 'a') {

    // remove the 'active' class from all of the nav anchors
      document.querySelectorAll('.navbar a')
      .forEach(e => e.classList.remove('active'));

    // add the 'active' class to the clicked element
      e.target.classList.add('active');
  }
});

CSS 為點：

    /* position the navbar center right */

.navbar{
    position:fixed;
    right:32px;
    top:50%;
    transform: translateY(-50%);
}


/* style the individual nav items */
.navbar a {
    /* make them little circles */
    display: block;
    border-radius: 50%;
    border: 1px solid white;
    width: 20px;
    height: 20px;

    /* with some space between them */
    margin: 20px 0;

    /* hide the text content */
    text-indent: -999px;
    overflow: hidden;

    /* establish positioning conext for the ::after pseudo-elements (below)*/
    position: relative;
  }

  /* the "fill" */
.navbar a::after {
    /* won't render without a 'content' rule */
    content:""; 

    /* red fill */
    background-color: #ff0000;

    /* zero height until it's active */
    position: absolute;
    bottom: 0;
    height: 0;
    left: 0;
    right: 0;
    width: 100%;

    /* animate the height when it changes */
    transition: height 0.3s ease;
  }

  /* active and hovered elements */
.navbar a:hover::after,
.navbar a.active::after {
  /* change the height to 100%.
     the transition rule above will cause this to animate */
  height: 100%;
}

Answer 1

這是我認為您所要求的基本實現。

javascript 僅用於添加/刪除active的 css class。 一切都在 CSS 中真正發生。 我在代碼中添加了注釋來解釋它是如何工作的，但是如果您有任何問題，請隨時聯系我。

 // listen for clicks on the navbar document.querySelector('.navbar').addEventListener('click', (e) => { // ignore it if the click isn't on an anchor element if (e.target.tagName.toLowerCase() === 'a') { // remove the 'active' class from all of the nav anchors document.querySelectorAll('.navbar a').forEach(e => e.classList.remove('active')); // add the 'active' class to the clicked element e.target.classList.add('active'); } });

 html, body { font-family: sans-serif; letter-spacing: 2px; margin: 0; padding: 0; } ul { list-style: none; padding: 0; margin: 0; } /* position the navbar center right */.navbar { position: fixed; right: 32px; top: 50%; transform: translateY(-50%); } /* style the individual nav items */.navbar a { /* make them little circles */ display: block; border-radius: 50%; border: 1px solid white; width: 20px; height: 20px; /* with some space between them */ margin: 20px 0; /* hide the text content */ text-indent: -999px; overflow: hidden; /* establish positioning conext for the::after pseudo-elements (below)*/ position: relative; } /* the "fill" */.navbar a::after { /* won't render without a 'content' rule */ content: ''; /* white fill */ background-color: #fff; /* zero height until it's active */ position: absolute; bottom: 0; height: 0; left: 0; right: 0; width: 100%; /* animate the height when it changes */ transition: height 0.3s ease; } /* active and hovered elements */.navbar a:hover::after, .navbar a.active::after { /* change the height to 100%. the transition rule above will cause this to animate */ height: 100%; } /* make the sections occupy the full screen height */ section { height: 100vh; background: tomato; color: bisque; display: grid; place-items: center; }

 <div class="container"> <nav class="navbar"> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="home">home</section> <section id="about">about</section> <section id="services">service</section> <section id="contact">contact</section> </div>