[CSS][BASICO] Creando un menu

  • 4 Respuestas
  • 2835 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado [Z]tuX

  • *
  • Underc0der
  • Mensajes: 27
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil

[CSS][BASICO] Creando un menu

  • 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:


Y AQUI 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'
« Última modificación: Abril 18, 2014, 11:44:38 am por Expermicid »

Desconectado arthusu

  • *
  • Ex-Staff
  • *****
  • Mensajes: 551
  • Actividad:
    0%
  • Reputación 2
  • Yo solo se que no se nada - Socrátes
  • Skype: arthusuxD
    • Ver Perfil
    • Arthusu BLOG

Re:Menu Básico con HTML/CSS

  • en: Mayo 15, 2011, 11:34:30 pm
gracias x el codigo del menu se ve muy bien la verdad, gracias  :)
Pentest - Hacking & Security Services

Contact me: [email protected]

Desconectado ~ Yoya ~

  • *
  • Underc0der
  • Mensajes: 153
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • Email

Re:Menu Básico con HTML/CSS

  • 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.
Mi madre me dijo que estoy destinado a ser pobre toda la vida.
Engineering is the art of balancing the benefits and drawbacks of any approach.

Desconectado kamiloiori

  • *
  • Underc0der
  • Mensajes: 16
  • Actividad:
    0%
  • Reputación 0
  • Compartir no es delito xD
    • Ver Perfil
    • Email

Re:Menu Básico con HTML/CSS

  • en: Junio 11, 2011, 01:49:31 pm
gracias  ;D

Desconectado Sensei

  • *
  • Underc0der
  • Mensajes: 52
  • Actividad:
    0%
  • Reputación 0
  • Mess with the best, die like the rest.
    • Ver Perfil
    • Email

Re:Menu Básico con HTML/CSS

  • 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.