-
Cómo hacer un menú Rollover
-
menús rollover son un método eficaz para la organización de contenido del sitio web, haciendo que su sitio sea más fácil para los usuarios navegar. software de diseño web por lo general incluye herramientas para hacer menús rollover, pero estos menús también se puede crear con un editor de texto simple y el método de las hojas de estilo en cascada o el método de tablas.
Instrucciones
Hojas de estilo en cascada
1 Establecer el marco básico documento HTML:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
2 Inserte el siguiente código entre las etiquetas <head> y </ head>:
<LINK href = "rollovers.css" type = "text / css" rel = "stylesheet">
3 Crear la hoja de estilo mediante la creación de un nuevo documento de texto titulado "rollovers.css."
4 Escriba el siguiente código HTML para crear el espacio para contener el menú y definir el ancho del menú:
<Div id = "list-menu">
</ Div>
list-menu {
Anchura: 132px;}
5 Crear los enlaces del menú en una lista HTML no ordenada:
<Ul>
<Li> <a href="#"> artículo </a> </ li>
<Li> <a href="#"> artículo </a> </ li>
<Li> <a href="#"> artículo </a> </ li>
</ Ul>
6 Quitar los guiones y las balas por defecto:
ul-lista de menú {
margin: 0;padding: 0;
list-style-type: none;
}
7 Definir los estilos de texto añadiendo el siguiente código al CSS anterior:
font-family: Verdana, Arial, Sanf-serif;
font-size: 12px;
8 Crear estilos de los enlaces en el menú:
list-menu a {
bloqueo de pantalla;Anchura: 120px;
padding: 2px 2px 2px 10px;
frontera: 1px solid # 000000;
fondo: #dcdcdc;
text-decoration: none;
}
Cambiar los valores de ancho, relleno, borde, fondo y decoración de texto en consecuencia, dependiendo de su preferencia.
9 Crear el efecto de vuelco mediante la definición de los visitados, activos y se ciernen estados de los enlaces:
list-menu a: link, # lista de menú de un activo, # lista de menú a: visited {
color: # 000000;}
list-menu a: hover {
frontera: 1px solid # 000000;background: # 333333;
de color: #ffffff;
}
Mesas
10 Crea los enlaces con cada enlace contenido en una celda de tabla:
<Div class = "Menú">
<Resumen de la tabla = "" cellpadding = "1" cellspacing = "1" class = "Menú">
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link 1 </a> </ td>
</ Tr>
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link 2 </a> </ td>
</ Tr>
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link 3 </a> </ td>
</ Tr>
<Tr>
</ Table>
</ Div>
11 Especificar un estilo para la tabla con la anchura deseada:
table.menu a {
Anchura: 125px;
frontera: 1px solid # 333333;
bloqueo de pantalla;
}
12 Especificar el estilo de base para la clase de menú "div":
div.menu a {
color: # 333333;
fondo: #ffffff;
text-decoration: none;
font-size: 11px;
line-height: 16px;
font-family: Tahoma, Verdana, sans-serif;
padding: 2px 5px;
}
Cambiar el color, fondo, decoración del texto, tamaño de fuente, altura de línea, familia de fuentes y valores de relleno en consecuencia, dependiendo de su preferencia.
13 Especificar los colores de los enlaces y los estilos de la libración para crear el efecto de relieve:
div.menu a: link {
color: # 333333;
background: # CCCC99;
}
div.menu a: active {
color: # 000000;
background: # CCCC99;
}
div.menu a: visited {
color: # 333333;
background: # CCCC99;
}
div.menu a: hover {
Color: #eeeeee;
background: # 333333;
frontera: 1px solid # 000000;
}
