Mootools Swish Menu

Welcome

Welcome to the Swish Menu!

The Swish menu is an animated, two dimensional menu system based on the Mootools Javascript framework.

Features currently include:

  • Cross browser. Tested with Firefox and IE
  • Easy to implement. just copy, paste, replace.
  • Smallish. swish code ~ 24kb
  • IDRCWYUIF Public License. (I Don’t Really Care What You Use It For, Public License)

The Code

The HTML

<div class="SwishMenu" id="MainMenu">
<span class="LBuff"></span>
<span class="RBuff"></span>
<ul class="Main">
	<li><A class="MI" href="#Welcome"><img src="images/swish/op1.png" width="16px" height="16px"><b>Home</b></A><ul>
			<li><A href="#Welcome">Welcome</A></li>
	</ul></li>
	<li><A class="MI" href="#Code"><img src="images/swish/op2.png" width="16px" height="16px"><b>The Code</b></A><ul>
		<li><A href="#HTML">The HTML</A></li>
		<li><A href="#CSS">The CSS</A></li>
		<li><A href="#JS">The Javascript</A></li>
	</ul></li>
	<li><A class="MI" href="#Download"><img src="images/swish/op3.png" width="16px" height="16px"><b>Download</b></A><ul>
		<li><A href="Swish.zip">Source (Zip)</A></li>
		<li><A href="Swish.gz">Source (Gz2)</A></li>
	</ul></li>
	<li><A class="MI" href="#Links"><img src="images/swish/op4.png" width="16px" height="16px"><b>Links</b></A><ul>
		<li><A href="http://www.mootools.net">Mootools</A></li>
		<li><A href="http://mindmeat.blogspot.com">Pat.Cullen</A></li>
	</ul></li>
	<li><A class="MI" href="#Feedback"><img src="images/swish/op5.png" width="16px" height="16px"><b>Feedback</b></A><ul>
		<li><A href="http://mindmeat.blogspot.com/wadawada">Comment Here</A></li>
	</ul></li>
</ul>
</div>
					

The CSS

.SwishMenu { 
	margin: 0px 0px 0px 0px;
	width: auto; height: 55px;
}
.SwishMenu .Main { 
	padding: 0px; margin: 0px; 
	display: block;
	list-style-type: none; 
	font-weight: normal; 
	height: 48px; width: auto; 
	background-image: url(images/swish/stripe2.png);
	border-top: 4px solid #47B2DE;
	border-bottom: 4px solid #47B2DE;
}
.LBuff {
	width: 4px; height: 56px; float: left;

	background: url(images/swish/lbuff.png) top left no-repeat;
}
.RBuff {
	width: 4px; height: 56px; float: right;

	background: url(images/swish/rbuff.png) top left no-repeat;
}
.SwishMenu li { 
	float: left; 
	margin: 0px 0px 0px 0px;
	
	background: url(images/swish/m_li.gif) left no-repeat;
}
.SwishMenu li:first-child { background-image: none; }
.SwishMenu .MI {
	width: 135px; height: 48px;
	display: block; 
	margin: 0px; 
	z-index: 6;
	cursor: pointer; 
	text-decoration: none;
}
.SwishMenu .MI img {
	z-index: 13; border: none;
	float: left;
	width: 1px; height: 1px; position: relative;
}
.SwishMenu .MI b {
	position: relative;
	left: 10px; top: 15px;

	font-weight: bold;
	color: #f2f2f2;
	font-size: 12px;
}
.SwishMenu li ul {
	padding: 0px; margin: -7px 0px 0px 90px; 
	list-style-type: none; 
	z-index: 10;
	overflow: hidden;
	height: 23px; width: 0px;
	
	position: absolute;
	background: url(images/swish/sm_r2.png) no-repeat top right;
}
.SwishMenu li ul li {
	background: none;
	z-index: 10;
}
.SwishMenu li ul li a {
	display: block;
	height: 23px; width: 110px;
	padding-top: 4px;

	text-decoration: none;
	font-weight: bold;
	color: #222266;
	text-align: center;
	background: url(images/swish/sm_m.png) repeat-x;
}
.SwishMenu li ul li:first-child{ 
	padding-left: 11px;

	background: url(images/swish/sm_l.png) no-repeat top left;
}
					

The JavaScript

// JS to implement the Swish Menu.
window.addEvent('domready', new function() {
	initSwish('MainMenu');
});

// The rest of the Swish's JS can be found in swish.js
					

Downloads

This is the full source package of the SwishMenu.

Feedback

Where I'll keep an eye open for comments and queries: