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
  Plantillas HTML5, boostrap WMasterT 6 118 07-09-2018, 02:36 PM
Último mensaje: CarlosAlberto
  APORTE, quieres aprender HTML5? GonzaloMacedo 7 273 06-09-2018, 04:33 AM
Último mensaje: jcifuentes
  [Aporte] Libro html5 De distribucion libre gassip 5 667 04-01-2016, 01:27 PM
Último mensaje: Taquion
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 355 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Formulario de inicio de session con html5 luis.ml 0 1,652 16-08-2015, 12:52 AM
Último mensaje: luis.ml
  Dudas con Menu othgeg 1 571 10-04-2015, 01:53 AM
Último mensaje: joksan
  Java | 4 operaciones basicas con menu de opciones warez 3 3,731 02-02-2015, 11:13 AM
Último mensaje: YamaT
Bombilla [PUBLICO] Imágenes con descripción animada CSS3 AngelKrak 1 619 20-01-2015, 06:29 AM
Último mensaje: garcon
  Como hacer un menu horizontal con html5 y css3 torgar22 4 1,026 16-12-2014, 02:07 PM
Último mensaje: Demozz
  Menú horizontal con buscador expandible imgur 2 562 04-12-2014, 09:08 PM
Último mensaje: imgur



Usuarios navegando en este tema: 1 invitado(s)