Comunidad de diseño web y desarrollo en internet online

diseño menu

Citar            
MensajeEscrito 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



 

chrome
Citar            
MensajeEscrito 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  

Web Developer

chrome
Citar            
MensajeEscrito 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

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 10 Feb 2014 08:10 pm
gracias por la ayuda.. me ha servido muchísimo..

Por kakashi20

43 de clabLevel



 

chrome
Citar            
MensajeEscrito el 10 Feb 2014 10:13 pm
jaja @aoyama... solo lo puse de ejemplo, no para que hiciera copy-paste y ya

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 11 Feb 2014 12:05 am

nasho escribió:

jaja @aoyama... solo lo puse de ejemplo, no para que hiciera copy-paste y ya


Pero lo hiciste sobre un div... pudiendo hacerlo sobre otros elementos más propios U_U Yo sólo complementé el asunto, incluso comenté que lo que hice tiene sus detalles, él debe buscarlos :P

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.