hola
quisiera saber como podria hacer este tipo de menu..
https://launidad.co/menu.JPG (https://launidad.co/menu.JPG)
algún consejo o idea ?
gracias
sabes programar? tienes algo hecho?
Acá hay uno básico sin las puntas triangulares:
<style>
.menu > li{
display: inline;
list-style-type: none;
border: 1px solid #FFFFFF;
background-color: #FF0000;
color: #FFFFFF;
padding: 5px 15px;
margin: 0;
}
</style>
<ul class="menu">
<li>Inicio</li><li>Servicio</li>
</ul>
Acá hice uno con las puntas triangulares:
<style>
.menu > li{
display: inline;
list-style-type: none;
border: 1px solid #FFFFFF;
background-color: #FF0000;
color: #FFFFFF;
padding: 5px 8px 5px 27px;
margin: 0;
position: relative;
margin-right: 2px;
}
.menu > li:first-child{
padding: 5px 15px;
}
.menu > li > span:first-child{
position: absolute;
top: 0;
right: -20px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-left: 20px solid #FF0000;
border-bottom: 15px solid transparent;
z-index: 9;
}
.menu > li > span:last-child{
position: absolute;
top: 0;
right: -22px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-left: 20px solid #FFFFFF;
border-bottom: 15px solid transparent;
z-index: 8;
}
</style>
<ul class="menu">
<li>Inicio<span></span><span></span></li><li>Servicio<span></span><span></span></li>
</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.
gracias por la ayuda
x nada.