GitHub - johnlanz/jquery-rotating-menu: The plugins can rotate group of menus or images with custom rotation speed. Inteligently positioned images based on their dimension

johnlanz / jquery-rotating-menu Public

Notifications You must be signed in to change notification settings
Fork 3
Star 2

The plugins can rotate group of menus or images with custom rotation speed. Inteligently positioned images based on their dimension

pixelcone.com/jquery/jquery-rotating-menu/

2 stars 3 forks Branches Tags Activity

Star

Notifications

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
icons		icons
README		README
jquery-1.4.1.min.js		jquery-1.4.1.min.js
jquery.rotatingMenu.js		jquery.rotatingMenu.js
rotating_menu.html		rotating_menu.html

Repository files navigation

To use it simply insert the following:

Javascript: (Inside <head> tag)
<script src="jquery.js"></script>
<script src="jquery.rotatingMenu.js"></script>
<script type="text/javascript">
	$(function(){
		$('#rotatingMenu').rotatingMenu();
	});
</script>
Html:
<div id="rotatingMenu">
	<div id="rmenu1">
		<a href="#">
			<img src="icons/bin.png" alt="..." />
			<span>bin</span>
		</a>
	</div>
	<div id="rmenu2">
		<a href="#">
			<img src="icons/burn.png" alt="..." />
			<span>burn</span>
		</a>
	</div>
 
	<div id="rmenu3">
		...
	</div>
	...
</div> 
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:
#rotatingMenu{
	width: 500px;
	height: 90px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
}
#rotatingMenu div{
	height: 52px; /*height of individual icon*/
	width: 48px; /*width of individual icon*/
	position: absolute;
}
#rotatingMenu span{
	text-align: center;
	font-weight: bold;
	display: none;
}
#rotatingMenu a{
	color: #000000;
	text-decoration: none;
}
 
Changing '#rotatingMenu' width and height will automatically change the positioning of the individual div/icon. See the Demo

Plugins Option:
$(function(){
	$('#rotatingMenu').rotatingMenu({
		maxSpeed: 500, /*500 is default value*/
		minSpeed: 2000, /*2000 is default value*/
		divId: "#rmenu"
	});
});
 
Tested on: IE6+ and firefox