Just a simple idea for a navigation system based on hover
A Pen by Callum Findlay on CodePen.
<header> | |
<nav> | |
<ul> | |
<li> | |
<a href="#"> | |
<span>1</span> | |
<div class="nav-item-wrap"> | |
<p>Nav Item</p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<span>2</span> | |
<div class="nav-item-wrap"> | |
<p>Nav Item</p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<span>3</span> | |
<div class="nav-item-wrap"> | |
<p>Nav Item</p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<span>4</span> | |
<div class="nav-item-wrap"> | |
<p>Nav Item</p> | |
</div> | |
</a> | |
</li> | |
</ul> | |
</nav> | |
<div class="nav-icon-wrap"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
</header> |
/*//////// Variables ////////*/ | |
$white: #FFFFFF; | |
$orange: #E67357; | |
$darkblue: #1D9EB2; | |
$lightblue: #80C5CE; | |
/*//////// Sass ////////*/ | |
body { | |
height: 100%; | |
width: 100%; | |
line-height: 1.2; | |
-webkit-font-smoothing: antialiased; | |
background: $darkblue; | |
position: relative; | |
font-family: 'Work Sans', sans-serif; | |
text-align: center; | |
} | |
header { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 70px; | |
height: 100%; | |
background-color: $orange; | |
transition: width 0.5s ease-out; | |
box-sizing: border-box; | |
padding: 15px; | |
nav { | |
width: 100%; | |
height: 600px; | |
position: absolute; | |
top: 50%; | |
margin-top: -300px; | |
left: 0; | |
display: table; | |
padding: 0 15px; | |
box-sizing: border-box; | |
} | |
ul { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
li { | |
a { | |
padding: 30px 0; | |
display: block; | |
text-decoration: none; | |
border-top: 1px solid darken($orange, 10%); | |
color: $white; | |
transition: background-color 0.4s ease; | |
position: relative; | |
span { | |
opacity: 1; | |
display: block; | |
transform: translateY(0); | |
transition: opacity 0.4s ease, transform 0.5s ease; | |
} | |
&:hover { | |
background: darken($orange, 5%); | |
transition: background-color 0.2s ease; | |
span { | |
opacity: 0.2; | |
transition: opacity 0.4s ease 0.1s, transform 0.5s ease 0.1s; | |
transform: translateY(-15px); | |
} | |
.nav-item-wrap { | |
display: block; | |
opacity: 1; | |
visibility: visible; | |
} | |
} | |
} | |
&:first-child { | |
a { | |
border: 0; | |
} | |
} | |
} | |
&:hover { | |
width: 200px; | |
.nav-icon-wrap { | |
left: 210px; | |
height: 150px; | |
margin-top: -75px; | |
span { | |
background: darken($orange, 10%); | |
margin: 30px 0; | |
} | |
} | |
} | |
} | |
.nav-icon-wrap { | |
width: 10px; | |
height: 70px; | |
position: absolute; | |
top: 50%; | |
margin-top: -35px; | |
left: 80px; | |
transition: left 0.5s ease-out, margin 0.4s ease; | |
span { | |
background: $orange; | |
width: 100%; | |
display: block; | |
height: 10px; | |
margin: 10px 0; | |
border-radius: 50%; | |
transition: background-color 0.4s ease, margin 0.4s ease; | |
} | |
} | |
.nav-item-wrap { | |
width: 100%; | |
position: absolute; | |
bottom: 15px; | |
left: 0; | |
visibility: hidden; | |
opacity: 0; | |
transition: opacity 0.5s ease 0.5s; | |
p { | |
text-align: center; | |
font-size: 14px; | |
} | |
} |