elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  diseño menu
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: diseño menu  (Leído 1,498 veces)
kakashi20


Desconectado Desconectado

Mensajes: 435


Ver Perfil
diseño menu
« en: 10 Febrero 2014, 17:08 pm »

hola

quisiera saber como podria hacer este tipo de menu..

https://launidad.co/menu.JPG

algún consejo o idea ?

gracias


En línea

WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: diseño menu
« Respuesta #1 en: 10 Febrero 2014, 17:33 pm »

sabes programar? tienes algo hecho?

Acá hay uno básico sin las puntas triangulares:
Código
  1. .menu > li{
  2. display: inline;
  3. list-style-type: none;
  4. border: 1px solid #FFFFFF;
  5. background-color: #FF0000;
  6. color: #FFFFFF;
  7. padding: 5px 15px;
  8.    margin: 0;
  9. }
  10.  
  11. <ul class="menu">
  12. <li>Inicio</li><li>Servicio</li>
  13. </ul>

Acá hice uno con las puntas triangulares:

Código
  1. .menu > li{
  2. display: inline;
  3. list-style-type: none;
  4. border: 1px solid #FFFFFF;
  5. background-color: #FF0000;
  6. color: #FFFFFF;
  7. padding: 5px 8px 5px 27px;
  8.    margin: 0;
  9.    position: relative;
  10.    margin-right: 2px;
  11. }
  12. .menu > li:first-child{
  13.    padding: 5px 15px;
  14. }
  15. .menu > li > span:first-child{
  16.    position: absolute;
  17.    top: 0;
  18.    right: -20px;
  19.    width: 0;
  20.    height: 0;
  21.    border-top: 15px solid transparent;
  22.    border-left: 20px solid #FF0000;
  23.    border-bottom: 15px solid transparent;
  24.    z-index: 9;
  25. }
  26. .menu > li > span:last-child{
  27.    position: absolute;
  28.    top: 0;
  29.    right: -22px;
  30.    width: 0;
  31.    height: 0;
  32.    border-top: 15px solid transparent;
  33.    border-left: 20px solid #FFFFFF;
  34.    border-bottom: 15px solid transparent;
  35.    z-index: 8;
  36. }
  37.  
  38. <ul class="menu">
  39.    <li>Inicio<span></span><span></span></li><li>Servicio<span></span><span></span></li>
  40. </ul>

Pruebalo:
http://jsfiddle.net/55LE5/

No se ve muy pro pero te servirá como base para que hagas tu menú, a cada li deberias ponerle un display: block y darle una altura fija, unos 20px y de ahi alinear bien el triangulo y darle un float left a cada item y al final terminas con un clear:both debajo del ul y listo.


« Última modificación: 10 Febrero 2014, 17:46 pm por WHK » En línea

kakashi20


Desconectado Desconectado

Mensajes: 435


Ver Perfil
Re: diseño menu
« Respuesta #2 en: 10 Febrero 2014, 17:43 pm »

gracias por la ayuda
En línea

WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: diseño menu
« Respuesta #3 en: 10 Febrero 2014, 17:46 pm »

x nada.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
como lleno los datos que tiene un menu a otro menu vacio, en asp.net c#
.NET (C#, VB.NET, ASP)
ivan05f 2 3,578 Último mensaje 8 Noviembre 2007, 18:58 pm
por ivan05f
Diseño de equipo para diseño tecnico.
Hardware
SuXoR 3 3,664 Último mensaje 20 Octubre 2010, 15:06 pm
por 4rm4ndo
Menu en python con otro menu dentro
Scripting
AdeLax 2 6,614 Último mensaje 7 Octubre 2012, 21:46 pm
por AdeLax
Restaura el menú inicio en Windows 8 con Start Menu Reviver
Noticias
wolfbcn 0 2,075 Último mensaje 19 Mayo 2013, 13:38 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines