Calificación:
  • 1 voto(s) - 1 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Menu HTML5 - CSS3
#1
Aqui les dejo un menu en css con su estilo, es grande este menu pero claro muy facil de modificar todo

Codigo HTML :::

Código:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Menu</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<header id="botonera">
<nav id="botonera-2">
     <menu>Home</menu>
        <menu>Noticias</menu>
        <menu>Facebook</menu>
        <menu>Twitter</menu>
    </nav>
</header>
</body>
</html>

Codigo CSS :::

Código:
body{
background:#666;
}
#botonera{
width:98%;
margin:10px auto;
height:60px;
background:none;
background-clip: padding-box;    
-moz-background-clip: padding;    
-webkit-background-clip: padding;  
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
border: 10px solid rgba(255,255,255,0.3);
}
#botonera-2{
border-radius:3px;
width:100%;
height:60px;
margin:0px;
background:linear-gradient(#CCC 0%, #333 100%);
background:-moz-linear-gradient(#CCC 0%, #333 100%);
background:-ms-linear-gradient(#CCC 0%, #333 100%);
background:-o-linear-gradient(#CCC 0%, #333 100%);
background:-webkit-linear-gradient(#CCC 0%, #333 100%);
}
menu{
display:inline-block;
width:100px;
text-align:center;
margin:10px auto;
background:none;
color:#fff;
font:bold;
padding:10px;
}
menu:hover{
  background:-moz-linear-gradient(#FFF 0%, #C4C4C4 100%);
background:linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-ms-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-o-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-webkit-linear-gradient(#FFF 0%, #DEDEDE 100%);
opacity:0.6;
-moz-opacity:0.6;
-o-opacity:0.6;
-webkit-opacity:0.6;
-ms-opacity:0.6;
border-radius:5px;
color:red;
box-shadow:0 0 10px #FFf;
-moz-box-shadow:0 0 10px #FFf;
-ms-box-shadow:0 0 10px #FFf;
-o-box-shadow:0 0 10px #FFf;
-webkit-box-shadow:0 0 10px #FFf;
}
#buscar{
background:#fff;
border-bottom-left-radius:10px;
border-top-left-radius:10px;
border-right:0px;
border:solid 0px #DEDEDE;
color:#999;
padding:6px;
width:150px;
position:relative;
display:inline-block;
margin-left:50px;
margin-top:15px;
vertical-align:top;
}

Bueno espero les sirva de algo este menu y lo puedan modificar a su gusto a su tamaño deseable.. Guiño

Por aqui me han pedido capturas del menu aqui se las dejo la recorte un poco pero el ancho tiene mas igual se puede modificar facilmente Sonrisa

[Imagen: thump_8670870menu.png]

Y un demo Guiño

Link: Demo del menu css con html5
#2
Muchas gracias, es interesando el HTML5, voy a tener que ponerme a estudiarlo un poco Sonrisa

Probé el menú y queda muy bien.
Gracias por compartirlo Gran sonrisa
Se buscan colaboradores para comenzar con un foro de programación en general.

www.programarg.com
WWW
#3
Estaría bien que pusieras un link para un demo C: así seria mas fácil para nosotros visualizar sin tener que copiar los códigos y guardarlos.

El menú esta bueno, aunque estaría bien que se usaran otros colores, esos colores que tienen están muy opacos, lo bueno es que lo podemos cambiar nosotros mismos desde el css.
[Imagen: 10wqwb4.png]
WWW
#4
considero que para mi es mejor si pones una captura.
#5
Se agradece tu esfuerzo, pero pon una captura.

Así podremos verlo realmente como es.
[Imagen: vW1pNwU.png]
WWW
#6
gracias por el menú pero como ponen todo pone una captura para almeno saber como es
Firma editada. No puedes enlazar a un sitio con contenido para adultos ya que Skylium recibe visitas de menores de edad también Guiño
#7
Muy bueno, gracias.

Lo voy a usar en unos proyectos que estoy desarrollando.
#8
Gracias por el aporte. Con una captura seria genial para poder verlo sin tener que insertarlo.

Saludos
[Imagen: paqG8L9.jpg]
#9
Ahora con HTML5 todo se ve muchísimo más bonito. El menú está bastante bien aunque los colores algo oscuros. Si se modifica podría quedar parecido al de la página de Apple jejeje.
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  APORTE, quieres aprender HTML5? GonzaloMacedo 1 108 19-08-2018, 11:40 AM
Último mensaje: fercol
  [Aporte] Libro html5 De distribucion libre gassip 5 588 04-01-2016, 01:27 PM
Último mensaje: Taquion
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 329 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Formulario de inicio de session con html5 luis.ml 0 1,451 16-08-2015, 12:52 AM
Último mensaje: luis.ml
  Dudas con Menu othgeg 1 542 10-04-2015, 01:53 AM
Último mensaje: joksan
  Java | 4 operaciones basicas con menu de opciones warez 3 3,347 02-02-2015, 11:13 AM
Último mensaje: YamaT
Bombilla [PUBLICO] Imágenes con descripción animada CSS3 AngelKrak 1 581 20-01-2015, 06:29 AM
Último mensaje: garcon
  Como hacer un menu horizontal con html5 y css3 torgar22 4 956 16-12-2014, 02:07 PM
Último mensaje: Demozz
  Menú horizontal con buscador expandible imgur 2 526 04-12-2014, 09:08 PM
Último mensaje: imgur
  7 Efectos con CSS3 jlgarduza 0 371 23-11-2014, 06:03 AM
Último mensaje: jlgarduza



Usuarios navegando en este tema: 1 invitado(s)