• Efectos nevada para web

    Efectos nevadas para Web

    Mozilla, IE, Chrome.

  • Galeria jQuery para imagenes

    Galeria jQuery para imagenes

    jQuerylightbox, etc

  • Easyzoom

    Galeria Easyzoom

    agrandar imagenes

  • Instalar foro php

    Como instalar un foro php

    Phpbb3 foro

  • Menu Jquery

    Menu jquery

    css estilo jquery

  • Login php

    Login php Mysql

    Inicio de sesion php

  • Sistema de comentarios

    Sistema de comentarios

    Php MysQl

  • Reloj

    Reloj digital para web

    Javascript

  • Contador de texto

    Contador de texto

    para formularios php

Imagen

Menú jQuery para web...

Escrito por Administrador, en localhost, menujquery

Archivos para la utilización de esta galería :

index.html
amenu.js
estilo.css
jquery.js
Hago una breve explicación suponiendo un poco de conocimiento por parte del lector de cómo usar jquery...
Para la utilización de este menú necesitaremos la librería jQuery que podemos descargar de acá jQuery.com o podríamos usar sus hosted que podemos enlazar desde acá hosted jQuery :
El estilo que le daremos a la capa es el siguiente:
#amenu-list {
	margin:0px;
	padding: 0px;
	position: absolute !important;
	z-index: 999;
}
#amenu-list li {
	display: block;
	margin:0px;
	padding: 0px;
	position: relative !important;
	float: left;
	vertical-align: bottom;
}
* html #amenu-list li {
	width: 1px;
}
#amenu-list li a:link, 
#amenu-list li a:visited, 
#amenu-list li a:hover{
	display: block;
	margin:0px;
	padding: 0px;
	white-space: nowrap;
}
#amenu-list ul {
	display: none;
	margin:0px;
	padding: 0px;
	position: absolute !important;
	height: auto;
}
#amenu-list ul li {
	float: none;
	margin:0px;
	padding: 0px;
}
/******** aMenu look *******/

#amenu-wrapper {
	height: 40px;
	background-color: #CCCCCC;
	border: 1px solid #999999;
	padding: 0px 10px;
	border-radius: 7px;
}
#amenu-list li {
	height: 40px;
}
#amenu-list li.parent > a {
	background: url(../images/down_arrow.gif) no-repeat 92% 50%;
}
#amenu-list li a:link, #amenu-list li a:visited {
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	color: #663366;
	padding: 0px 25px 0px 20px;
	border-left: 2px solid #2C272B;
}
#amenu-list li a:hover, #amenu-list li a.active {
	color: #fff;
	background-color: #999999;
	border-left: 2px solid #540532;
}

#amenu-list ul {
	border-left: 2px solid #540532;
}
#amenu-list ul li {
	height: 30px;
	background-color: #999999;
	border-top: 1px solid #444444;
	border-bottom: 1px solid #CCCCCC;
}
#amenu-list ul li.parent > a {
	background: url(../images/right_arrow.gif) no-repeat 95% 50%;
}
#amenu-list ul li a:link, #amenu-list ul li a:visited {
	height: 30px;
	line-height: 30px;
	padding: 0px 40px 0px 20px;
	border-left: none;
}
#amenu-list ul li a:hover, #amenu-list ul li a.active {
	background-color: #CCCCCC;
	color: #666666;
}

					
El archivo aMenu.js que podemos visualizar de aquí crealo y copia el siguiente codigo...
/**
 * aMenu - Animated jQuery Menu
 * (C) 2011 Sawanna Team (http://sawanna.org)
 */

$.fn.amenu=function(settings)
{
	aMenu={
		menu: null,
		timer: null,
		z: 0,
		params: new Array(),
		init: function(elem,settings) {
			this.params.speed=200;
			this.params.animation='show';
			
			if (typeof(settings) != 'undefined') {
				try {
					for (s in settings) {
						this.params[s]=settings[s];
					}
				} catch(e) {}
			}
			
			this.menu=elem;
			this.z=$(this.menu).css('z-index');
			$(this.menu).find('li').each(function(){
				var childs=$(this).find('ul');
				if (childs.length > 0) {
					$(this).addClass('parent');
				}
				
				$(this).children('a').hover(
					function(){
						aMenu.show($(this));
					},
					function(){
						aMenu.timer=window.setTimeout("aMenu.hide()",1000);
					}
				);
			});
		},
		show: function(elem) {
			window.clearTimeout(aMenu.timer);
			aMenu.hide();
			aMenu.highlight(elem);
			$(elem).parents('ul').stop(true,true).css('display','block');

			aMenu.z++;
			aMenu.animate($(elem).parent('li').children('ul'));
		},
		hide: function() {
			$(aMenu.menu).find('a').removeClass('active');
			$(aMenu.menu).find('ul').stop(true,true).css('display','none');
		},
		animate: function(elem) {
			aMenu.fix($(elem));

			$(elem).children('li').css('display','none');
			$(elem).css('display','block');
			var i=1;
			$(elem).children('li').each(function(){
				if (aMenu.params.animation == 'fade') {
					$(this).stop(true,true).fadeIn(i*aMenu.params.speed);
				} else if (aMenu.params.animation == 'slide') {
					$(this).stop(true,true).slideDown(i*aMenu.params.speed);
				} else if (aMenu.params.animation == 'wind') {
					$(this).css({
								'width':0,
								'display':'block'
							});
					$(this).animate({'width':'100%'},i*aMenu.params.speed);
				} else if (aMenu.params.animation == 'none') {
					$(this).css({
								'display':'block'
							});
				} else {
					$(this).stop(true,true).show(i*aMenu.params.speed);
				}
				i++;
			});
			$(elem).css('z-index',aMenu.z);
		},
		fix: function(elem) {
			var p=$(elem).parents('ul');
			if (p.length>1) {
				$(elem).css({
							'left': $(elem).parent('li').width(),
							'top': 0
							});
			} else {
				$(elem).css({
							'left': 0,
							'top': $(elem).parent('li').height()
							});
			}
		},
		highlight: function(elem) {
			var e=$(elem).parent('li');
			while (e.length != 0) {
				$(e).children('a').addClass('active');
				e=$(e).parent('ul').parent('li');
			}
		}
	}
	
	aMenu.init($(this),settings);
}
					
