diseño menu

Citar

Escrito el 10 Feb 2014 04:21 pm

hola

quisiera saber como podria hacer este tipo de menu..

https://launidad.co/menu.JPG

algún consejo o idea ?

gracias

Por kakashi20

43 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 10 Feb 2014 06:54 pm

Código CSS :

div{
    width: 100px;
    height: 20px;
    background: #F00;
    position: relative;
}
div:after{
    content: '';
    position: absolute;
    top:0;
    right:-20px;
    border-left: 20px solid #F00;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 10 Feb 2014 07:36 pm

nasho escribió:

Código CSS :

div{
    width: 100px;
    height: 20px;
    background: #F00;
    position: relative;
}
div:after{
    content: '';
    position: absolute;
    top:0;
    right:-20px;
    border-left: 20px solid #F00;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

Eso afecta a todos los div... no lo veo muy adecuado, hagamos un ejemplo completo

Código CSS :

nav ul{ list-style: none; }
nav a{
    width: 100px;
    height: 20px;
    background: #F00;
    position: relative;
   display: block;
   margin-bottom: 2px;
   text-decoration: none;
   color: #FFF;
   text-align: center;
}
nav a:after{
    content: '';
    position: absolute;
    top:0;
    right:-20px;
    border-left: 20px solid #F00;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

Y ahora

Código HTML :

<nav>
<ul>
    <li><a href="#">xd</a></li>
    <li><a href="#">xd</a></li>
    <li><a href="#">xd</a></li>
    <li><a href="#">xd</a></li>
</ul>
</nav>

Sólo recuerda que si le pones un id al nav, entonces en el css tienes que cambiar por el id que asignaste.

Ahora si es por css, sólo queda el dilema de que si haces un float: left no parece acomodarse como tu esperabas. Espero haberte ayudado en algo.

Saludos.

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Bastard Operators From Hell