Menu Mac Jquery

Posteado el 02. Jan, 2011 por tuto in Dreamweaver

Aqui les dejamos como hacer un menu estilo Mac utilizando Jquery

Puedes ver el demo en este link, esperamos les guste

PASO 1
Creamos una nueva carpeta llamada menu dentro de la cual vamos a crear una carpeta llamada imágenes dentro de la cual vamos a colocar los iconos que nos servirán para nuestro menú.

PASO 2
Vamos a Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

PASO 3
Debajo de la etiqueta Menú Mac Con Jquery vamos a copiar el siguiente código html4strict.

Code block

<link rel="stylesheet" type="text/css" media="screen" href="css/estilo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/fisheye-iutil.min.js"></script>
	<script type="text/javascript" src="js/dock-example1.js"></script>
	<script type="text/javascript" src="js/stack-1.js"></script>
	<script type="text/javascript">
		$(function(){
			var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
			$('#jqDock').jqDock(jqDockOpts);
		});
	</script>
 
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style>
<noscript>
 
		<style type="text/css">
			#dock { top: 0; left: 100px; }
			a.dock-item { position: relative; float: left; margin-right: 10px; }
			.dock-item span { display: block; }
			.stack { top: 0; }
			.stack ul li { position: relative; }
		</style>
 
	</noscript>

PASO 4
Presionamos el comando Ctrl + S para guardar nuestro documento dentro de la carpeta menu con el nombre menu.html.

PASO 5
Ahora presionamos el comando Ctrl + N y creamos un nuevo documento CSS.

PASO 6

Colocamos el siguiente codigo css

Code block

@charset "utf-8";
/* CSS Document */
 
* { margin: 0; padding: 0; }
body { font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
 
/* ================ Div que contiene nuestro menú ================ */
#dock { position: relative; top: 150px; }
.dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; }
/* ================ Div que contiene nuestro menú ================ */
 
/* ================ Estilo de la fuente del menú ================ */
a.dock-item {
	display: block;
	width: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
	text-decoration: none;
	color: #999999;
}
.dock-item span { display: none; padding-left: 20px; }
.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }

PASO 7
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css.

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4trict.

Code block

<div id="dock">
		<div class="dock-container">
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 1</span><img src="imagenes/home.png" alt="home" /></a> 
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 2</span><img src="imagenes/email.png" alt="contact" /></a> 
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 3</span><img src="imagenes/portfolio.png" alt="portfolio" /></a>
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 4</span><img src="imagenes/music.png" alt="music" /></a> 
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 5</span><img src="imagenes/video.png" alt="video" /></a> 
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 6</span><img src="imagenes/history.png" alt="history" /></a> 
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 7</span><img src="imagenes/calendar.png" alt="calendar" /></a>
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 8</span><img src="imagenes/link.png" alt="links" /></a>
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
			<a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 9</span><img src="imagenes/rss.png" alt="rss" /></a>
 
<!-- Finaliza icono -->
 
            </div>
</div>

PASO 9
Ahora dentro de la carpeta menu creamos una carpeta nueva llamada js dentro de la cual vamos a copiar los 4 archivos js que adjunto.

PASO 10
Listo ya tenemos terminado nuestro efecto.

Descarga el editable de Menu Mac Jquery

Articulos relacionados:

Tags: Dreamweaver, jQuery, mac, tutoriales

5 Respuestas para “Menu Mac Jquery”

Jonathan

21. Feb, 2011

Una consulta, como puedo aumentar el tamaño de mis iconos ya que estan muy pequeños. Sldos,
jonathan

21. Feb, 2011

Bueno, ya encontre la solución!, en donde se modifica, lo indico para quien le interese:
en el arhcivo: dock-example1.js
en el parametro:
itemWidth: 50,
viene 50 por defecto ahi le aumentan y listo.
Asi aumentan el tamaño del icono al que necesiten.
Sldos,
creativo

22. Feb, 2011

Jonathan gracias por tu aporte esto ayudara mucho a la comunidad.

Saludos
robin

13. Apr, 2011

como puedo cambiar la posicion que ya no se encuentre arriba si no abajo??
Tu cara

11. Jun, 2011

Creo que este tipo de tutoriales no sirven es únicamente copy paste, no indicas que propiedad hace que se expanda la imagen, o el posicionamiento del dock o cualquier otra cosa, me imagino que para que quede arriba la propiedad top:150px; la deben cambiar a 0px (no la he descargado)

ahora reviso que hace que se expandan las imagenes porque es lo que necesito ¬¬

Tutoriales en la Web

Menu Mac Jquery

Articulos relacionados:

5 Respuestas para “Menu Mac Jquery”

Deja tu Comentario

Categorias

Acerca de