En nuestro index debemos colocar las rutas de los archivos mas el javascript que activará el efectos coloca todo esto entre <head> y </head> modificando las rutas a tus jquery y css...
/*aMenu*/
//ruta de jquery descargado previamente
<script type="text/javascript" src="jquery.js"></script>
//ruta del estilo del efecto
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
//ruta de amenu.js
<script src="amenu.js"></script>
//Javascript que activara el efecto
<script language="JavaScript">
  $(document).ready(function(){
	$('#amenu-list').amenu({
		'speed': 200,    //modificar velocidad
		'animation': 'show'   //animacion empieza con show (modificar por slide fade wind o none)
		});
     });
        <</script>
/*fin de amenu*/
					
En nuestro index.html deberemos colocar el siguiente codigo que activara el menú y lo presentará donde lo coloquemos dentro del <body>...
	<div id="amenu-wrapper">
		<ul id="amenu-list">
			<li>
				<a href="#">Item 1</a>
			</li>
			<li>
				<a href="#">Item 2</a>
				<ul>
					<li>
						<a href="#">Item 2-1</a>
					</li>
					<li>
						<a href="#">Item 2-2</a>
					</li>
					<li>
						<a href="#">Item 2-3</a>
						<ul>
							<li>
								<a href="#">Item 2-3-1</a>
							</li>
							<li>
								<a href="#">Item 2-3-2</a>
							</li>
							<li>
								<a href="#">Item 2-3-3</a>
								<ul>
									<li>
										<a href="#">Item 2-3-3-1</a>
									</li>
									<li>
										<a href="#">Item 2-3-3-2</a>
									</li>
									<li>
										<a href="#">Item 2-3-3-3</a>
									</li>	
								</ul>
							</li>
							<li>
								<a href="#">Item 2-3-4</a>
							</li>
							<li>
								<a href="#">Item 2-3-5</a>
								<ul>
									<li>
										<a href="#">Item 2-3-5-1</a>
									</li>
									<li>
										<a href="#">Item 2-3-5-2</a>
									</li>
									<li>
										<a href="#">Item 2-3-5-3</a>
									</li>	
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Item 2-4</a>
					</li>
					<li>
						<a href="#">Item 2-5</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Item 3</a>
			</li>
			<li>
				<a href="#">Item 4</a>
			</li>
			<li>
				<a href="#">Item 5</a>
				<ul>
					<li>
						<a href="#">Item 5-1</a>
					</li>
					<li>
						<a href="#">Item 5-2</a>
					</li>
					<li>
						<a href="#">Item 5-3</a>
					</li>
				</ul>
			</li>
		<li>
				<a href="#">Item 6</a>
				<ul>
					<li>
						<a href="#">Item 6-1</a>
					</li>
					<li>
						<a href="#">Item 6-2</a>
					</li>
					<li>
						<a href="#">Item 6-3</a>
						<ul>
							<li>
								<a href="#">Item 6-3-1</a>
							</li>
							<li>
								<a href="#">Item 6-3-2</a>
							</li>
							<li>
								<a href="#">Item 6-3-3</a>
								<ul>
									<li>
										<a href="#">Item 6-3-3-1</a>
									</li>
									<li>
										<a href="#">Item 6-3-3-2</a>
									</li>
									<li>
										<a href="#">Item 6-3-3-3</a>
									</li>	
								</ul>
							</li>
							<li>
								<a href="#">Item 6-3-4</a>
							</li>
							<li>
								<a href="#">Item 6-3-5</a>
								<ul>
									<li>
										<a href="#">Item 6-3-5-1</a>
									</li>
									<li>
										<a href="#">Item 6-3-5-2</a>
									</li>
									<li>
										<a href="#">Item 6-3-5-3</a>
									</li>	
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Item 6-4</a>
					</li>
					<li>
						<a href="#">Item 6-5</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Item 7</a>
			</li>

		</ul>
		</div>

					
Esta son las imagenes a descargar , modifica la ruta dentro del css para poder encontrarlas...
  
Para modificar los colores del menú estilo entre otras cosas tendrás que modificar el estilo.css que creastes a tu modo el demo lo tienes ahí cualquier cosa escribenos gracias...

Créditos :

aMenu - Animated jQuery Menu
(C) 2011 Sawanna Team (http://sawanna.org)
comentarios impulsado por Disqus
14Feb2012