Menu page navi Jquery

Posteado el 15. Jan, 2011 por creativo in Jquery

En este tutorial te enseñaremos como utilizar Dreamweaver para editar un menu page navi en Jquery esperamos te guste. Esto es lo que podrás hacer mira aquí el demo online

PASO 1
Creamos un nuevo documento de Adobe Dreamweaver HTML.

PASO 2
Debajo de la etiqueta Menu Animado con jQuery vamos a copiar el siguiente código html4strict.

Code block

<!-- Codigo CSS -->
<link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" />
<!-- Codigo CSS -->
 
<!-- Codigo Java Script-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.flipNav.js" type="text/javascript"></script>
<!-- Codigo Java Script-->

PASO 3
Presionamos el comando Ctrl + S y guardamos nuestro documento dentro de la carpeta menu con el nombre menu.html.

PASO 4
Vamos al menú File – New y creamos un nuevo documento CSS.

PASO 5
Dentro del documento copiamos el siguiente código CSS.

Code block

body {
 text-align: center;
 background: #676767;
 font-family: helvetica;
}
 
ul, li {
 margin: 0; padding: 0;
 overflow: hidden;
}
 
ul li {
 float: left;
 list-style: none;
 margin-right: 1em;
 position: relative;
}
 
li a {
 color: white;
 text-decoration: none;
 float: left;
 font-size: 30px;
 background: black;
 padding: 10px;
}
 
li a:hover {
 background: #292929;
}
 
/* Hover del menú, color de fondo y de fuente */
 
li a span {
	display: block;
	background: white;
	color: maroon;
	padding: 10px;
	position: relative;
	font-weight: bold;
}
 
li a span:first-child {
	background: black;
	color: white;
}

PASO 6
Presionamos el comando Ctrl + S y Guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css.

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

Code block

<!-- Botones del menú -->
<ul id="nav">
	<li><a href="#">Inicio</a></li>
	<li><a href="#">Nosotros</a></li>
	<li><a href="#">Portafolio</a></li>
	<li><a href="#">Misión</a></li>
	<li><a href="#">Contáctenos</a></li>
</ul>
 
<!-- Codigo Java Script -->
<script type="text/javascript">
	$('#nav').flipNav();
</script>