Html Question posted in
Some basic documentation can be found here.

Html – How to make in a single page a menu that opens other contents?

I was trying to make a page that could in a single page (ie. a single .html file) display different contents depending on which buttons the user clicked. ie. if the user clicks "about" it shows them an about section. But it’s not the kind of page that you scroll down to see all contents, but rather, contents that are not currently activated/clicked are hidden/invisible. I need to do it in HTML/CSS only so I would need a trick.

I thought of using :active to do it but I don’t get how it works after all because this doesn’t work:

<style type="text/css">
#content {display: none;}
#content:active {display: block;}
</style>
 
<a href="#content">press here to show content</a>
<div id="content">
if pressed content is shown
</div>

In what way can I do it, then?

Tags:

3

Answers


  1. 0

    To achieve the menu popup functionality, you should prefer using the checkbox input of HTML alongside the :checked CSS property.

    This would also help you to further add more functions w.r.t. the state of the input box, hence you will able to get an effect of menu is open or menu is closed as a property

    Try following the given example:

    body {
  user-select: none;
}

#content {
  display: none;
  width: 40%;
  margin-top: 4px;
  padding: 8px;
  background: skyblue;
  border-radius: 6px;
  cursor: pointer;
}

label {
  color: #292929;
  cursor: pointer;
}

label:hover {
  text-decoration: underline;
}

label:active {
  color: black;
}

#toggle:checked+#content {
  display: block;
}

#toggle {
  /** display: none; (to hide the checkbox icon) **/
}
    <label for="toggle">Press here to show content</label>
<input type="checkbox" id="toggle">
<div id="content">
  If pressed content is shown
</div>
    Login or Signup to reply.
  2. 0

    navbar, hide and show content on click

      .section { display: none; }
  .section:target { display: block; }
    <nav>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<div id="about" class="section">
  This is the about section.
</div>

<div id="contact" class="section">
  This is the contact section.
</div>
    Login or Signup to reply.
  3. 0

    Using the :active pseudo-class isn’t the right approach for toggling visibility in the way you’re describing. Instead, you can use HTML anchor links and the :target pseudo-class to achieve this effect. Here’s how you can do it:

    .content {
    display: none;
}

/* Display content when targeted */
.content:target {
    display: block;
}
    <!-- Buttons to toggle content -->
<button><a href="#about">About</a></button>
<button><a href="#contact">Contact</a></button>

<!-- Content sections -->
<div id="about" class="content">
    <h2>About</h2>
    <p>This is the about section.</p>
</div>

<div id="contact" class="content">
    <h2>Contact</h2>
    <p>This is the contact section.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search