I wanted to create a menu on the mobile version of the site, where when I clicked on the "menu" icon, I turned around (and did not close before clicking on the same icon again) the list with further navigation. I heard that you can do it through CSS and HTML (checkbox like) (without JS). Please help to deal with this issue. Thank you in advance.

  • In Google, the адаптивное выпадающее меню без js . - Visman
  • PureCSS Menu - stackanon
  • builder.swimbi.com is not a sickly menu - user33274

1 answer 1

  1. For PC we hide the MENU button (ie up to 767px - the MENU button will be hidden)
  2. The MENU button will appear at a lower resolution - in this example from 767px
  3. Snap the MENU button directly to the menu itself, for this we use the checked + pseudo- class using the selector ~ (right neighbors: all .list-menu at the same nesting level that follow the label ), you can also use + instead of ~ (this is a more strict version who will choose the first right neighbor).
  4. Styling checkbox

 *{ padding: 0; margin: 0; box-sizing: border-box; } nav{ background: #222; padding: 15px; } .list-menu{ display: flex; list-style: none; } .list-menu > li > a{ color: #fff; display: block; padding: 5px 15px; } .list-menu > li > a:hover{ background: #000; } #btn-menu{ display: none; } #btn-menu + label{ display: none; position: relative; color: #fff; height: 20px; z-index: 1; cursor: pointer; } #btn-menu + label:before{ content: '\f0c9'; display: inline-block; font-family:'FontAwesome'; font-size: 22px; } #btn-menu:checked + label:before{ content: '\f00d'; color: #f00; } @media screen and (max-width: 767px) { #btn-menu + label{ display: inline-block; } #btn-menu + label + .list-menu{ display: none; } #btn-menu:checked + label + .list-menu{ display: block; } } 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <nav> <input type="checkbox" id="btn-menu" /> <label for="btn-menu"></label> <ul class="list-menu"> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> </nav>

  • I saw this ... Thank you, but still, I do not understand the principle of work ... Could you explain? - Andrew
  • @ Andrei Added in response. - soledar10 pm
  • Font ship for one thing?)) - Jean-Claude
  • @ Jean-Claude - this is all just an example - soledar10
  • In older browsers, the pluses between the selectors will not roll and: before: after there too! use js! With him more fun)) animation can be done (smooth opening) and so on. What, at your site is not used at all JS ???? - Sergey V.