E
i
p
í
l
o
g
o

R
e
v
o
l
u
t
u
m

N
a
d
a

Dibujos y fotografías

M
o
o
P

Pruebas y más pruebas de cada hack que voy explicando.

M
a
p
a

Mi Mapa de blogs... los principales

Mootools Swish Menu

Bienvenido

Bienvenidos al Swish Menu!

Swish menu es un menú bidimensional y animado two dimensional, basado en mootools.

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






	Home
			Welcome

	
	The Code
		The HTML

		The CSS
		The Javascript
	

	Download
		Source (Zip)

		Source (Gz2)
	
	Links

		Mootools
		Pat.Cullen
	

	Feedback
		Comment Here

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:

Mootools Forum Post

martes, 26 de febrero de 2008

Image Menu

Otro... con la peculiaridad de las cajas-imágenes transparentes y el texto de los títulos alineado en vertical.

El resto es exazctamente igual que cualwuier otro image-menu, lo cual quiere decir que el mootools es el mismo script, así como el del menu.js.

Usamos cookies propias y de terceros para ayudarte en tu navegación. Si continuas navegando consideramos que aceptas el uso de cookies. OK Más información

Self