<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Flat Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<nav class="top">
<menu>
<li>
<a class="c1" href="#" >
<span>☀</span>
</a>
</li>
<li>
<a class="c2" href="#" >
<span>✈</span>
</a>
</li>
<li>
<a class="c3" href="#" >
<span>❄</span>
</a>
</li>
<li>
<a class="c4" href="#" >
<span>☎</span>
</a>
</li>
<li>
<a class="c5" href="#" >
<span>✉</span>
</a>
</li>
</menu>
</nav>
<hr />
<nav class="left">
<menu>
<li>
<a class="c1" href="#" >
<span>☀</span>
</a>
</li>
<li>
<a class="c2" href="#" >
<span>✈</span>
</a>
</li>
<li>
<a class="c3" href="#" >
<span>❄</span>
</a>
</li>
<li>
<a class="c4" href="#" >
<span>☎</span>
</a>
</li>
<li>
<a class="c5" href="#" >
<span>✉</span>
</a>
</li>
</menu>
</nav>
<hr />
<nav class="bottom">
<menu>
<li>
<a class="c1" href="#" >
<span>☀</span>
</a>
</li>
<li>
<a class="c2" href="#" >
<span>✈</span>
</a>
</li>
<li>
<a class="c3" href="#" >
<span>❄</span>
</a>
</li>
<li>
<a class="c4" href="#" >
<span>☎</span>
</a>
</li>
<li>
<a class="c5" href="#" >
<span>✉</span>
</a>
</li>
</menu>
</nav>
<hr />
<nav class="right">
<menu>
<li>
<a class="c1" href="#" >
<span>☀</span>
</a>
</li>
<li>
<a class="c2" href="#" >
<span>✈</span>
</a>
</li>
<li>
<a class="c3" href="#" >
<span>❄</span>
</a>
</li>
<li>
<a class="c4" href="#" >
<span>☎</span>
</a>
</li>
<li>
<a class="c5" href="#" >
<span>✉</span>
</a>
</li>
</menu>
</nav>
<!-- partial -->
</body>
</html>
body {
background-color: #1b1b1b;
}
nav {
width : 330px;
margin: 0 auto;
}
menu:after , menu:before {
display : table;
content : ' ';
}
menu:after {
clear : both;
}
li {
background-color : #fff;
list-style-type: none;
float : left;
margin-right : 1px;
}
li a {
position: relative;
display : block;
text-align : center;
text-decoration: none;
width : 62px;
height : 66px;
}
a span {
display : block;
font-size : 32px;
padding : 20px 15px;
color : #222;
position: absolute;
top : 0;
left : 0;
z-index : 100;
transition : all .2s;
}
a:before {
display: block;
content : ' ';
position: absolute;
transition : all .2s;
}
a:hover span {
color : #fff;
transition : all .2s;
}
a:hover:before {
transition : all .3s;
}
.c1:before{
background-color: #b651d8;
}
.c2:before {
background-color: #71c55e;
}
.c3:before {
background-color: #fab904;
}
.c4:before {
background-color: #e94739;
}
.c5:before {
background-color: #407ded;
}
hr {
width : 100px;
margin : 50px auto;
}
/* Top
********************/
nav.top
a:before {
top : 0;
left : 0;
height : 5px;
width : 100%;
}
nav.top
a:hover:before {
height : 100%;
}
/* left
********************/
nav.left
a:before {
top : 0;
left : 0;
height : 100%;
width : 5px;
}
nav.left
a:hover:before {
width : 100%;
}
/* bottom
********************/
nav.bottom
a:before {
bottom : 0;
left : 0;
height : 5px;
width : 100%;
}
nav.bottom
a:hover:before {
height : 100%;
}
/* right
********************/
nav.right
a:before {
top : 0;
right : 0;
width : 5px;
height : 100%;
}
nav.right
a:hover:before {
width : 100%;
}