如何实现导航菜单激活状态下圆点静态显示效果

Got it, let's sort out this active state issue for your navigation menu! The main problem with your current code is that the :active pseudo-class only works when you're actively clicking the link—it doesn't stay applied once you release the mouse. Instead, we'll use a custom .active class that sticks to the current menu item, plus a bit of JavaScript to switch it when users click different links.

Here's the step-by-step solution:

1. Update the HTML (Add Default Active Class) #

First, add the .active class to the menu item you want to be active by default (e.g., menu1):

<body> 
    <nav class="navMenu"> 
        <a href="#" class="active">menu1</a> 
        <a href="#">menu2</a> 
        <a href="#">menu3</a> 
        <a href="#">menu4</a> 
        <div class="dot"></div> 
    </nav> 
</body>

2. Fix the CSS (Add Active State Styling & Correct Errors) #

I've cleaned up your CSS, fixed syntax errors, and added styles to keep the dot fixed on the active menu item:

body { font-family: "Sprint Sans Ofc"; } 
.navMenu { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    white-space: nowrap; /* Fixed capitalization */
    padding-right: 20px; 
    padding-left: 30px; /* Fixed syntax (was "padding left") */
} 
.navMenu a { 
    color: #000000; 
    text-decoration: none; 
    font-size: 1.3em; 
    text-transform: capitalize; /* Fixed spelling (was "captilalize") */
    font-weight: 600; 
    display: inline-block; 
    padding: 30px; 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out;
    position: relative; /* Added to ensure z-index works if needed */
} 
.navMenu .dot { 
    width: 5px; 
    height: 5px; 
    background: #D61E39; 
    border-radius: 50%; 
    opacity: 0; 
    margin: -44px; 
    -webkit-transform: translateX(30px); 
    transform: translateX(30px); 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out;
    position: relative; /* Keep dot positioned correctly */
} 

/* Hover states (kept your original logic) */
.navMenu a:nth-child(1):hover ~ .dot { 
    transform: translateX(145px); 
    opacity: 1; 
} 
.navMenu a:nth-child(2):hover ~ .dot { 
    transform: translateX(280px); 
    opacity: 1; 
} 
.navMenu a:nth-child(3):hover ~ .dot { 
    transform: translateX(415px); 
    opacity: 1; 
} 
.navMenu a:nth-child(4):hover ~ .dot { 
    transform: translateX(550px); 
    opacity: 1; 
}

/* Active state styling (this keeps the dot fixed) */
.navMenu a:nth-child(1).active ~ .dot { 
    transform: translateX(145px); 
    opacity: 1; 
} 
.navMenu a:nth-child(2).active ~ .dot { 
    transform: translateX(280px); 
    opacity: 1; 
} 
.navMenu a:nth-child(3).active ~ .dot { 
    transform: translateX(415px); 
    opacity: 1; 
} 
.navMenu a:nth-child(4).active ~ .dot { 
    transform: translateX(550px); 
    opacity: 1; 
}

Key CSS Fixes: #

• Corrected syntax errors like padding left → padding-left and captilalize → capitalize
• Removed the broken :active pseudo-class rules (since they don't do what you need)
• Added .active class selectors that mirror your hover transform values, so the dot stays in the right spot for the active item

3. Add JavaScript to Switch Active State #

To make the dot switch when users click different menu items, add this script at the end of your <body> tag:

// Get all navigation links
const navLinks = document.querySelectorAll('.navMenu a');

// Add click event to each link
navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        // Prevent default link behavior (remove this if you want actual navigation)
        e.preventDefault();
        
        // Remove active class from all links
        navLinks.forEach(item => item.classList.remove('active'));
        
        // Add active class to the clicked link
        link.classList.add('active');
    });
});

This script will toggle the .active class between menu items, and the dot will animate smoothly to the new active position thanks to your existing transition rules.

How It Works: #

• On page load, the menu item with .active will have the dot fixed next to it
• Hovering over other items still triggers the dot animation
• Clicking any menu item moves the .active class to it, and the dot transitions to the correct position automatically

内容的提问来源于stack exchange，提问作者david19999