Proporcionar una navegación intuitiva pero llamativa en su sitio es uno de los ingredientes para un gran diseño. Y con las mejoras de rendimiento en los navegadores más nuevos y el auge de los marcos de JavaScript como jQuery, cada vez es más fácil incluir hermosas animaciones en los diseños de sus páginas.
Hoy estamos haciendo un CSS3 &jQuery menú de navegación de estilo de medios tonos, que le permitirá mostrar formas animadas de estilo de medios tonos de acuerdo con los enlaces de navegación, y también proporcionará un editor simple para crear formas adicionales.
¡Así que comencemos con el paso uno!
Paso 1 - XHTML
El primer paso es establecer la estructura XHTML del menú. Todo el menú está posicionado dentro de una lista desordenada UL , que es la forma más adecuada de organizar la navegación de su sitio. Dentro de cada uno de los LI Los elementos son los hipervínculos, que luego se diseñan para que parezcan botones a través de un código CSS interesante que verá en un momento.
demostración.html
<div id="main"> <div id="navigation"> <ul class="menuUL"> <!-- The class names that are assigned to the links correspond to name of the shape that is shown on hover: --> <li><a href="#" class="house">Home</a></li> <li><a href="#" class="wrench">Services</a></li> <li><a href="#" class="envelope">Contact</a></li> <li><a href="#" class="info">About</a></li> </ul> <div class="clear"></div> </div> <div id="stage"> <!-- The dot divs are shown here --> </div> </div>
Si planea usar este menú en su sitio, primero deberá modificar el href atributos, para que se correspondan con la estructura de su sitio.
Vale la pena notar también la clase nombres que se asignan a cada uno de los enlaces. Esos no se usan para darles estilo, sino para decirle a jQuery qué forma representar.
Por último, está nuestro #stage div, que se rellena con un .dot especial divs que actúan como píxeles para nuestras formas. Puede crear formas personalizadas configurando el menú en modo de servicio, que se cubre en el paso tres.
Paso 2:CSS
Es hora de darle algo de vida al diseño, especificando las reglas CSS. Dividí la hoja de estilo en dos partes. Puedes ver el resto del código en styles.css en los archivos de demostración.
estilos.css - Parte 1
.menuUL li{
/* This will arrange the LI-s next to each other */
display:inline;
}
.menuUL li a,.menuUL li a:visited{
/* Styling the hyperlinks of the menu as buttons */
float:left;
font-weight:bold;
background:url(img/button_bg.jpg) repeat-x center bottom #666666;
/* display:block allows for additional CSS rules to take effect, such as paddings: */
display:block;
border:1px solid #4D4D4D;
color:#CCCCCC;
border-top-color:#565656;
padding:4px 6px;
margin:4px 5px;
height:16px;
/* Setting a CSS3 box shadow around the button */
-moz-box-shadow:0 0 1px black;
-webkit-box-shadow:0 0 1px black;
box-shadow:0 0 1px black;
/* CSS3 text shadow */
text-shadow:0 1px black;
}
.menuUL li a:hover{
/* On hover show the top, lighter, part of the background: */
background-position:center top;
text-decoration:none;
}
En esta primera parte, puede ver que estamos mostrando el LI elementos en línea , que los colocará uno al lado del otro y así nos permitirá formar un menú de navegación orientado horizontalmente de forma compatible con todos los navegadores.
Los hipervínculos dentro de ellos se muestran como elementos de bloque y flotan hacia la izquierda. También algo de CSS3 se aplican reglas como box-shadow, para proyectar una sombra debajo de los botones y text-shadow, para sombras debajo del texto del botón.
Esos son todos pequeños detalles que contribuyen a la sensación general de la página, pero de ninguna manera son obligatorios para el proceso de navegación. Esto es excelente para los usuarios cuyos navegadores aún no son compatibles con CSS3 (sobre todo la familia IE).
estilos.css - Parte 2
#navigation{
/* The navigation menu bar: */
background:#222222;
border:1px solid #111111;
float:left;
padding:5px 10px;
}
#navigation,.menuUL li a{
/* CSS3 rounded corners for both the navigation bar and the buttons: */
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}
#stage{
/* The stage contains the individual divs that comprise the halftone icon: */
height:300px;
position:absolute;
right:50px;
top:20px;
width:400px;
}
.dot{
/* The stage contains 192 .dot divs: */
float:left;
height:25px;
width:25px;
}
.dot.active{
/* When assigned the active class, the div shows a background image of a dot: */
background:url(img/dot.png) no-repeat center center;
}
.clear{
/* Old-school clear fix hack to clear the floats: */
clear:both;
}
#main{
margin:0 auto;
position:relative;
width:900px;
}
En las líneas de arriba puedes ver el resto de reglas CSS3 que se utilizan. Allí agregamos esquinas redondeadas a través del border-radius (compatible con la mayoría de los navegadores modernos) tanto para la barra de navegación como para los botones individuales a la vez.
Paso 3:jQuery
Después de terminar con todo el estilo, es hora de agregar algo de JavaScript. El primer paso es incluir la biblioteca jQuery en la sección principal del documento en el que estamos trabajando.
Como mencioné anteriormente, hay dos modos disponibles para el menú de navegación. El primero es el predeterminado, que muestra una forma previamente definida en una animación suave cuando pasas el mouse sobre un botón de navegación.
El segundo le permite crear sus propias formas haciendo clic en la cuadrícula. Posteriormente puede exportar la forma e insertarla como una matriz en el objeto de formas. Para que jQuery lo muestre, solo necesita insertar el nombre de su forma recién creada en la clase atributo del enlace de navegación con el que desea asociarlo.
Ahora veamos cómo funciona esto.
script.js - Parte 1
/* Set serviceMode to true to create your own shapes: */
var serviceMode=false;
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var str=[];
var perRow = 16;
/* Generating the dot divs: */
for(var i=0;i<192;i++)
{
str.push('<div class="dot" id="d-'+i+'" />');
}
/* Joining the array into a string and adding it to the inner html of the stage div: */
$('#stage').html(str.join(''));
/* Using the hover method: */
$('#navigation li a').hover(function(e){
/* serviceDraw is a cut-out version of the draw function, used for editing and composing shapes: */
if(serviceMode)
serviceDraw($(this).attr('class'));
else
draw($(this).attr('class'));
}, function(e){});
/* Caching the dot divs into a variable for performance: */
dots = $('.dot');
if(serviceMode)
{
/* If we are in service mode, show borders around the dot divs, add the export link, and listen for clicks: */
dots.css({
border:'1px solid black',
width:dots.eq(0).width()-2,
height:dots.eq(0).height()-2,
cursor:'pointer'
});
$('<div/>').css({
position:'absolute',
bottom:-20,
right:0
}).html('<a href="" onclick="outputString();return false;">[Export Shape]</a>').appendTo('#stage');
dots.click(function(){
$(this).toggleClass('active');
});
}
});
En la parte superior del archivo se encuentra el serviceMode variable. Configurándolo en verdadero puedes empezar a crear tus propias formas. Simplemente no olvide volver a establecerlo en falso después de que haya terminado, para que sus visitantes no vean la cuadrícula y el enlace de exportación. Sería aún mejor si mantiene una versión de modo de servicio dedicada localmente y usa una diferente para su sitio (de esta manera también puede eliminar el código innecesario para el modo de servicio de la versión de producción).
Después de que el DOM haya terminado de cargarse (en $(document).ready() ) rellenamos el #stage con una cuadrícula de 192 divs (16 por fila), que formarán los píxeles de la imagen.
script.js - Parte 2
var shapes={
/* Each shape is described by an array of points. You can add your own shapes here, just don't forget to add a coma after each array, except for the last one */
house:[22,37,38,39, .... 166,167,168,169],
wrench:[22,23,24,25,26 .... 148,163],
envelope:[34,35,36,37, .... 153,154,155,156],
info:[22,23,38,39, .... 151,166,167,168]
}
var stopCounter = 0;
var dots;
function draw(shape)
{
/* This function draws a shape from the shapes object */
stopCounter++;
var currentCounter = stopCounter;
dots.removeClass('active').css('opacity',0);
$.each(shapes[shape],function(i,j){
setTimeout(function(){
/* If a different shape animaton has been started during the showing of the current one, exit the function */
if(currentCounter!=stopCounter) return false;
dots.eq(j).addClass('active').fadeTo('slow',0.4);
/* The fade animation is scheduled for 10*i millisecond into the future: */
},10*i);
});
}
function serviceDraw(shape)
{
/* A cut out version of the draw function, used in service mode */
dots.removeClass('active');
$.each(shapes[shape],function(i,j){
dots.eq(j).addClass('active');
});
}
function outputString()
{
/* Exports the positions of the active dot divs as a comma-separated string: */
var str=[];
$('.dot.active').each(function(){
str.push(this.id.replace('d-',''));
})
prompt('Insert this string as an array in the shapes object',str.join(','));
}
En la segunda parte, puedes ver las formas objeto. Contiene cuatro formas predeterminadas, que se establecen como nombres de clase para los enlaces de navegación. Puede personalizarlos cargándolos en el modo de servicio, o puede eliminarlos por completo y agregar los suyos propios.
Luego de esto definimos el sorteo , servicioDraw y la cadena de salida función. Los dos últimos se usan solo en serviceMode y ayudarte a crear tus propias formas. Si no planea usar el modo de servicio, puede continuar y eliminarlos (simplemente no olvide eliminar también las líneas 34-54 de la primera parte de script.js arriba).
¡Con esto nuestro menú de navegación CSS3 y jQuery está completo!
Conclusión
Hoy creamos un elegante menú de navegación animado con la ayuda de jQuery y CSS3 . El menú es compatible con todos los principales navegadores y funciona perfectamente incluso si JavaScript está deshabilitado. Dado que JavaScript inserta dinámicamente la mayor parte del marcado XHTML necesario para la animación, la página contiene una cantidad mínima de código y es compatible con SEO.
¿Qué opinas? ¿Cómo mejorarías este código?