-
Tutorial Menú de vuelco
-
Un menú de vuelco es cuando una imagen o el color cambia cuando el ratón se mueve sobre el enlace, creando una sensación de animación. Para crear un menú con volcadura, una comprensión de HTML (Hyper Text lenguaje de marcas) y CSS (hojas de estilo de contenido) que se requiere. El uso de CSS y HTML le permite modificar la imagen de fondo o colores sin la necesidad de recrear cada botón.
Menú de marcado HTML
El menú se compone de varios elementos de la etiqueta de la parte HTML del menú. Cada etiqueta tiene una etiqueta de apertura y una de cierre, como <body> </ body>. La expresión etiqueta de inicio es la etiqueta <div>. Se define una sección o división en un documento HTML y utiliza un identifyer único (ID). Los otros elementos de su menú caerán entre estas dos etiquetas <div> y </ div>. Con el componente principal del contenedor creado, escriba su lista de menú usando la etiqueta HTML no ordenada (ul) y la etiqueta <li>. Use la etiqueta <a> (ancla) con un atributo "href" para especificar el destino de enlace (URL):
<Body>
<Div id = "nav">
<Ul>
<Li> <a href="URL"> principal </a> </ li>
<Li> <a href="URL"> productos </a> </ li>
<Li> <a href="URL"> Servicios </a> </ li>
<Li> <a href="URL"> Contacto </a> </ li>
</ Ul>
</ Div></ Body>
Contenido Estilo Hoja de instalación
Un CSS (hojas de estilo de contenidos) que permite agrupar elementos juntos para etiquetas específicas. Una hoja de estilo utiliza las etiquetas <style> </ STYLE> y se coloca en la sección <head> del documento HTML. El atributo "type" especifica la información que sigue es un CSS.
Especificar el "#nav" básico <div> atributos, así como el estilo de nuestra lista desordenada <ul>, tales como el margen, la anchura y la eliminación de las balas (-style-type lista). Otros atributos incluyen establecer el margen y el relleno a cero para eliminar los guiones de línea, y que define el estilo de texto usando "font-family" y "font-size":
<Style type = "text / css">
{nav
Anchura: 140px; / Uso tamaño misma anchura para "#nav una" sección de abajo /
font-family: Verdana, Sanf-serif;
font-size: 12px;
}nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}</ Style>
Crear un pequeño espacio entre la lista de elementos de menú <li> para una mejor presentación. El siguiente atributo coloca dos píxeles por encima de cada elemento de la lista:
li {nav
margen: 2px 0 0;
}CSS Efecto Resaltado
La fase final es el efecto de vuelco, que utiliza las clases asociadas a los visitados, activos y se ciernen estados de un enlace (a: link, a: active; a: visited; a: hover). Los atributos de enlace básicos asignados a "un #nav" se aplican a todos los estados de un enlace. Mediante el uso de un color más oscuro para el fondo "a: hover" atributo, se crea contraste;
nav a {
bloqueo de pantalla;
Anchura: 140px; / (Anchura debe coincidir con la sección "#nav" por encima /)
padding: 2px 2px 2px 8 píxeles;
frontera: 1px solid # 000000;
fondo: #CCCCCC;
text-decoration: none; / Elimina el enlace subraya /}nav a: link, #nav a: active, #nav a: visited {
color: # 000000; / NEGRO DE TEXTO DE COLOR /}nav a: hover {
frontera: 1px solid # 000000;
background: # 999999;
de color: #FFFFFF; / BLANCO COLOR DE TEXTO /}Añadir imagen
Por especias, añadir una imagen de fondo para el menú (#nav a: hover y NAV a: link):
background: # 333333 URL (imágenes / background1.gif);
