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
  • 1790 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 No tienes permisos para ver links. Registrate o Entra con tu cuenta un demo...
Y aqui dejo el código:
Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2. <No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>Menu Con CSS by ZtuX</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3. <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text/css">
  4. #menu
  5. {
  6.   background-color:#000;
  7.   width: 800px;
  8.   margin:auto;
  9.   border:1px solid;
  10.   border-radius: 1px;
  11.   -moz-border-radius: 10px;
  12.   -webkit-border-radius: 10px;
  13.   text-align:center;
  14. }
  15. .lista
  16. {
  17. display:inline;
  18. }
  19. .lista a
  20. {
  21.   color:#0f0;
  22.   list-style:none;
  23.   display:inline;
  24.   padding: 15px;
  25.   list-style:none;
  26.   text-decoration:none;
  27. }
  28. .lista a:hover
  29. {
  30.   color:#0f0;
  31.   background-color:#333;
  32.   list-style:none;
  33.   display:inline;
  34.   padding: 5px;
  35.   text-decoration:none;
  36.   list-style:none;
  37.   link:none;
  38.   border:1px solid;
  39.   border-radius: 1px;
  40.   -moz-border-radius: 10px;
  41.   -webkit-border-radius: 10px;
  42. }
  43. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  44. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  45.  
  46. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  47.  
  48. <No tienes permisos para ver links. Registrate o Entra con tu cuenta align="center">Menú Básico con HTML/CSS</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  49.  
  50. <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="menu">
  51.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Inicio</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  52.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Mis productos</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  53.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Sobre Mi</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  54.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Contacto</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  55.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Mas</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  56.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Mas</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  57.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Mas</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  58.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta class="lista"><No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#">Mas</No tienes permisos para ver links. Registrate o Entra con tu cuenta></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  59. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  60.  
  61. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  62. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  63.  
  64.  
  65.  

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: 546
  • Actividad:
    8.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  :)

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: 1266
Último mensaje Enero 03, 2013, 09:31:12 pm
por DGadiiel
[HTML][BASICO] Primeros pasos en HTML

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1140
Ú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: 956
Ú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: 1097
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[HTML][BASICO] Script para que no se pueda copiar una imagen

Iniciado por Pa531no5

Respuestas: 0
Vistas: 1015
Último mensaje Abril 16, 2010, 11:21:13 am
por Pa531no5