Simple Rotating Menu With Jquery

There is many ways we can create jquery simple menus. In todays jquery tutorial lets create another simple jquery rotating menu.
We will create a simple jquery plugin so that we can install it on any web site very easily.
In this plug in we used Math trigonometry formulas to move our menu round and round.
Simple Rotating Menu With Jquery Plug in


demo

download

Files

Create these files.
--index.html --tuRotateMenu.js

index.html

<html>  
<head>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  
</head>  
<body>  
<nav>  
<a class="iteam" href="http://techumber.com">Home</a>  
<a class="iteam" href="http://www.techumber.com/search/label/Facebook">Facebook</a>  
<a class="iteam" href="http://www.techumber.com/search/label/JQuery">Jquery</a>  
<a class="iteam" href="http://www.techumber.com/search/label/PHP">PHP</a>  
<a class="iteam" href="http://www.techumber.com/search/label/CSS3">CSS3</a>  
<a class="iteam" href="http://www.techumber.com/search/label/javaScript">javaScript</a>  
<a class="iteam" href="http://www.techumber.com/search/label/Plug-in">Plug-ins</a>  
<a class="iteam" href="http://www.techumber.com/search/label/Tutorials">Tutorials</a>  
</nav>  
<script src="tuRotateMenu.js"></script>  
</body>  
</html> 

CSS

Add this style to above index.html page head section.

<style>  
.iteam{ 
width: 90px;  
color: #d8d8d8;  
background-color: #08C;  
padding-top: 30px;  
padding-bottom: 30px;  
text-align: center;  
position: absolute;  
border-radius: 10px;  
color: #fff;  
text-decoration: none;  
text-transform: uppercase;  
} 
.iteam:hover{ 
background-color: #999;  
text-decoration:underline;  
} 
</style> 

tuRotateMenu.js

var tuRotateMenu=function(options){  
this.o=options;  
this.count=0;  
this.cx=($(document).width() / 2)-100;  
this.cy=($(document).height() / 2);  
var iteam=$("."+this.o.iClass),  
self=this,  
speed=this.o.maxS;  
this.total=iteam.length;  
//initilize function 
this.init=function(){  
iteam.bind("mouseenter",self.speedDown);  
iteam.bind("mouseleave",self.speedUp);  
setInterval(self.rotate, 10);  
}; 
//rotate function 
this.rotate=function(){  
iteam.each(function(){  
var agl = self.count * (Math.PI / 180),  
newx = self.cx + Math.cos(agl) * self.o.radious,  
newy = self.cy + Math.sin(agl) * self.o.radious;  
$(this).css("left", newx + "px").css("top", newy + "px"); 
self.count+= 360 / self.total + speed;  
}); 
}; 
//trigger when mouse unhover 
this.speedUp=function(){  
speed=self.o.maxS;  
}; 
//trigger when mouse hover 
this.speedDown=function(){  
speed=self.o.minS;  
}; 
}; 
//Calling rotateMenu plugin 
function rotateMenu(options){  
//object for turotateMenu 
var oRM=new tuRotateMenu(options);  
oRM.init();  
} 

In this file we have init,rotate,speedUpspeedDown.
init:This is initialize function. rotate:Main logic. speedDown:Mouse hover trigger function. It will slowdown speed of rotating items. speedUp:Mouse unhover trigger function. It will make the menu items back to original speed.

How to use?

Add this code to bottom of index page.

<script>  
$(function () { 
config={  
maxS:0.05,  
minS:0.01,  
radious:200,  
iClass:"iteam",  
}; 
rotateMenu(config);  
}); 
</script> 

Config:

maxS:This is initial speed. minS:This is on mouse hover speed. radious:Radious from center of the document to menu item. iClass:This the class name use for menu items anchors.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.