CODEWITHSUNDEEP
javascriptcss
tolga
tolga

Reputation: 2800

Closing a menu only with CSS

I succeeded to remove javascript in my mobile design and open side menu only by CSS. My side menu is like:

<div class="all-content">
    <div id="menu-content" class="menu-content">
        .... menu content....
    </div>
</div>

Link to open menu:

 <a href="#menu-content"><i class="fa fa-navigation></i></a>

and in CSS:

.menu-content{
    opacity: 0;
    z-index: 0;
    left: -100%;
}

.menu-content:target{
    opacity: 1;
    z-index: 1000;
    left: 0px;
}

And this works fine!

What I want is to close this menu by clicking "anywhere out of the menu" without javascript.

I'm aware that clicking any link will close this menu but I couldn't find how to do it binding with whole content.

Thanks by now.

Upvotes: 1

Views: 55

Answers (1)

AmmarCSE
AmmarCSE

Reputation: 30557

  1. Make a checkbox and have it essentially hidden with opacity:0
  2. Have it cover large areas with width/height:500px
  3. Have it position:absolute to not effect the position of surrounding elements
  4. Write a css style to hide the siblings of the :checked checkbox

#CheckBox:checked ~ .menu-content {
  display: none;
}
#CheckBox {
  width: 500px;
  height: 500px;
  opacity: 0;
  position: absolute;
}
<input id="CheckBox" type="checkbox" />
<div id="menu-content" class="menu-content">
  Side Menu
</div>

Upvotes: 3

Related Questions