Is there any quick code to make a clickable popup menu without js?

function13 0
Viewed 33

/*---POPUP MENU CSS---*/
.box{
position:fixed;
top: 0.1%;
left: 14px;
display: inline-block;
cursor: pointer;
}
ul{
list-style-type: none;
}
ul li{
font-family: Lato;
padding: 10px;
}
ul li a{
text-decoration: none;
color: black;
}
ul li:hover{
background-color: bisque;
}
.box1{
position: absolute;
top:3%;
left:15px;
z-index: 1;
background-color: floralwhite;
max-width: 260px;
box-sizing: border-box;
box-shadow: 2px 5px 15px black;
display: none;
}
.box2{
    position: absolute;
    top:3%;
    left:8%;
    z-index: 2;
    background-color: floralwhite;
    max-width: 260px;
    box-sizing: border-box;
    box-shadow: 2px 5px 15px black;
    display: none;
}
.box:hover .box1{
display: block;
}
#nav li:focus .box2 {
    display:block;
  }
<!--box-->
<div class="box">
        <img src="https://img.icons8.com/ios-filled/344/menu-rounded.png"
            height="35px"width="35px" id="menu">
              <!--box1-->
        <div class="box1">
            <ul>
         <li id="nav"><a href="#">item1  &#187;</a></li>
            <li><a href="#">item2</a></li>
            <li><a href="#" >item3</a></li>
            <li><a href="#">item4</a></li>
            <li><a href="#" >item5</a></li>
            <li><a href="#">item6</a></li>
            </ul>
           </div>
       </div>
     <!--box2-->
     <div class="box2">
      <ul>
        <li><a href="#">sub-item1</a></li>
        <li><a href="#">sub-item2</a></li>
        <li><a href="#">sub-item3</a></li>
        <li><a href="#">sub-item4</a></li>
      </ul>
    </div>

I'm trying to create a popup menu that appears when you click or hover on a small image(basically an icon)with only html and css no js. But problem is the main menu appears but sub-menu don't appear when you focus on some desire item from the list. Is there anything that I can do? I just want to build a very basic menu.`

css html
1 Answers

You can use checkbox inputs to simulate this behaviour with the :checked attribute.

By hiding the checkbox and making your menu icon a label for that input element, you can toggle the checked state and use CSS to display based on that instead of hover.

/*---POPUP MENU CSS---*/
.box {
  position: fixed;
  top: 0.1%;
  left: 14px;
  display: inline-block;
  cursor: pointer;
}

ul {
  list-style-type: none;
}

ul li {
  font-family: Lato;
  padding: 10px;
}

ul li a {
  text-decoration: none;
  color: black;
}

ul li:hover {
  background-color: bisque;
}

.box1 {
  position: absolute;
  top: 3%;
  left: 15px;
  z-index: 1;
  background-color: floralwhite;
  max-width: 260px;
  box-sizing: border-box;
  box-shadow: 2px 5px 15px black;
  display: none;
}

.box2 {
  position: absolute;
  top: 3%;
  left: 8%;
  z-index: 2;
  background-color: floralwhite;
  max-width: 260px;
  box-sizing: border-box;
  box-shadow: 2px 5px 15px black;
  display: none;
}

#nav li:focus .box2 {
  display: block;
}


/**
 * Checkbox toggle
 */

/* hide the checkbox */
.menu-toggle {
  display: none;
}

/* display the box when input is checked */
.menu-toggle:checked ~ .box1 {
  display: block;
}
<!--box-->
<div class="box">
  <!-- hidden checkbox -->
  <input class="menu-toggle" id="menu-toggle" type="checkbox" />
  
  <!-- label for the toggle -->
  <label for="menu-toggle">
    <img src="https://img.icons8.com/ios-filled/344/menu-rounded.png"
      height="35px"width="35px" id="menu">
  </label>
  
  <!--box1-->
  <div class="box1">
    <ul>
      <li id="nav"><a href="#">item1  &#187;</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
      <li><a href="#">item5</a></li>
      <li><a href="#">item6</a></li>
    </ul>
  </div>
</div>
<!--box2-->
<div class="box2">
  <ul>
    <li><a href="#">sub-item1</a></li>
    <li><a href="#">sub-item2</a></li>
    <li><a href="#">sub-item3</a></li>
    <li><a href="#">sub-item4</a></li>
  </ul>
</div>

Dan Carter0
Related