Menu Jquery
Posteado el 06. Mar, 2011 por tuto in Jquery
Aqui puedes ver el demo de lo que te enseñaremos a hacer el dia de hoy
PASO 1
Creamos una carpeta nueva llamada navegación, dentro de la cual creamos una carpeta llamada imágenes donde vamos a guardar las imágenes que vamos a utilizar para este tutorial.
PASO 2
Vamos a Adobe Dreamweaver y Creamos un nuevo documento HTML en blanco.
PASO 3
Debajo de la etiqueta BreadCumb en CSS y Jquery vamos a copiar el siguiente código html4strict.
<link rel="stylesheet" href="css/estilo.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js">
</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" language="JavaScript">
</script>
<script src="js/jquery.jBreadCrumb.1.1.js" type="text/javascript" language="JavaScript">
</script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#breadCrumb").jBreadCrumb();
})
</script>
PASO 4
Presionamos el comando Ctrl + S y Guardamos nuestro documento dentro de la carpeta navegación con el nombre de navegación.html
PASO 5
Ahora vamos al menú File – New (Ctrl + N) y creamos un nuevo documento CSS.
PASO 6
Dentro del documento CSS copiamos el siguiente código CSS.
.module:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
* html .module
{
height: 1%;
overflow: visible;
}
* + html .module
{
min-height: 1%;
}
/* Fuente General del Sitio
---------------------------------------------------------------------*/
html, body
{
font-size: 12px;
line-height: 21px;
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
background:#f3f3f3;
}
html > body
{
font-size: 12px;
line-height: 21px;
}
h1
{
font-weight: bold;
color: #007ac3;
font-size: 2em;
line-height: 1em;
margin: 1.25em 0 .75em 0;
}
h2
{
color: #1371aa;
font-weight: bold;
font-size: 1.6666em;
line-height: 1em;
margin: 1.25em 0 .75em 0;
}
h3
{
color: #1371aa;
font-size: 1.41667em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .75em 0;
}
h4
{
color: #000;
font-size: 1.1667em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .5em 0;
}
h5
{
color: #000;
font-size: 1em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .5em 0;
}
h6
{
color: #000;
font-size: 1em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .5em 0;
}
strong
{
font-weight: bold;
}
em
{
font-style: italic;
line-height: 1.75em;
}
p
{
font-size: 1em;
line-height: 1.75em;
margin: .25em 0 1.5em;
}
td, td a, th, th a, span
{
line-height: 1.3333em;
}
blockquote
{
margin: .416em 0 .416em 1.1667em;
}
a
{
color: #0e82c7;
text-decoration: none;
font-size: inherit;
font-weight: inherit;
}
a:hover
{
text-decoration: underline;
}
ul, ol
{
margin: .833em 0;
padding-left: 2em;
}
ul
{
list-style-type: disc;
}
ol
{
list-style-type: decimal;
}
ul li, ol li
{
line-height: 1.5em;
}
dt
{
margin: .416em 0 0 0;
}
dd
{
margin: .416em 0 .416em 1.1667em;
}
pre, code, tt
{
font-family: "Andale Mono" , "Lucida Console" , "Courier New" , Courier, monospace;
margin: .833em 0;
}
sub
{
vertical-align: sub;
font-size: smaller;
line-height:inherit;
}
sup
{
vertical-align: super;
font-size: smaller;
line-height:inherit;
}
/* Divs que contiene la pagina.
---------------------------------------------------------------------*/
#container
{
margin:0 auto 10px;
text-align:left;
width:1000px;
}
.breadCrumbHolder
{
margin:0 0 20px 0;
}
pre
{
background:#ddd;
border:solid 1px #fff;
padding:10px;
color:#111;
}
.description
{
float:left;
width:700px;
margin-right:20px;
}
.sideBar
{
float:left;
background:#fff;
border:solid 1px #dedede;
padding:20px;
width:238px;
margin:50px 0 0 0;
}
.license p
{
font-size:0.83333em;
color:#888;
}
.module:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
* html .module
{
height: 1%;
overflow: visible;
}
* + html .module
{
min-height: 1%;
}
/* Breadcrumb estilo del menú de navegación.
---------------------------------------------------------------------*/
.breadCrumb
{
margin: 0;
padding: 0;
float: left;
display: block;
height: 21px;
overflow: hidden;
width: 990px;
padding:5px;
border:solid 1px #dedede;
background:#fff;
}
.breadCrumb ul
{
margin: 0;
padding: 0;
height: 21px;
display: block;
}
.breadCrumb ul li
{
display: block;
float: left;
position: relative;
height: 21px;
overflow: hidden;
line-height: 21px;
margin: 0px 6px 0px 0;
padding: 0px 10px 0px 0;
font-size: .9167em;
background: url(../imagenes/flecha.gif) no-repeat 100% 0;
}
.breadCrumb ul li div.chevronOverlay
{
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.breadCrumb ul li span
{
display: block;
overflow: hidden;
}
.breadCrumb ul li a
{
display: block;
position: relative;
height: 21px;
line-height: 21px;
overflow: hidden;
float: left;
}
.breadCrumb ul li.first a
{
height: 16px !important;
text-indent:-1000em;
width:16px;
padding: 0;
margin-top: 2px;
overflow: hidden;
background:url(../imagenes/inicio.gif) no-repeat 0 0;
}
.breadCrumb ul li.first a:hover
{
background-position: 0 -16px;
}
.breadCrumb ul li.last
{
background: none;
margin-right: 0;
padding-right: 0;
}
.chevronOverlay
{
display: none;
background: url(../imagenes/flecha.png) no-repeat 100% 0;
width: 13px;
height: 20px;
}
#texto {
height: 200px;
width: 980px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 10px;
}
PASO 7
Presionamos el comando Ctrl + S para guardar 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 html4strict.
<div id="container">
<h1>BreadCrumb en CSS y JQuery</h1>
<!-- Inicia el menú de navegación-->
<div class="breadCrumbHolder module"></div>
<div class="breadCrumbHolder module"></div>
<div class="breadCrumbHolder module">
<div id="breadCrumb" class="breadCrumb module">
<ul>
<li>
<a href="http://www.tutorialesenlaweb.com/">Inicio</a>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com/secciones/desarrollo-web/">Desarollo Web</a>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com/secciones/desarrollo-web/jquery-desarrollo-web/">JQuery</a>
</li>
<li>
<a href="#">BreadCumb en JQuery</a>
</li>
<li>
<a href="#">Demo en línea</a>
</li>
<li>
Demo en línea BreadCumb en JQuery y CSS.
</li>
</ul>
</div>
</div>
<div class="breadCrumbHolder module"></div>
<div class="chevronOverlay main">
</div>
<!-- Fin del menú de navegación-->
<div class="writeup module"></div>
<div class="texto" id="texto">Texto Contenido de la web</div>
</div>
PASO 9
Para finalizar creamos una carpeta llamada js dentro de la cual vamos a copiar los archivos JS que adjunto en este tutorial.
PASO 10
Listo ya tenemos nuestro tutorial terminado.
Descarga el editable Menu CSS Jquery