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.
- make checkbox , have hidden
opacity:0
- have cover large areas
width/height:500px
- have
position:absolute
not effect position of surrounding elements - 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
Post a Comment