just playing around with the latest trend in web design
A Pen by Louren Jovito on CodePen.
<!-- 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> |
/*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); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
.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);} | |
} |