-1

Olá! Criei um menu com submenus que ao clicar sobre ele, este aparece. Ao clicar fora, ele esconde, assim como clicar nele novamente. Clicando em outros menus, o submenu também some. Gostaria de compartilhar o código aqui, pois muita gente tem este problema e quer usar javascript sem frameworks. Também estou compartilhando para que sejam feitas críticas, pois sou programador iniciante. Comecei a programar há mais ou menos três meses. Origado!

As funções mostra serão usadas como onclick na própria <li> que contém uma <ul>. As funções esconde serão todas usadas como onclick no <body>.

Desculpe-me a enrolação.

function mostra1() {
  if (document.getElementById("submenu2").style.display == "table") {
    document.getElementById("submenu2").style.display = "none";
  }

  if (document.getElementById("submenu3").style.display == "table") {
    document.getElementById("submenu3").style.display = "none";
  }

  if (document.getElementById("submenu4").style.display == "table") {
    document.getElementById("submenu4").style.display = "none";
  }


  if (document.getElementById("submenu1").style.display == "table") {
    document.getElementById("submenu1").style.display = "none"
    return;
  }

  document.getElementById("submenu1").style.display = "table";
}

function mostra2() {
  if (document.getElementById("submenu1").style.display == "table") {
    document.getElementById("submenu1").style.display = "none";
  }

  if (document.getElementById("submenu3").style.display == "table") {
    document.getElementById("submenu3").style.display = "none";
  }

  if (document.getElementById("submenu4").style.display == "table") {
    document.getElementById("submenu4").style.display = "none";
  }


  if (document.getElementById("submenu2").style.display == "table") {
    document.getElementById("submenu2").style.display = "none"
    return;
  }
  document.getElementById("submenu2").style.display = "table";
}

function mostra3() {
  if (document.getElementById("submenu1").style.display == "table") {
    document.getElementById("submenu1").style.display = "none";
  }

  if (document.getElementById("submenu2").style.display == "table") {
    document.getElementById("submenu2").style.display = "none";
  }

  if (document.getElementById("submenu4").style.display == "table") {
    document.getElementById("submenu4").style.display = "none";
  }


  if (document.getElementById("submenu3").style.display == "table") {
    document.getElementById("submenu3").style.display = "none"
    return;
  }
  document.getElementById("submenu3").style.display = "table";
}

function mostra4() {
  if (document.getElementById("submenu1").style.display == "table") {
    document.getElementById("submenu1").style.display = "none";
  }

  if (document.getElementById("submenu2").style.display == "table") {
    document.getElementById("submenu2").style.display = "none";
  }

  if (document.getElementById("submenu3").style.display == "table") {
    document.getElementById("submenu3").style.display = "none";
  }


  if (document.getElementById("submenu4").style.display == "table") {
    document.getElementById("submenu4").style.display = "none"
    return;
  }
  document.getElementById("submenu4").style.display = "table";
}


i1 = 0;

function esconde1() {
  if ((document.getElementById("submenu1").style.display == "table") && (i1 ==
      1)) {
    document.getElementById("submenu1").style.display = "none";

  }
  i1 = 0;

  if ((document.getElementById("submenu1").style.display == "table") && (i1 ==
      0)) {
    i1 = 1;
  }
}


i2 = 0;

function esconde2() {
  if ((document.getElementById("submenu2").style.display == "table") && (i2 ==
      1)) {
    document.getElementById("submenu2").style.display = "none";

  }
  i2 = 0;

  if ((document.getElementById("submenu2").style.display == "table") && (i2 ==
      0)) {
    i2 = 1;
  }
}


i3 = 0;

function esconde3() {
  if ((document.getElementById("submenu3").style.display == "table") && (i3 ==
      1)) {
    document.getElementById("submenu3").style.display = "none";

  }
  i3 = 0;

  if ((document.getElementById("submenu3").style.display == "table") && (i3 ==
      0)) {
    i3 = 1;
  }
}


i4 = 0;

function esconde4() {
  if ((document.getElementById("submenu4").style.display == "table") && (i4 ==
      1)) {
    document.getElementById("submenu4").style.display = "none";

  }
  i4 = 0;

  if ((document.getElementById("submenu4").style.display == "table") && (i4 ==
      0)) {
    i4 = 1;
  }
}

3
  • Wec0n podes juntar o HTML à pergunta? Assim dá para correr o código aqui.
    – Sergio
    Commented 14/09/2017 às 6:24
  • Isso não é uma pergunta ou dificuldade, portanto acho que fora do escopo
    – user60252
    Commented 14/09/2017 às 12:29
  • no stackoverflow também pode responder suas proprias perguntas, isso não é uma pergunta, mas não acho que está fora do escopo
    – isaque
    Commented 14/09/2017 às 15:51

4 Respostas 4

0

Bom dia, entendo a vontade de não depender de frameworks, mas saiba que hoje em dia não há como criar tudo do zero, pois é leva muito tempo e para uma empresa é muito caro "re-inventar a roda".

