javascript - Closing a menu only with CSS -


i succeeded remove javascript in mobile design , open side menu css. side menu like:

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

link 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 want close menu clicking "anywhere out of menu" without javascript.

i'm aware clicking any link close menu couldn't find how binding whole content.

thanks now.

  1. make checkbox , have hidden opacity:0
  2. have cover large areas width/height:500px
  3. have position:absolute not effect position of surrounding elements
  4. write css style hide siblings of :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>


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -