[Resolvido] menu locaweb

[mv.silvapereira 0]

Amigos alguém pode me dar um help de como fazer um menu igual o do site da locaweb??

[William Bruno 1501]

oi @mv.silvapereira,

 

posso te ajudar sim. Na verdade, eu que fiz o menu do site atual da Locaweb.

Qual a sua dificuldade ?

[Diéssica 140]

Mega dropdown menu (ou dropdown column)

:seta: http://designm.ag/inspiration/mega-menus/

:seta: http://ginva.com/2011/04/108-free-css-menu-designs/

:seta: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

[André do Vale 76]

Ou o próprio código-fonte do site. Copyright William Bruno. :yay:

[jefersonperrot 0]

Olá Galera! Aproveitando a pergunta do camarada, preciso de uma ajuda...

 

Tenho o seguinte código ref. a um menu dropdown:

$(document).ready(function() {
   $("ul li ul").hide();
   $("ul li").hover(function() {
       $(this).find("ul:first").slideDown("fast");
   }, function(){
       $(this).find("ul:first").slideUp("fast");
   });
});

Funciona ok, mas não consigo fazer com que o menu selecionado (que faz aparecer a outra ul) fique em destaque, isto é não perca a seleção.

 

É possível vocês me ajudarem??

 

Tks!

[Wanderson Valerio 102]

Copyright 2012 | Locaweb menu - William Bruno

[André do Vale 76]

É possível vocês me ajudarem??

 

Bom, ao invés de .hide() no jQ, utilize display: none no CSS.

 

$(function(){
 $('ul li').hover(function(){
   $('ul:first',this).slideToggle('fast')
 })
})

 

No CSS, esse ul li:hover você aplica o efeito que quiser nele. Por exemplo:

 

ul li:hover { /*ou: ul li:hover a { */
 background: pink;
}

[jefersonperrot 0]

Fala André! Boa tarde!!

 

Entendi o que você disse e deu certo, porém precisava de mais uma ajuda :D

Sei que to pedindo demais... mais.......

 

Seguinte, peço que de uma olhada no código para que fique mais fácil http://jsfiddle.net/jefersonperrot/KLrvK/

 

Gostaria que o li (item 1, item 2, etc...) ficasse destacado sabe...

 

Se for dar mto trampo, relaxa...

 

Desde já muito obrigada ajuda!!

[André do Vale 76]

Troca o trecho lá do hover do A:

 

#menu>ul>li:hover>a,
#menu li a:hover {
   text-decoration:none;
   background:#00468C;
   color:#FC0;
}

[jefersonperrot 0]

Fala André

 

Deu certo!! Obrigado mesmo!

 

:D

[mv.silvapereira 0]

William Bruno minha dificuldade é conseguir aquele efeito de menu ativo quando estou com o mouse nos sub-itens e também em como deixar essa borda em volta do menu e do sub-menu deixando eles unidos.. quando tento no meu usando o "border" não consigo deixar esse efeito como se eles estivesse juntos. Espero que tenha consigo explicar a minha dificuldade.. Obrigado..

[William Bruno 1501]

aquele efeito de menu ativo quando estou com o mouse

isso é simples, veja meu html:

			<ul>
			<li class="first">
				<span class="menu-item">Produtos</span>

ao dar o :hover no li, eu mudo o bg desse span.

 

#header .nav li:hover .menu-item { 
background: #fff; color: #4d4d4d;
border: 1px solid #676767; border-bottom: none;
margin: 0; 
}

 

 

como deixar essa borda em volta do menu e do sub-menu deixando eles unidos..

esse efeito de deixar eles "unidos" eu consegui compensando com um número negativo, fazendo com oque o span que faz o item "Produtos" ficar com o background branco, ficasse por cima do pedaço da borda do UL.

 

Esse 1px q deixa o span por cima do UL, faz "sumir" aquele pedaço da borda, e deixa a impressão de "unidos".

Tanto que se você alterar:

#header .menu { top: 31px; }

você verá a borda, como uso 30px, eu escondo com o span.