Underc0de

Programación Web => Zona Webmaster => Mensaje iniciado por: [Z]tuX en Mayo 15, 2011, 12:07:38 AM

Título: [CSS][BASICO] Creando un menu
Publicado por: [Z]tuX en Mayo 15, 2011, 12:07:38 AM
Hola que hay!!

Pues quiero publicar un menú que hice con HTML/CSS, es muy básico pero tiene un  efecto, que cuando pasas el puntero en una opcion este sobre sale...
Aqui una captura de como Luce:

(http://lh3.googleusercontent.com/-O7Eqmu1X4x4/Tc8pI3jMlmI/AAAAAAAAAE4/IChHnfLrPl0/captura001.jpg)

Y AQUI (http://secretuser8.site90.com/demos/menu.css.html) un demo...
Y aqui dejo el código:
Código (html5) [Seleccionar]

<html>
<head><title>Menu Con CSS by ZtuX</title>
<style type="text/css">
#menu
{
  background-color:#000;
  width: 800px;
  margin:auto;
  border:1px solid;
  border-radius: 1px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align:center;
}
.lista
{
display:inline;
}
.lista a
{
  color:#0f0;
  list-style:none;
  display:inline;
  padding: 15px;
  list-style:none;
  text-decoration:none;
}
.lista a:hover
{
  color:#0f0;
  background-color:#333;
  list-style:none;
  display:inline;
  padding: 5px;
  text-decoration:none;
  list-style:none;
  link:none;
  border:1px solid;
  border-radius: 1px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
</style>
</head>

<body>

<h1 align="center">Menú Básico con HTML/CSS</h1>

<ul id="menu">
   <li class="lista"><a href="#">Inicio</a></li>
   <li class="lista"><a href="#">Mis productos</a></li>
   <li class="lista"><a href="#">Sobre Mi</a></li>
   <li class="lista"><a href="#">Contacto</a></li>
   <li class="lista"><a href="#">Mas</a></li>
   <li class="lista"><a href="#">Mas</a></li>
   <li class="lista"><a href="#">Mas</a></li>
   <li class="lista"><a href="#">Mas</a></li>
</ul>

</body>
</html>




Claro ustedes lo pueden editar a su gusto, con los colores que quieran :D , e incluso recomiendo que hagan una hoja de estilos a parte y despues solo la vinculen con la pagina html...

def ZtuX()
print 'Saludos'
print 'By ZtuX'
Título: Re:Menu Básico con HTML/CSS
Publicado por: arthusu en Mayo 15, 2011, 11:34:30 PM
gracias x el codigo del menu se ve muy bien la verdad, gracias  :)
Título: Re:Menu Básico con HTML/CSS
Publicado por: ~ Yoya ~ en Mayo 15, 2011, 11:56:23 PM
Buen menú man, aunque IE <= 8 no soportan CSS3 asi que border-radius no funciona.

Aunque existen varios hack para poder realizar la apariencia de bordes redondeados.

Saludos.
Título: Re:Menu Básico con HTML/CSS
Publicado por: kamiloiori en Junio 11, 2011, 01:49:31 PM
gracias  ;D
Título: Re:Menu Básico con HTML/CSS
Publicado por: Sensei en Junio 30, 2011, 11:32:07 AM
Está muy bien la cabecera, estoy comenzando a programar en HTML una página personal y justo estaba mirando ejemplos de menú, me ha servido de mucho, además, la estoy haciendo también en fondo negro y letras verdes, como se nota que somos de la generación Matrix xD.