download

jQuery Rotating Menu

View Demo | Download
  • The plugins can rotate group of menus or images with custom rotation speed
  • Inteligently positioned images based on their dimension

To use it simply insert the following:

Javascript: (Inside <head> tag)

  1.  
  2. <script src="jquery.js"></script>
  3. <script src="jquery.rotatingMenu.js"></script>
  4. <script type="text/javascript">
  5. 	$(function(){
  6. 		$('#rotatingMenu').rotatingMenu();
  7. 	});
  8. </script>
  9.  

Html:

  1.  
  2. <div id="rotatingMenu">
  3.  
  4. 	<div id="rmenu1">
  5. 		<a href="#">
  6. 			<img src="icons/bin.png" alt="..." />
  7. 			<span>bin</span>
  8. 		</a>
  9. 	</div>
  10.  
  11. 	<div id="rmenu2">
  12. 		<a href="#">
  13. 			<img src="icons/burn.png" alt="..." />
  14. 			<span>burn</span>
  15. 		</a>
  16. 	</div>
  17.  
  18. 	<div id="rmenu3">
  19. 		...
  20. 	</div>
  21.  
  22. 	...
  23.  
  24. </div>
  25.  
  • Increment <div id="rmenu" />
  • If you want to change id="rmenu", you also need to change the default option. see plugin option
  • span is the title of your menu. It's also optional.

Css:

  1.  
  2. #rotatingMenu{
  3. 	width: 500px;
  4. 	height: 90px;
  5. 	margin-right: auto;
  6. 	margin-left: auto;
  7. 	position:relative;
  8. }
  9. #rotatingMenu div{
  10. 	height: 52px; /*height of individual icon*/
  11. 	width: 48px; /*width of individual icon*/
  12. 	position: absolute;
  13. }
  14. #rotatingMenu span{
  15. 	text-align: center;
  16. 	font-weight: bold;
  17. 	display: none;
  18. }
  19. #rotatingMenu a{
  20. 	color: #000000;
  21. 	text-decoration: none;
  22. }
  23.  
  • Changing '#rotatingMenu' width and height will automatically change the positioning of the individual div/icon. See the Demo

Plugins Option:

  1.  
  2. $(function(){
  3. 	$('#rotatingMenu').rotatingMenu({
  4. 		maxSpeed: 500, /*500 is default value*/
  5. 		minSpeed: 2000, /*2000 is default value*/
  6. 		divId: "#rmenu"
  7. 	});
  8. });
  9.  
  • Tested on: IE6+ and firefox
View Menu Demo | Download
blog comments powered by Disqus