如何在我的 html/css 网站上垂直添加“填充”点导航样式

Question

I am creating my first html css website and would like to add a 'fill up' dot navigation style vertically on my page so my visitors know what page they are on.

Look at the website I have linked for clarification.

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

I assume I should use js but I don't know how to actually code it into my website.

Here is my code for my website.

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>

An example of my sections to indicate layout and page change.

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;
}

What JS code do I add and how do I link it to HTML and CSS?

If I click the second dot, it fills up, goes to that page and then unfills but the first dot stays red (active) so their isn't a transition.

In my html for the dot:

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

In my js file

// 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 for the dot:

    /* 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

Here's a basic implementation of what i think you're asking for.

The javascript is only there to add/remove the active css class. Everything is really happening in the CSS. I've added comments in the code to explain how it works, but feel free to hit me up if you have questions.

 // 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>