-
20. Menú vertical 3 niveles (no me funciona bien)
Fuente. http://www.cssscript.com/multilevel-accordion-menu-with-plain-html-css/
<nav class="nav" role="navigation"> <ul class="nav__list"> <li> <input id="group-1" type="checkbox" hidden /> <label for="group-1"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li><a href="#">1st level item</a></li> <li> <input id="sub-group-1" type="checkbox" hidden /> <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-1" type="checkbox" hidden /> <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <input id="group-2" type="checkbox" hidden /> <label for="group-2"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> <li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <input id="sub-group-2" type="checkbox" hidden /> <label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-2" type="checkbox" hidden /> <label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <input id="group-3" type="checkbox" hidden /> <label for="group-3"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> <li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <input id="sub-group-3" type="checkbox" hidden /> <label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-3" type="checkbox" hidden /> <label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <input id="group-4" type="checkbox" hidden /> <label for="group-4"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> <li><a href="#">1st level item</a></li> <input id="sub-group-4" type="checkbox" hidden /> <label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> </ul> </li> </ul> </li> </ul> </nav>
CSS
.nav a, .nav label { display: block; padding: .85rem; color: #000; background-color: #fff; box-shadow: inset 0 -1px #1d1d1d; -webkit-transition: all .25s ease-in; transition: all .25s ease-in; } .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover { color: rgba(255, 255, 255, 0.5); background: #030303; } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding-left: 2rem; background: #252525; box-shadow: inset 0 -1px #373737; } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 4rem; background: #353535; box-shadow: inset 0 -1px #474747; } .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 6rem; background: #454545; box-shadow: inset 0 -1px #575757; } .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; } /** * Hide nested lists */ .group-list, .sub-group-list, .sub-sub-group-list { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; } .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */ max-height: 1000px; } label > span { float: right; -webkit-transition: -webkit-transform .65s ease; transition: transform .65s ease; } .nav__list input[type=checkbox]:checked + label > span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }