Slide out Navi con Jquery

Posteado el 15. Jan, 2011 por creativo in Jquery

Aqui les dejamos este tutorial de slide navigation con CSS y Jquery pueden ver el demo en linea en este link

PASO 1
Creamos una nueva carpeta llamada menu dentro de la cual vamos a crear una nueva carpeta llamada imágenes donde vamos a colocar los iconos que vamos a utilizar para nuestro menú, la imagen del fondo y las imágenes adicionales que podamos utilizar.

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

PASO 3
Debajo de la etiqueta Slide Out Navigation en jQuery vamos a copiar el siguiente código html4strict.

Code block

<!-- Código que enlaza el estilo CSS -->
 
<link rel="stylesheet" href="css/estilo.css" type="text/css" charset="utf-8"/>
 
<!-- Código que enlaza el archivo JS-->
 
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

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

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

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

Code block

/* Aqui empieza el cuerpo del html */
 
body{
	font-family:Arial;
	height:1200px;
	background-color: #fff;
	background-image: url(../imagenes/fondo.jpg);
	background-repeat: repeat;
        }
        .header
        {
	width:600px;
	height:56px;
	position:absolute;
	top:0px;
	left:25%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 50px;
	font-style: normal;
	font-weight: bold;
	color: #999999;
        }
        .scroll{
	width:133px;
	height:61px;
	position:fixed;
	bottom:15px;
	left:150px;
	background-image: url(../imagenes/scroll.png);
	background-repeat: no-repeat;
	background-position: left top;
        }
        .info{
            text-align:right;
 
        }
 
/* Aqui termina el cuerpo del html */
 
/* Aqui empieza el menú */
 
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
 
/* Divs que contienen los iconos*/
 
ul#navigation .home a{
    background-image: url(../imagenes/home.png);
}
ul#navigation .about a      {
    background-image: url(../imagenes/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../imagenes/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../imagenes/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../imagenes/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../imagenes/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../imagenes/mail.png);
}
 
/* Aqui termina el menú */

PASO 7
Presionamos el comando Ctrl + S y 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 vamos a copiar el siguiente código htm4strict.

Code block

<!-- Inicia el Código -->
 
 <div class="header">
          <div align="center">Slide Out Navigation<br />
          En Jquery</div>
        </div>
        <div class="scroll"></div>
        <ul id="navigation">
            <li class="home"><a href="" title="Inicio"></a></li>
            <li class="about"><a href="" title="Nosotros"></a></li>
            <li class="search"><a href="" title="Busqueda"></a></li>
            <li class="photos"><a href="" title="Galeria"></a></li>
            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
            <li class="podcasts"><a href="" title="Podcasts"></a></li>
            <li class="contact"><a href="" title="Contactenos"></a></li>
        </ul>
 
        <div class="info">
 
            <a href="http://www.tutorialesenlawe.com"><img src="imagenes/logo-trans1.png" alt="Tutoriales en la Web" width="170" height="74" border="0" /></a>    </div>
 
<!-- Finaliza el Código -->

PASO 9
Debajo del código que acabamos de colocar vamos a copiar el Script que le da el movimiento a nuestro menú.

Code block

<!-- Inicia Script animación Menú -->
<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
 
                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>
        <!-- Inicia Script animación Menú -->