Temas > Programacion > Css > Creacion de un menu vertical con CSS
Julio

Creación de un menú vertical configurando las pseudoclases
Un recurso muy útil es disponer un menú en una página, si no requerimos
uno muy elaborado podemos resolverlo utilizando sólo CSS y HTML (en otros
casos se requiere además JavaScript).
Vamos a implementar uno muy sencillo que requiere agrupar en un div una
serie de párrafos que contienen un hipervínculo cada uno. Cuando la
flecha del mouse se encuentra sobre el hipervínculo cambiamos el color del
fondo y la letra del hipervínculo.
El problema resuelto es:
<?php //esto no va
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="menu">
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.msn.com">Msn</a></p>
<p><a href="http://www.altavista.com">Altavista</a></p>
</div>
</body>
</html>
?>//esto no va
La hoja de estilo asociada a esta página es:
<?php //esto no va
#menu {
 font-family: Arial;
}
#menu p {
  margin:0px;
  padding:0px;
}
#menu a {
  display: block;
  padding: 3px;
  width: 160px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eeeeee;
  text-align:center;
}
#menu a:link, #menu a:visited {
  color: #ff0000;
  text-decoration: none;
}
#menu a:hover {
  background-color: #336699;
  color: #ffffff;
}
?>//esto no va
Podemos decir que definimos un estilo por medio de un Id llamado menu.
Definimos una regla para este Id:
<?php //esto no va
#menu {
  font-family: Arial;
}
?>//esto no va
La segunda regla:
<?php //esto no va
#menu p {
  margin:0px;
  padding:0px;
}
?>//esto no va
Estamos indicando que todos los párrafos contenidos en el estilo #menu
deben tener cero en margin y padding.
Luego las anclas definidas dentro del estilo #menu definen las siguientes
características:
<?php //esto no va
#menu a {
  display: block;
  padding: 3px;
  width: 160px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eeeeee;
  text-align:center;
  }
?>//esto no va
El valor block para la propiedad display permite que el ancla ocupe todo el
espacio del párrafo, indistintamente del largo del hipervínculo.
Otra propiedad nueva es width, esta fija el tamaño máximo que puede tener
el hipervínculo antes de provocar un salto de línea.
Por último inicializamos las pseudoclases:
<?php //esto no va
#menu a:link, #menu a:visited {
  color: #ff0000;
  text-decoration: none;
}
#menu a:hover {
  background-color: #336699;
  color: #ffffff;
}
?>//esto no va
Estamos definiendo el mismo color de texto para los vínculos seleccionados
como aquellos que no han sido seleccionados:
<?php //esto no va
#menu a:link, #menu a:visited {
  color: #ff0000;
?>//esto no va
Por último cambiamos el color de fondo de la opción que tiene la flecha
del mouse encima:
<?php //esto no va
#menu a:hover {
  background-color: #336699;
?>//esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar