Introducción
Como sabrá, los primeros 20 segundos de la interacción de un nuevo visitante con un sitio web determinan si se quedará o se irá. Esto significa que debe seguir prácticas de diseño comunes y poner todo donde el usuario esperaría que estuviera. Una parte crucial de este proceso es desarrollar un menú de navegación fácil de usar.
En este tutorial vamos a crear un elegante menú de navegación CSS + XHTML con la ayuda de la biblioteca jQuery.
Así que descarga los archivos del tutorial arriba y sigue leyendo..
Paso 1 - el XHTML
El código XHTML es simple y compatible con los motores de búsqueda.
index.html
<div id="menu-container"> <ul id="navigationMenu"> <li><a href="#" class="normalMenu">Home</a></li> <li><a href="#" class="normalMenu">Services</a></li> <li><a href="#" class="selectedMenu">Our clients</a></li> <li><a href="#" class="normalMenu">The team</a></li> <li><a href="#" class="normalMenu">About us</a></li> <li><a href="#" class="normalMenu">Contact us</a></li> </ul> </div>
Todo el menú de navegación es básicamente una lista desordenada. Puede introducir nuevos elementos de menú simplemente agregando más elementos LI y configurando sus respectivos textos y URL de destino.
Una cosa importante a tener en cuenta aquí es cómo puede marcar un elemento de menú como seleccionado de forma predeterminada (o activo); simplemente asígnele el selectedMenu clase (línea 5). Por ejemplo, aquí destacamos la página "Nuestros clientes". Puede configurarlo manualmente para un sitio estático o usar PHP para hacerlo dinámicamente.
Paso 2:jQuery
Como puede ver en la ilustración de arriba, vamos a clonar el conjunto de enlaces definidos en nuestro XHTML (los oscuros) y asignarles el hoverMenu Clase CSS, que los hace flotar sobre los predeterminados.
Esta estrategia tiene muchas ventajas:en primer lugar, mantiene el XHTML más limpio, porque no tiene que agregar esos enlaces manualmente a la página y, en segundo lugar, garantiza que tendrá una navegación limpia y funcional independientemente de la compatibilidad con javascript del visitante:excelente tanto para la usabilidad y SEO.
Ahora veamos qué sucede en nuestro script.js .
secuencia de comandos.js
$(document).ready(function(){
// executed after the page has finished loading
$('#navigationMenu li .normalMenu').each(function(){ // for each menu item
// create a duplicate hyperlink and position it above the current one
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));
});
$('#navigationMenu li').hover(function(){ // using the hover method..
// we assign an action on mouse over
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
// the animate method provides countless possibilities
},
function(){
// and an action on mouse out
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);
});
}); Genial, pero ¿qué acabamos de hacer? Primero usamos el $('document').ready método para asegurarse de que el código se ejecute después de que la página haya terminado de cargarse.
Luego recorrimos todos los enlaces y los clonamos, asignando una nueva clase CSS - hoverMenu .
Después de esto usamos el hover() método para agregar fácilmente controladores de eventos para el evento mouseover y mouseout.
Más tarde usamos el método animado, una herramienta realmente poderosa en el arsenal de jQuery. En este caso, le proporcionamos un nuevo marginTop valor y la duración del efecto. jQuery se encargará de toda la animación.
Tenga en cuenta el uso de stop() Método:detiene todas las animaciones actualmente activas y, por lo tanto, evita la acumulación de diferentes efectos de animación uno encima del otro, lo que garantiza una experiencia de usuario fluida.
Paso 3:el CSS
Echemos un vistazo a nuestra hoja de estilo CSS.
demostración.css
/* Page styles */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ /* resetting some elements for better browser compatibility */
margin:0px;
padding:0px;
}
body{ /* styling the body */
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:12px;
}
/* Navigation menu styles */
ul{ /* the unordered list */
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul li{
border:1px solid #444444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:white;
background:url(img/dark_bg.gif) repeat-x #444444;
} Como puede ver, tenemos tres clases principales que definen el aspecto de nuestro menú de navegación. Menú normal - para el estado normal de los enlaces de navegación, hoverMenu - enlace más claro que se desliza hacia abajo al pasar el mouse, selectedMenu el estado activo (seleccionado).
¡Con esto, nuestro elegante menú de navegación está completo!
Conclusión
En este tutorial, le mostré cómo crear un menú de navegación elegante y fácil de usar. Usted es libre de usarlo en sus sitios y modificarlo de la manera que considere apropiada.