纯CSS实现点击锚点链接隐藏Navbar的可行性咨询

Absolutely, this is totally doable with pure CSS—no extra checkboxes needed! Here's how you can make your navigation bar hide when clicking any of those anchor links, building on your existing toggle setup:

The Core Idea #

Since all your nav links point to in-page anchors (like #Normal_Flow), clicking them triggers a :target state on the corresponding section element. We can leverage this state alongside your existing #toggler checkbox to control the navbar's visibility seamlessly.

Implementation Steps #

Assuming your current CSS uses a sliding transition (a common pattern for off-canvas menus), here's the updated code to add the link-click hide behavior:

CSS Code

/* Default state: navbar hidden */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  /* Add your existing navbar styles here */
}

/* Show navbar when toggler is checked */
#toggler:checked ~ #navbar {
  transform: translateX(0);
}

/* Hide navbar when any anchor target is active (user clicked a nav link) */
body:has(:target) #toggler:not(:checked) ~ #navbar {
  transform: translateX(-100%);
}

How It Works #

1. body:has(:target): This selector detects when any element on the page is the target of an anchor link—this happens immediately after clicking one of your navigation links.
2. #toggler:not(:checked): We add this condition to ensure the behavior only applies when the menu toggle isn't actively checked. This way, if a user manually reopens the menu after navigating, it still functions as expected.
3. No !important hacks are needed here because we're using a more specific selector than the base "show navbar" rule, giving it higher priority naturally.

Browser Support #

The :has() pseudo-class is supported in all modern browsers (Chrome, Firefox, Safari, Edge) as of 2024. If you need to support older legacy browsers, this method won't work—but for most current use cases, this is a clean, reliable solution.

Alternative for Older Browsers (Less Ideal) #

If you must support browsers without :has() (like older Firefox versions), you could use the :focus state on nav links, though it's less consistent:

.nav-link:focus ~ #navbar {
  transform: translateX(-100%);
}

The downside here is the navbar will reappear once the link loses focus (e.g., if the user clicks elsewhere on the page), which may not align with your desired user experience.

Overall, the :has() approach is the best way to achieve your goal without modifying your existing HTML structure or adding extra checkboxes.

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