Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Argos

Menu horizontal com separadores na diagonal

Por , em Desenvolvimento frontend

Recommended Posts

Argos    0

Argos
Postado

Boa noite a todos;

 

Estou com uma dúvida que me parece extremamente boba, mas enfim..

Preciso montar um menu como este:

 

nav.png

 

Não gostaria de usar flash nem svg. Seria possível em CSS? Pretendo dar um efeito quando o mouse estiver sobre uma das opções, e obviamente o efeito teria que preencher todo o respectivo espaço. Isso me impossibilitou de utilizar imagens no lugar dos separadores.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Impacto    15

Rafael Impacto
Postado

Olá,

 

Como todos os itens tem o mesmo tamanho vc pode utilizar duas imagens como bg e como ação de houver, utilize .png transparente que vai conseguir encaixar numa boa

Compartilhar este post

Link para o post
Compartilhar em outros sites

Argos    0

Argos
Postado

Ruan, preciso fazer o menu todo, o css para criar o efeito hover não é problema. O problema é reproduzir um trapézio no primeiro e ultimo nó da lista e nos nós intermediários um paralelogramo.

Rafael, como disse acima, três itens tem o mesmo formato e tamanho, mas dois (os dois dos cantos) não. Realmente vou utilizar duas imagens, uma p/ o background (um gradiente vertical) e uma ':hover' que inverterá esse gradiente. Não haveria qualquer dificuldade caso os cinco itens de lista do menu tivessem o fundo retangular, mas preciso "incliná-los"...

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricardo_mc    19

ricardo_mc
Postado

Argos,

 

Não tem problema se os itens da ponta tem tamanho diferente. Use a mesma imagem de background em todos. Os do centro vão ficar corretos.

 

Quanto aos da ponta, adicione uma classe a cada um (ou selecione via jQuery) e altere a width deles, para o tamanho que tem que ser. Depois mante alinhar o background nas laterais, que naturalmente o CSS vai cortar a outra ponta.

 

Segue o modelo:

*{margin:0;padding:0;font-family:Verdana;}
ul{background:#FFF;float:left;list-style:none;padding-left:37px;margin:20px;border:1px solid #000;}
li{float:left;width:233px;text-align:center;background:url(nav.png) 0 0 no-repeat;margin-left:-37px;padding:11px 0;}
li:hover{background-position:0 -45px;}
li.first{width:193px;background-position:-40px 0;}
li.first:hover{background-position:-40px -45px;}
li.last{width:193px;}
<ul>
    <li class="first">Primeiro</li>
    <li>Segundo</li>
    <li>Terceiro</li>
    <li>Quarto</li>
    <li class="last">Quinto</li>
</ul>

 

 

Veja um exemplo: http://unlock.com.br/teste/menu-diferente/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dian Carlos    29

Dian Carlos
Postado

Man.. eu fiz um menu desse com CSS3. Olha aqui http://arcoinformatica.com.br/dian/1t@81r@garotadomes/

 

De uma olhada nesse artigo http://w3schools.com/css3/css3_2dtransforms.asp, aqui mostra as transformações CSS que você pode fazer.

 

Lembrando que, isso é CSS3, código puro, então no IE 8 - não funciona..

 

Boa sorte..



Olha esse exemplo que eu acabei de fazer.. http://arcoinformatica.com.br/dian/menu.php

 

CSS puro..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Argos    0

Argos
Postado

Realmente, ótimas respostas! Acredito que qualquer uma das duas servirá. Vou fazer alguns testes reais aqui, e qualquer coisa volto a postar.

 

Agradeço mais uma vez muito a ajuda de todos! O pessoal aqui é fera d+!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Argos    0

Argos
Postado

Me deparei com um problema. Estou impossibilitado de usar esse menu para fazer um menu drop-down, é isso msm? O "overflow:hidden" necessário para esconder os cantos esconde também esconde a nova lista... Terei q usar javascript ou há alguma solução pra isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

 

<!DOCTYPE html>
<head>
<meta charset="iso-8859-1" />
<title>Teste</title>
<style>
* {
border: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.menuDiag {
display: inline-block;
margin: 0 auto;
}
.menuDiag li {
display: inline-block;
float: left;
position: relative;
}
.menuDiag li:not(:last-child) {
border-right: 1px solid #FFF;
}
.menuDiag a {
display: inline-block;
font: 20px/40px "Courier New", Courier, monospace;
color: #FFF;
background: #666;
-webkit-transform: skewX(35deg);
-moz-transform: skewX(35deg);
transform: skew(35deg);
}
.menuDiag a:hover {
background: #000;
}
.menuDiag a span {
display: inline-block;
padding: 0 40px;
-webkit-transform: skewX(-35deg);
-moz-transform: skewX(-35deg);
transform: skew(-35deg);
}
.subMenu {
display: none;
margin-left: 14px;
margin-left: 0\0;
position: absolute;
-webkit-transform: skewX(35deg);
-moz-transform: skewX(35deg);
transform: skew(35deg);
}
.menuDiag li:hover .subMenu {
display: inline-block;
}
.subMenu ul {
display: inline-block;
overflow: hidden;
-webkit-transform: skewX(-35deg);
-moz-transform: skewX(-35deg);
transform: skew(-35deg);
}
.subMenu li {
display: block;
float: none;
}
.subMenu a {
display: block;
text-align: left;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
</style>
</head>
 
<body>
<ul class="menuDiag">
<li><a href="" title="Lorem"><span>Lorem</span></a>
<div>
<ul class="subMenu">
<li><a href="" title="Lorem"><span>Lorem</span></a>
<li><a href="" title="Ipum"><span>Dolor</span></a>
<li><a href="" title="Sit"><span>Sit</span></a>
<li><a href="" title="Amet"><span>Amet</span></a>
<li><a href="" title="Lament"><span>Lament</span></a>
</ul>
</div>
<li><a href="" title="Ipum"><span>Dolor</span></a>
<li><a href="" title="Sit"><span>Sit</span></a>
<li><a href="" title="Amet"><span>Amet</span></a>
<div>
<ul class="subMenu">
<li><a href="" title="Lorem"><span>Lorem</span></a>
<li><a href="" title="Ipum"><span>Dolor</span></a>
<li><a href="" title="Sit"><span>Sit</span></a>
<li><a href="" title="Amet"><span>Amet</span></a>
<li><a href="" title="Lament"><span>Lament</span></a>
</ul>
</div>
<li><a href="" title="Lament"><span>Lament</span></a>
</ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Argos    0

Argos
Postado

Dian, infelizmente isso não resolve o problema, continua não aparecendo. Usando o firebug, basta desabilitar o 'overflow:hidden' encontrada na 'ul' para que apareça, mas nisso os cantos também aparecem.

 

André, agradeço o código, mas ele não é bem oq eu preciso. As duas laterais tem que ser um trapézio ao invés de paralelogramos. Para transformá-los em trapézio, aumentamos o tamanho das lateriais e usamos o 'overflow:hidden' para esconder os cantos que sobram. E esse hidden esconde também a nova lista que deveria aparecer embaixo do menu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricardo_mc    19

ricardo_mc
Postado

Argos,

 

Usando aquele mesmo menu que eu postei, readaptei-o para um menu com DropDown. Na verdade usei um outro DropDown que eu havia criado e uni os dois. Repare que não uso overflow.

 

http://unlock.com.br/teste/menu-diferente/

 

Vê se isso te ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito