jQuery animated navigation

      No Comments on jQuery animated navigation

jQuery animated navigation -using jQuery animation to add class and CSS for amazing effects.

This code snippets uses:

  • jQuery’s toggleClass() function : This function does the task of toggling between classes on event occurrence.Syntax:
    toggleClass("class_name") { } 

jQuery animated navigation- Demo

See the Pen animate menu by scanfcode (@scanfcode) on CodePen.

jQuery animated navigation-markup

HTML markup:

 <ul class="no">
    <div class="one">
  <li>
    <a href="#">Home</a></li> 
    </div>
  <div class="two">
<li>
  <a href="#">Work</a></li></div>    
<div class="three">
  <li>
  <a href="#">Inquire</a></li>
    </div>    
<div class="four">
  <li>
  <a href="#">Brand</a></li>
    </div>
<div class="five">
  <li>
  <a href="#">More</a></li>
    </div>
</ul>

CSS code

body
{
 text-align:center;
  background:url('http://scanfcode.com/wp-content/uploads/2017/04/sample57.jpg');
  background-size:cover;
  overflow-y:hidden;
  margin:4% 4% 4% -12%;
}
div
{
  display:inline;
  position:absolute;
}
li
{
  width:100%;
  height:100%;
  position:relative;
  list-style-type:none;
  border-radius:100%;
}
.card li
{
    opacity:0.8;
}
a
{
  color:#fff;
  font-size:20px;
  left:0;
  border:solid 1px #fff;
  border-radius:100%;
  margin:10%;
  height:80%;
  width:80%;
  position:absolute;
  padding-top:30%;  
}
a:hover
{
  color:#fff;text-decoration:none;
}
.one li
{
  width:140px;height:140px;z-index:50;
  background:#999;
}
.two li ,.four li
{
width:130px;height:130px;z- index:40;top:5px;background:#ffcc00;
}
.three li ,.five li
{
width:120px;height:120px;z- index:30;top:10px;background:#009999;
}
ul.card .two
{
  position:absolute; -ms-transform: translate(140px,0px); 
-webkit-transform:translate(140px,0px);
 transform: translate(140px,0px);
 transition:ease 0s;
  transition-delay:.05s;
}
ul.card .three
{
  position:absolute; -ms-transform: translate(270px,0px); 
-webkit-transform:translate(270px,0px);
 transform: translate(270px,0px);
 transition:ease 0s;
   transition-delay:.1s;
}
ul.card .four
{
  position:absolute; -ms-transform: translate(-130px,0px); 
-webkit-transform:translate(-130px,0px);
 transform: translate(-130px,0px);
 transition:ease 0s;
    transition-delay:.05s;
}
ul.card .five
{
  position:absolute; -ms-transform: translate(-250px,0px); 
-webkit-transform:translate(-250px,0px);
 transform: translate(-250px,0px);
 transition:ease 0s;
 transition-delay:.1s;
}
.card li:hover
{
transform:scale(1,1)  rotate(360deg) translate(3px,-12px);
transition:ease 0.5s; 
  opacity:1;
}

This snippet uses various CSS transformation and transitions.

jQuery function to toggle class

$(".no").hover(function(){
     $("ul").toggleClass("card");

});

$(".no").hover(function() this line selects the class “no” and triggers the function onhover. The function uses the selector tag ul and toggle the class “card”. In other words, every time mouse is over ul element with class=no, function adds a class=”card” to ul element. When mouse moves out, card class is removed.

jQuery animated navigation

Summary
jQuery animated navigation
Article Name
jQuery animated navigation
Description
jQuery animated navigation -$(".no").hover(function() this line selects the class "no" and triggers the function onhover. The function uses the selector tag ul and toggle the class "card". In other words, every time mouse is over ul element with class=no, function adds a class="card" to ul element. When mouse moves out, card class is removed.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *