Menu DropDown Jquery

Felipe Paz · 21 de janeiro de 2017

E aí gurizada, beleza? To aprendendo ainda jquery e nos meus estudos com menu dropdown me veio uma dúvida. No css eu escondi o li do submenu, mas não o ul, como deixar tudo escondido e aparecer apenas quando passar o mouse por cima do link. No código abaixo tem um html que eu fiz básico apenas para testar. Vocês olhando e testando ele vão entender melhor.

<html>
<head>
    <script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('li').hover(function(){
                $(this).find('ul>li').stop().fadeToggle(400);
            });
        });
        
        $(document).ready(function(){
            $(".modal").hide();
            $("#contato").hover(function(){
                $(".modal").fadeToggle();
            });
        });
    </script>
    <title>Testando menu drop Down</title>
    <meta charset="UTF-8" />
    <style type="text/css">
        ul {
            margin:0;
            padding:0;
            background: #ff0000;
            height: 50px;
        }
        
        ul li {
            list-style: none;
            float: left;
            width: 150px;
            line-height: 50px;
            text-align: center;
        }
        
        ul li a {
            text-decoration: none;
            color: #fff;
        }
    
        ul li li {
            display: none;
            background: #ff0000;
            color: #fff;
            transition: background 0.2s linear;
        }
        
        ul li li:hover {
            background: #555;
        }
        
        .modal {
            width: 400px;
            height: 550px;
            background: #e0e0e0;
            border-radius: 5px;
            box-shadow: -4px 3px 1px 4px #000;
            position: absolute;
            top: 0;
            left: 0;
            margin-left: 35%;
            margin-top: 5%;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">Home</a>
            <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
            </ul>
        </li>
        <li><a href="">Serviços</a>
            <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
            </ul>
        </li>
        <li><a href="">Sobre</a></li>
        <li id="contato"><a href="">Contato</a></li>
    </ul>
    <div class="modal"></div>
</body>
<html

DiF · 21 de janeiro de 2017

@Felipe Paz Qual o erro exatamente? se é que é um erro... pois seu código funciona como deveria ser. Só precisei alterar uma pequena coisa no seu modal.

No modal, como ele é de contato, não pode ser com hover. deve ser com click para que ele fique ativo enquanto clicado e esconda quando for clicado novamente

Veja o exemplo funcionando: https://jsfiddle.net/dife/6sjg76xb/

adicionado 0 minutos depois

PS: Não é necessário esconder o UL, pois ele é só o container. o que importa ali é seus filhos LI do submenu

Felipe Paz · 21 de janeiro de 2017

@DiF Na verdade, o modal era apenas experimento. Estava testando os efeitos e como se comportam. O problema de verdade é o menu em si. Pois veja na foto. Fica o retângulo do ul ul aparecendo. Pra contornar isso e desaparecer este ul como eu gostaria, eu repeti o script, ficando assim:

$(document).ready(function(){
	$('li').hover(function(){
    $(this).find('ul').stop().fadeToggle(400);
    $(this).find('li').stop().fadeToggle(400)
    });
});

DiF · 21 de janeiro de 2017

@Felipe Paz Ahhh agora entendi.

Você diz que ficou o background vermelho do segundo UL que é o submenu.

Não precisa fazer da forma que fez. é mais uma linha para se preocupar.

Nesse caso, basta você nomear o seu UL principal para diferenciar do outro UL.

veja bem, você definiu a seguinte regra para o elemento UL

background: #ff0000;
height: 50px;

Lembre que os elementos semelhantes dentro do elemento herdam as regras. Então para contornar isso há duas formas.

1) Diferenciar os dois elementos

2) Reescrever a regra do elemento com o atributo !important

Nesse caso é mais fácil apenas diferenciar

exemplo:

adicione uma class ao primeiro UL com o nome de "menu"

ficando <ul class="menu">

NO CSS na regra do primeiro UL você define assim: ul.menu

ul.menu {
  margin:0;
  padding:0;
  background: #ff0000;
  height: 50px;
}

Assim você diferenciou o primeiro UL que é o menu, e o segundo UL que é o submenu. então a regra de height 50px na cor vermelha só é aplicado no primeiro UL do menu!

E o segundo UL você deixa assim:

No css ul.submenu com regra do margin e do padding apenas

ul.submenu{
  margin:0;
  padding:0;
}

https://jsfiddle.net/dife/6sjg76xb/2/

Acho que agora deve aparecer do jeito que você quer.

adicionado 15 minutos depois

PS: Sempre normalize suas regras CSS, repare ali no JSFiddle que no campo do CSS tem a opção de normalize. Isso é o CSS Reset. Se usar, verá que você não precisará fazer algumas regras como mencionei ali acima.

desta forma: https://jsfiddle.net/dife/6sjg76xb/3/

Nesse caso, eu retirei a class submenu, as regras de padding e margin de ambos UL..

Porque o CSS reset fez o serviço.

Felipe Paz · 22 de janeiro de 2017

@DiF , fiz a alteração que você sugeriu. Na verdade, apenas acrescentei uma classe no primeiro ul e deixei o ('ul>li') no script e funcionou perfeitamente. Como sempre você me ajudando Dif, valeu novamente!!!