comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[CSS][BASICO] Creando un menu

  • 4 Respuestas
  • 1861 Vistas

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

Desconectado [Z]tuX

  • *
  • Underc0der
  • Mensajes: 27
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
« 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
  1. <head><title>Menu Con CSS by ZtuX</title>
  2. <style type="text/css">
  3. #menu
  4. {
  5.   background-color:#000;
  6.   width: 800px;
  7.   margin:auto;
  8.   border:1px solid;
  9.   border-radius: 1px;
  10.   -moz-border-radius: 10px;
  11.   -webkit-border-radius: 10px;
  12.   text-align:center;
  13. }
  14. .lista
  15. {
  16. display:inline;
  17. }
  18. .lista a
  19. {
  20.   color:#0f0;
  21.   list-style:none;
  22.   display:inline;
  23.   padding: 15px;
  24.   list-style:none;
  25.   text-decoration:none;
  26. }
  27. .lista a:hover
  28. {
  29.   color:#0f0;
  30.   background-color:#333;
  31.   list-style:none;
  32.   display:inline;
  33.   padding: 5px;
  34.   text-decoration:none;
  35.   list-style:none;
  36.   link:none;
  37.   border:1px solid;
  38.   border-radius: 1px;
  39.   -moz-border-radius: 10px;
  40.   -webkit-border-radius: 10px;
  41. }
  42. </head>
  43.  
  44.  
  45. <h1 align="center">Menú Básico con HTML/CSS</h1>
  46.  
  47. <ul id="menu">
  48.    <li class="lista"><a href="#">Inicio</a></li>
  49.    <li class="lista"><a href="#">Mis productos</a></li>
  50.    <li class="lista"><a href="#">Sobre Mi</a></li>
  51.    <li class="lista"><a href="#">Contacto</a></li>
  52.    <li class="lista"><a href="#">Mas</a></li>
  53.    <li class="lista"><a href="#">Mas</a></li>
  54.    <li class="lista"><a href="#">Mas</a></li>
  55.    <li class="lista"><a href="#">Mas</a></li>
  56. </ul>
  57.  
  58. </body>
  59. </html>
  60.  
  61.  
  62.  

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

  • *
  • Underc0der
  • Mensajes: 552
  • Actividad:
    3.33%
  • Reputación 2
  • Yo solo se que no se nada - Socrátes
    • Ver Perfil
    • Arthusu BLOG
  • Skype: arthusuxD
« Respuesta #1 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: arthusu@gmail.com

Desconectado ~ Yoya ~

  • *
  • Underc0der
  • Mensajes: 152
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • Email
« Respuesta #2 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
« Respuesta #3 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
« Respuesta #4 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.

 

¿Te gustó el post? COMPARTILO!



[JavaScript][BASICO] Videocurso de JavaScript

Iniciado por NewRadius

Respuestas: 1
Vistas: 1328
Último mensaje Enero 03, 2013, 09:31:12 pm
por DGadiiel
[HTML][BASICO] Primeros pasos en HTML

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1234
Último mensaje Febrero 24, 2010, 11:53:11 am
por ANTRAX
[HTML][BASICO] Script ''Haga desfilar un texto mediante la etiqueta <marquee>''

Iniciado por ANTRAX

Respuestas: 0
Vistas: 996
Último mensaje Febrero 24, 2010, 11:15:37 am
por ANTRAX
[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

Respuestas: 0
Vistas: 1128
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[HTML][BASICO] Como cambiar el cursor por uno personalizado (Explicado)

Iniciado por elshotta

Respuestas: 2
Vistas: 1765
Último mensaje Octubre 15, 2012, 08:25:38 pm
por elshotta