A simple, multi-level sidebar nav. Features pure css "fly in" subnav, that leaves icons of parent nav visible. Nav items will scroll (overflow-y) if needed. Uses transforms and transitions.
A Pen by Guilherme Maciel on CodePen.
<section class="app"> | |
<aside class="sidebar"> | |
<nav class="sidebar-nav"> | |
<ul> | |
<li> | |
<a href="#"><i class="ion-bag"></i> <span>Bags</span></a> | |
<ul class="nav-flyout"> | |
<li> | |
<a href="#"><i class="ion-bag"></i> <span>Handbags</span></a> | |
<ul class="nav-flyout-2"> | |
<li> | |
<a href="#"><i class="ion-ios-color-filter-outline"></i>Women</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-clock-outline"></i>Men</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-android-star-outline"></i>Unisex</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="#"><i class="ion-android-star-outline"></i>Luggage</a> | |
<ul class="nav-flyout-2"> | |
<li> | |
<a href="#"><i class="ion-ios-color-filter-outline"></i>id2</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-clock-outline"></i>id3</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-android-star-outline"></i>id4</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-heart-broken"></i>id5</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="#"><i class="ion-heart-broken"></i>Informações de Gestão</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-settings"></i> <span class="">Controls</span></a> | |
<ul class="nav-flyout"> | |
<li> | |
<a href="#"><i class="ion-ios-alarm-outline"></i>Watch</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-camera-outline"></i>Creeper</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-chatboxes-outline"></i>Hate</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-cog-outline"></i>Grinder</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-medical-outline"></i> <span class="">cocaine</span></a> | |
<ul class="nav-flyout"> | |
<li> | |
<a href="#"><i class="ion-ios-alarm-outline"></i>Watch</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-camera-outline"></i>Creeper</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-chatboxes-outline"></i>Hate</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-cog-outline"></i>Grinder</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="#"><i class="ion-bag"></i> <span>Identificação</span></a> | |
<ul class="nav-flyout"> | |
<li> | |
<a href="#"><i class="ion-bag"></i> <span>Informações territoriais</span></a> | |
<ul class="nav-flyout-2"> | |
<li> | |
<a href="#"><i class="ion-ios-color-filter-outline"></i>id2</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-clock-outline"></i>id3</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-android-star-outline"></i>id4</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-heart-broken"></i>id5</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="#"><i class="ion-android-star-outline"></i>Secretaria de Saúde</a> | |
<ul class="nav-flyout-2"> | |
<li> | |
<a href="#"><i class="ion-ios-color-filter-outline"></i>id2</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-ios-clock-outline"></i>id3</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-android-star-outline"></i>id4</a> | |
</li> | |
<li> | |
<a href="#"><i class="ion-heart-broken"></i>id5</a> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="#"><i class="ion-heart-broken"></i>Informações de Gestão</a> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</nav> | |
</aside> | |
</section> |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
@import "bourbon"; | |
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600); | |
body{ | |
font-family: "Lato"; | |
font-size: 100%; | |
overflow-y: scroll; | |
font-family: sans-serif; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
text-rendering: optimizeLegibility; | |
background-color: #fefefe; | |
} | |
a{ | |
text-decoration: none; | |
@include transition(all 0.6s ease); | |
&:hover{ | |
@include transition(all 0.6s ease); | |
} | |
} | |
.app{ | |
height: 100vh; | |
} | |
/* ------------- | |
Sidebar | |
----------------*/ | |
.sidebar { | |
position: absolute; | |
//width: 33.3333%; | |
width: 25em; | |
height: 100%; | |
top: 0; | |
overflow:hidden; | |
background-color: #19222a; | |
-webkit-transform: translateZ(0); | |
visibility: visible; | |
-webkit-backface-visibility: hidden; | |
header{ | |
background-color: #09f; | |
width: 100%; | |
display:block; | |
padding: 1em; | |
} | |
} | |
/* ------------- | |
Sidebar Nav | |
----------------*/ | |
.sidebar-nav { | |
position: fixed; | |
//width: 13em; | |
background-color: #19222a; | |
height: 100%; | |
font-weight: 400; | |
font-size: 1.2em; | |
overflow: auto; | |
padding-bottom: 6em; | |
z-index: 9; | |
overflow: hidden; | |
-webkit-overflow-scrolling: touch; | |
ul{ | |
list-style:none; | |
display: block; | |
padding: 0; | |
margin: 0; | |
li{ | |
margin-left: 0; | |
padding-left: 0; | |
//min-width: 13em; | |
display:inline-block; | |
width: 100%; | |
height: 3em; | |
a{ | |
color: rgba(255,255,255,0.9); | |
font-size: 0.75em; | |
padding: 1.05em 1em; | |
position: relative; | |
display:block; | |
&:hover{ | |
background-color: rgba(0,0,0,0.9); | |
@include transition(all 0.6s ease); | |
} | |
} | |
/* ------------- | |
Sidebar: icons | |
----------------*/ | |
i{ | |
font-size: 1.8em; | |
padding-right: 0.5em; | |
display: inline; | |
vertical-align:middle; | |
} | |
} | |
} | |
/* ------------- | |
Chev elements | |
----------------*/ | |
& > ul > li > a:after, & > ul > li > ul > li > a:after{ | |
content: '\f125'; | |
font-family: ionicons; | |
font-size: 0.5em; | |
width: 10px; | |
color: #fff; | |
position: absolute; | |
right: 2em; | |
top: 45%; | |
} | |
/* ------------- | |
Nav-Flyout | |
----------------*/ | |
& .nav-flyout { | |
position: absolute; | |
background-color: #0F161D; | |
z-index: 9; | |
left: 2.5em; | |
top: 1; | |
height: 100vh; | |
@include transform(translateX(100%)); | |
@include transition(all 0.5s ease); | |
a:hover{ | |
background-color: #09f; | |
} | |
} | |
& .nav-flyout-2 { | |
position: absolute; | |
background-color: #080D11; | |
z-index: 9; | |
left: 2.5em; | |
top: 1; | |
height: 100vh; | |
@include transform(translateX(100%)); | |
@include transition(all 0.5s ease); | |
a:hover{ | |
background-color: #09f | |
} | |
} | |
/* -------------Hover----------------*/ | |
& ul > li:hover{ | |
.nav-flyout{ | |
@include transform(translateX(0)); | |
@include transition(all 0.5s ease); | |
} | |
& ul > li:hover{ | |
.nav-flyout-2{ | |
@include transform(translateX(0)); | |
@include transition(all 0.5s ease); | |
} | |
} | |
} | |
} | |
.sidebar-nav ul li:hover > a, .sidebar-nav ul li a.hover{ | |
background-color: #09f; | |
color: #000; | |
} |