Techumber

Simple Rotating Menu With Jquery

Github avatar
Dimpu
September 09, 2012. 3 min read

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="//techumber.com">Home</a>
<a class="iteam" href="//www.techumber.com/tags/javascript">Facebook</a>
<a class="iteam" href="//www.techumber.com/tags/jquery/">Jquery</a>
<a class="iteam" href="//www.techumber.com/tags/php">PHP</a>
<a class="iteam" href="//www.techumber.com/tags/css/">CSS3</a>
<a class="iteam" href="//www.techumber.com/tags/javascript">javaScript</a>
<a class="iteam" href="//www.techumber.com/tags/javascript">Plug-ins</a>
<a class="iteam" href="//www.techumber.com/tags/javascript">Tutorials</a>
</nav>
<script src="tuRotateMenu.js"></script>
</body>
</html>

CSS

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

.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;
}

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,speedUp__speedDown. 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.

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

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.


...