-
28. Menú vertical 4 niveles
<ul class="nav__list"> <li><a href="#">Bienvenido</a></li> <li><input id="group-1" type="checkbox" /> <label for="group-1"><span class="fa fa-angle-right"> </span> Bienvenido</label> <ul class="group-list"> <li><a href="#">1st level item</a></li> <li><input id="sub-group-1" type="checkbox" /> <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" /> <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" /> <label for="group-2"><span class="fa fa-angle-right"> </span> Amor</label> <ul class="group-list"> <li><a href="#">Flash</a></li> <li><a href="#">1st level item</a></li> <li><input id="sub-group-2" type="checkbox" /> <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" /> <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" /> <label for="group-3"><span class="fa fa-angle-right"> </span> First level</label> <ul class="group-list"> <li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <li><input id="sub-group-3" type="checkbox" /> <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" /> <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" /> <label for="group-4"><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-4" type="checkbox" /> <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>
CSS
<style><!-- .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(196, 202, 229, 0.5); } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding: 2px 7px 2px 2px; font-size: 17px; font-family: Old English Text MT; text-shadow: #606060 -2px -2px 4px;#939593 1px 1px 2px;#565856 1px 2px 3px; background: #C6E4E6; border-radius: 5px; width:120px; height: 63px; border: 1px dotted #ccc; box-shadow: inset 0 -1px #373737; } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #E6C6DC; } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 1rem; font-size: 17px; font-family: Old English Text MT; text-shadow: #606060 -2px -2px 4px;#939593 1px 1px 2px;#565856 1px 2px 3px; background:linear-gradient(45deg, #D8C6E6 30%,#ffffff 50%,#C6E4E6 70%); border-radius: 5px; width:120px; height: 63px; 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: #C6CCE6; } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 1rem; background: #E6E0C6; 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: #D4E6C6; } /** * 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); } --></style>