navigation material design

index.html

<!-- material design navigation-->
<nav class="header-nav">
  <div class="logo clickable"><a href="#">Logo</a></div>
  <ul>
    <li><a href="#" class="clickable">Home</a></li>
    <li><a href="#" class="clickable">About</a></li>
    <li><a href="#" class="clickable">Blog</a></li>
    <li><a href="#" class="clickable">Portfolio</a></li>
    <li><a href="#" class="clickable">Contact</a></li>
  </ul>
</nav>

navigation material design.markdown

navigation material design

just playing around with the latest trend in web design

A Pen by Louren Jovito on CodePen.

License.

script.js

/*jQuery*/

(function($){
$(function(){
	var ink, d, x, y;
	$(".clickable").click(function(e){
    if($(this).find(".ink").length === 0){
        $(this).prepend("<span class='ink'></span>");
    }
         
    ink = $(this).find(".ink");
    ink.removeClass("animate");
     
    if(!ink.height() && !ink.width()){
        d = Math.max($(this).outerWidth(), $(this).outerHeight());
        ink.css({height: d, width: d});
    }
     
    x = e.pageX - $(this).offset().left - ink.width()/2;
    y = e.pageY - $(this).offset().top - ink.height()/2;
     
    ink.css({top: y+'px', left: x+'px'}).addClass("animate");
  });
});})(jQuery);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.header-nav { 
  background-color: #e74c3c; 
  max-width: 970px;
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
  display:table;
}
.header-nav .logo{
  float:left;
  margin-left: 20px;
}

.header-nav .logo a{
  display: block;
  text-decoration: none;
  color: #fff;
 
  padding: 20px 40px;
}

.header-nav .logo a img{
  display: block;
  width: 100%;
  height: auto;
}

.header-nav ul{ 
  float:right;
  display:table; 
  list-style: none; 
  margin:0;
  padding: 0;
  margin-right: 40px;
}

.header-nav ul li { 
  float:left; 
}

.header-nav ul li a{ 
  display:block;
  text-decoration: none;
  padding: 20px;
  transition: box-shadow 0.15s ease-out;
  box-shadow: 0 5px 10px rgba(0,0,0,0);
  color: #fff;
}

.header-nav ul li a:hover{
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.header-nav ul li a:active{
  box-shadow: 0 5px 10px rgba(0,0,0,0.0);
}

/* material click */
.clickable{
  display:block;
  position:relative;
  overflow:hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index:0;
}

.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
}

.animate {
	-webkit-animation:ripple 0.35s linear;
   -moz-animation:ripple 0.35s linear;
    -ms-animation:ripple 0.35s linear;
     -o-animation:ripple 0.35s linear;
        animation:ripple 0.35s linear;
}

@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
    100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}