Elastic CSS navigation

elastic-css-navigation.markdown

Elastic CSS navigation

A Pen by Daniela B on CodePen.

License.

index.html

<div id="container">
	<div class="prevent"></div>
<ul>
	<li><i class="fa fa-home fa-3x" aria-hidden="true"></i><span>HOME</span></li>
	<li><i class="fa fa-user fa-3x" aria-hidden="true"></i><span>bIO</span></li>
	<li><i class="fa fa-star fa-3x" aria-hidden="true"></i><span>PORTFOLIO</span></li>
	<li><i class="fa fa-file-text-o fa-3x" aria-hidden="true"></i><span>CV</span></li>
	<li><i class="fa fa-paper-plane-o fa-3x" aria-hidden="true"></i><span>CONTACT</span></li>
</ul>
</div>

style.scss

@import url('https://fonts.googleapis.com/css?family=Sintony');

$colors-list: #811453 #3C144F #9F4576 #9C2542 #0A7E8C;

html, body {height:100%;
  width:100%;
 margin:0;
    padding:0; }

html,body {
height:100%;
  width:100%;
  margin: 0;
  background-color:#171717;
  font-family: 'Sintony', sans-serif;
}

#container {
  height:100%;
  width:100%;
  max-width:1100px;
  min-height:650px;
  overflow:hidden;

}

.prevent {
 height:100%;
 min-height:650px;
 overflow:hidden;
 width:50%;
 position:absolute;
 left:13%;
 z-index:9;
 display:block;
 background-color:transparent;
}

#container ul{
list-style-type: none;
    width:100%;
    height:100%;
    display: block;
    margin:0;
    padding:0;
  
  > * {
    color: #FFB7C5;
    display: block;
    list-style:none;
    padding-top:3%;
    width: 20%;
    height:15%;
    margin:0;
    transition: all 0.9s cubic-bezier(.87,-.31,.19,1.44);
    text-align:center;


    span {
    font-size:23px;
    padding-top:5px;
    text-transform: uppercase;
    color:#FFB7C5;
    font-weight:bold;
    display:none;
      
    }
     

    @each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    &:nth-of-type(#{$i})  { 
        
        background-color: $current-color;
        opacity: 0.7;
        
      }
  }
  }
  
}

#container ul li:hover {

 width:90%;
 
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  opacity:1;

}

#container ul li:hover span {
display:block;

}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />