Menu con CSS
Con el CSS utilizaremos los intercambiadores de images parecidos a los que se hacen con JavaScript.
Lo primero que Necesitaremos es crear una imagen, que servirá de como opcionde nuestro menú. Es muy importante saber que esta imagen debe tener las dos opciones en la que se encuentra el estado del menú (en reposo y cuando pasamos el puntero sonre ella).
aqui tienes un ejemplo de la imagen (200X64)
Cada opción del menú tendrá un tamaño de 200 x 32.
ahora crearemos el codigo para el menú
<html>
<head>
<title> Menu con CSS</title>
<style type='text/css'>
body {
font-family: Verdana;
font-size: x-small;
font-weight: bold;
padding: 0px;
margin: 0px;
background-image: url('images/bg.gif');
}
img {
border: none;
}
#mimenu {
width: 200px;
margin: 10px;
}
#mimenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#mimenu li a {
height: 32px;
text-decoration: none;
}
#mimenu li a:link, #mimenu li a:visited {
color: #FFF;
display: block;
background: url(menu.gif);
padding: 8px 0 0 35px;
}
#mimenu li a:hover, #mimenu li #current {
color: #FFF;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style>
</head>
<body>
<h1>MENU CON CSS</h1>
<div id="mimenu"><!-- Creamos un DIV con el ID del estilo -->
<ul>
<li><a href="index.htm">Inicio</a></li>
<li><a href="quienessomos.htm">¿Quienes somos?</a></li>
<li><a href="servicios.htm">Servicios</a></li>
<li><a href="tarifas.htm">Tarifas</a></li>
<li><a href="contacto.htm">Contactenos</a></li>
</ul>
</div>
</html>
y Listo! eso es todo. Intentalo y Disfruyalo!
No hay comentarios.:
Deja tu comentario sobre este post