Simple Rotating Menu With Jquery

Published on September 9, 2012

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.

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.