[CSS][BASICO] Creando un menu

[Z]tuX · 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:

Y You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login un demo...
Y aqui dejo el código:

Código: html5


<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

, 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'

arthusu · Mayo 15, 2011, 11:34:30 PM

gracias x el codigo del menu se ve muy bien la verdad, gracias

~ Yoya ~ · 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.

kamiloiori · Junio 11, 2011, 01:49:31 PM

gracias

Sensei · 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.

[CSS][BASICO] Creando un menu

[Z]tuX

Mayo 15, 2011, 12:07:38 AM Ultima modificación: Abril 18, 2014, 11:44:38 AM por Expermicid

arthusu

Mayo 15, 2011, 11:34:30 PM #1

~ Yoya ~

Mayo 15, 2011, 11:56:23 PM #2

kamiloiori

Junio 11, 2011, 01:49:31 PM #3

Sensei

Junio 30, 2011, 11:32:07 AM #4