Sugiro que não lute contra grandes frameworks, ou seja frameworks que tem uma grande comunidade de usários, para a sua pergunta a sugestão é que você use o bootstrap pois já tem esse menu pronto e assim você pode usa seu tempo em outras funcionalidades.

https://getbootstrap.com/docs/4.0/components/navbar/

ate mais

2
  • Não é recomendado usar bootstrap na versão 4, está em beta ainda. A versão final é getbootstrap.com.br/components. Commented 14/09/2017 às 15:50
  • A versão 4 já foi lançada a final. Mas pode ser qualquer versão utilizando ele fica mais fácil. Ou outro framework de estilo, material ou qualquer outro. Commented 15/09/2017 às 22:32
0

Wec0n, nas suas funções de mostrar e esconder você está fazendo a verificação de vários elementos ao mesmo tempo, essas verificações não vão funcionar caso esses atributos estejam setados pelo CSS.

Você pode fazer isso de uma forma mais prática conforme esse exemplo abaixo.

Para facilitar o entendimento criei duas funções específicas mostrar e esconder os sub-menus.

Nessas funções basta passar o id da sub-lista que quer mostrar ao clicar em cada elemento como argumento assim como deve ser escondido quando o mouse sair do menu.

Coloquei o evento de esconder o menu com o onmouseleave porque assim você não precisa selecionar esse menu novamente caso queira que ele seja escondido ao clicar em outro menu.

Segue exemplo:

function mostraSub(sub){
  subfilho = document.getElementById(sub);
  subfilho.style.display = 'block';
}

function escondeSub(sub){
  subfilho = document.getElementById(sub);
  subfilho.style.display = 'none'; 
}
*{
  margin: 0;
  padding: 0;
}
    
.sub {
  display: none;
  position: absolute;
}

ul {
  list-style: none;
}

.principal{
  background-color: grey;
  display: inline-block;
  cursor: pointer;
  padding: 10px;
}

.sub li {
  display: block;
  background-color: grey;
  padding: 10px;
}
<ul>
  <li class="principal" onclick="mostraSub('sub1')" onmouseleave="escondeSub('sub1')">Menu 1
    <ul class="sub" id="sub1">
      <li>Sub 1</li>
      <li>Sub 1</li>
      <li>Sub 1</li>
      <li>Sub 1</li>
    </ul>
  </li>
  <li class="principal" onclick="mostraSub('sub2')" onmouseleave="escondeSub('sub2')">Menu 2
    <ul class="sub" id="sub2">
      <li>Sub 2</li>
      <li>Sub 2</li>
      <li>Sub 2</li>
      <li>Sub 2</li>
    </ul>
  </li>
  <li class="principal" onclick="mostraSub('sub3')" onmouseleave="escondeSub('sub3')">Menu 3
    <ul class="sub" id="sub3">
      <li>Sub 3</li>
      <li>Sub 3</li>
      <li>Sub 3</li>
      <li>Sub 3</li>
    </ul>
  </li>
</ul>

0

Este aqui funciona quando o passa o mouse em cima, soque sem JS, só CSS:

<style>
.menu
{
list-style-type:none;
margin: 0;
padding: 0;
width: 100%;
color:white;
background-color:black;
cursor:pointer;
vertical-align:middle;
}

.menu li
{
float:left;
width:100px;
background-color:black;
height:42px;
line-height:42px;
text-align:center;
font-family:sans-serif;
-webkit-transition:all .5s;
-khtml-transition: all .5s;
-moz-transition: all .5s;
-ms-transition:all .5s;
}
.menu li:hover
{
opacity:0.8;
}

.submenu
{
 display: block;
        list-style: none;
    align-items: center;
    vertical-align:middle;
    width: 0px;
    height: 42px;
    line-height: 42px;
    background-color: transparent;
    display: none;
    cursor: pointer;
}

.submenu li
{
width: 100px;
height:40px;
background-color:black;
text-decoration: none;
padding: 0px;
float: left;
text-align: center;
margin-left: -40px;
}

.menu li:hover ul
{
    display: block;
    margin: none;
}


</style>
<ul class="menu">
  <li>Menu1
  <ul class="submenu"><li>SubMenu1</li></ul>
  </li>
  <li>Menu2
  <ul class="submenu"><li>SubMenu1</li></ul>
  </li>
  <li>Menu3
  <ul class="submenu"><li>SubMenu3</li></ul>
  </li>
</ul>

0

Eu não luto contra frameworks, apenas não gosto de usá-los. Muito obrigado pela ajuda. Eu programo há pouco tempo e ainda não peguei a "manha". Programo apenas como hobby, não irei trabalhar na área. Muito obrigado a todos.

1
  • alguma resposta ajudou você a resolver o problema? Se sim marque ela conforme essa imagem mostra: i.sstatic.net/uqJeW.png Após isso exclua sua resposta pois área de respostas é destinada apenas para possíveis soluções do problema apresentado. Você pode colocar o conteúdo dessa resposta como comentário. Commented 15/09/2017 às 4:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .