CSS-only way to revert a menu back to its previous state

Recently, I stumbled upon a responsive and minimalist menu that was created using only CSS. It's truly magical how the menu is able to expand and collapse without any need for JavaScript when the user clicks on the iconic "hamburger" symbol.

The transition effect seems to be achieved through the following code snippet:

#nav:checked ~ nav {
max-height: 200px; /* Adjust as needed based on your nav height */
}

nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s; 
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

VIEW THE COMPLETE CODE HERE

I couldn't help but wonder if it's possible to also minimize the menu when a user clicks on an item within the menu instead of just the hamburger icon. Any insights on this?

cssresponsive-design

Answer №1

Consider placing the items inside <label for="nav">

Check out this CODEPEN

HTML code:

<input id="nav" type="checkbox">
<label for="nav" class="button"></label>

<nav>
  <ul>
    <li><a href="#"><label for="nav">One</label></a></li>
    <li><a href="#"><label for="nav">Two</label></a></li>
    <li><a href="#"><label for="nav">Three</label></a></li>
    <li><a href="#"><label for="nav">Four</label></a></li>
  </ul>
</nav>

CSS style:

header {
  overflow: hidden;
  background: #222;
}

header a, header label.button {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  line-height: 20px;
}

header a:hover, header label.button:hover { color: #aaa; }

header label.button {
  float: right;
  padding: 18px 20px;
  cursor: pointer;
}

header label.button:after {
  content: "\2261";
  font-size: 1.8em;
}

header nav ul li label {
  display: block;
  cursor: inherit;
}

.logo {
  float: left;
  font-weight: bold;
  font-size: 1.5em;
}

nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s; 
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
   padding-bottom: 10px;
}

nav li {
  display: block;
  text-align: center;
}

nav a {
  padding: 10px;
  width: 100%;
}

#nav { display: none; }

#nav:checked ~ nav {
  max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}

@media only screen and (min-width: 700px) {

  header label.button { display: none; }

  nav {
    width: auto;
    max-height: none;
  }

  nav ul {
    padding: 0;
    padding-right: 10px;
  }

  nav li {
    display: inline-block;
    text-align: left;
  }

  header nav a {
    display: inline-block;
    padding: 20px 10px;
    width: auto;
  }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize CSS transition to smoothly reveal a hidden div with a fading effect

I am trying to create a hover effect where a caption displayed over an image fades in with a background color change. I have attempted to use transitions but they do not seem to work for block elements. For the code and JSFiddle, please visit this link. ...

htmlcss

Removing a single div box causes a ripple effect on another div box, despite their lack of connection

I'm struggling to remove the white box underneath the "features" section on this website (). The structure of the div is quite simple: <div class="donatenew"></div> and here's the CSS: .donatenew { width:100%; background: #f8f ...

csshtmlspacing

Position Ionicons center above h3 header in Bootstrap

My icons keep aligning to the left: <section class="section-what-i-do"> <div class="container"> <h2>What I do</h2> <p class="sub-header" id="learn-more-section">Studying, creating, learning</p> < ...

htmlcsstwitter-bootstrap

html - Bootstrap Navbar - Tips for aligning content on both sides

Exploring new frontiers with Bootstrap in Angular. I have successfully integrated a Bootstrap template navbar into my html-site. The navbar consists of text items in an ordered list and a search button along with a related form. My goal is to align the tex ...

htmlcssnavbarbootstrap-4

jQuery offset(coords) behaves inconsistently when called multiple times

I am attempting to position a div using the jQuery offset() function. The goal is to have it placed at a fixed offset from another element within the DOM. This is taking place in a complex environment with nested divs. What's puzzling is that when I ...

javascriptjquerycss

Generating CSS and PHP through Grunt

While working with yeoman, I've integrated grunt-php and managed to load PHP files successfully. However, the CSS file seems inaccessible. This could be due to SCSS not being compiled or the path in my index.php not pointing to the temporary CSS file. ...

cssgruntjsgrunt-usemin

The functionality of BASE64 encoding in HTML appears to be malfunctioning

I have exhausted all options in my attempt to display an image using a base64 string, but none of them seem to be working. I have tested it on IE6,7, Firefox 3. Can someone please point out what is wrong with the code below? <head> <STYLE type ...

htmlcssimagebase64data-uri

I'm facing an issue with two bootstrap pop-out carousels that are overlapping and cannot be utilized separately. What steps can I take to resolve this problem?

At the moment, I have set up two Bootstrap carousels with buttons to activate each one. However, when either button is clicked, both slide shows appear overlapping, causing me to lose control over them independently and making the design unappealing. You ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to ensure that a "loop once" animated GIF background will replay on each page refresh or load?

I currently have an animated GIF file set as the background image for my div, which was specifically configured in Photoshop to loop only once. Therefore, it only plays on the initial page load. Is there a way to reset the background image upon page refre ...

javascriptjqueryhtmlcsspage-refresh

Run a Javascript function two seconds after initiating

My goal is to implement a delay in JavaScript using either setInterval or setTimeout, but I am facing an issue where the primary element is getting removed. Code that works fine without Javascript delay: const selectAllWithAttributeAdStatus = document. ...

javascripthtmljquerycssajax

Is there a way to incorporate a bottom border into Vuetify's v-tabs component?

I am trying to achieve a specific result: https://i.sstatic.net/1Um2th3L.png This is how I accomplished it: <v-tabs> <v-tab v-for="(tab, i) in tabs" :key="i" v-bind="tab" ></v-tab> </v-tab ...

cssvue.jsvuejs3vuetifyjs3

Optimizing images for various screen sizes with responsive design

As I delve into using responsive images, a question has arisen. On my website, there is an icon that comes in two sizes: a small version measuring 74 pixels wide and a larger version at 94 pixels wide. <img alt="Section Gino" style="background-color: ...

htmlresponsive-designimgix

Creating a responsive touch slider: tips and tricks

I am looking to transform my gallery into a touch slider specifically for mobile devices. To achieve this, I have created two sections - one for desktop and another for mobile. I am utilizing the display property in a media query but my slider is not res ...

javascriptjquerycssbootstrap-4

Styling a Form Submission with CSS

I am currently working on a website that contains the following PHP code: echo "<form action='choice.php' method='post'>"; echo "<input type='submit' name='choice' value='left' /> "; As I am i ...

phpcsstwitter-bootstrap

Increase the right border size by half when the image is being hovered over

Seeking assistance with creating a hover image with a right border of color #000 that covers only 80% of the image's full length. I have attempted adjusting other "half border" codes for this purpose without success. Any suggestions on how to achieve ...

htmlcssborder

Space allocation among the columns' borders

My layout consists of 3 columns in a row, each with the class col-xs-4, covering the entire row. I am trying to add a border to each column without them overlapping. Currently, I have applied the border but there is no spacing between the columns. I want ...

htmlcsstwitter-bootstrap

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

I'm currently working on building a portfolio webpage with React, Vite, and Typescript, but I'm facing an issue where the content is not taking up the full height of the page. I have multiple pages with different lengths of content that I want to ...

htmlcssreactjs

Tips for altering text size within Angular Material form fields with floating placeholder

Looking to customize the font size of the placeholder text in an Angular Material form field? You can set two different font sizes: one for when the placeholder is normal and one for when it floats. Here's how you can achieve this: <mat-form-fiel ...

cssangularformssassangular-material2

How to traverse up to the parent element using XPath in nightwatch

Here is the structure I am dealing with: <div class="class"> <h4 class="class2"> "Condition" </h4> <div class = "click_class">Click_text </div> </div> I need to click on the element with class ="click ...

cssxpathautomated-testsnightwatch.js

A pair of buttons and text with varying alignment

Here is the code from my popup.htlm file: HTML <body> <select style="width: 100%;" multiple id="HLSlist"> </select> <span style="display:inline"> <button type="button" id="Deletebut">Delete</button> ...

htmlcssalignment