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.

Code block

<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.

Code block

.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.

Code block

<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>