Make submenu appear by clicking the menu using javascript

Asked

Viewed 1,274 times

-1

Hello! I created a menu with submenus that when clicking on it, it appears. When clicking outside, it hides, as well as clicking on it again. By clicking on other menus, the submenu also disappears. I would like to share the code here, because many people have this problem and want to use javascript without frameworks. I am also sharing so that criticisms are made, because I am a beginner programmer. I started programming about three months ago. Originated!

The display functions will be used as onclick in the <li> containing a <ul>. The hidden functions will all be used as onclick in the <body>.

Sorry for the bullshit.

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;
  }
}

javascript css

  • Can wec0n add HTML to the question? So you can run the code here.

  • This is not a question or difficulty, so I think outside the scope

  • no stackoverflow can also answer your own questions, this is not a question, but do not think it is outside the scope

4 answers

0

I don’t fight frameworks, I just don’t like using them. Thank you very much for the help. I program recently and I still haven’t caught the "morning". I program only as a hobby, I will not work in the area. Thank you all.

  • any answers helped you solve the problem? If yes mark it as this image shows: https://i.stack.Imgur.com/uqJeW.png After that delete your answer as the answer area is only intended for possible solutions of the problem presented. You can put the content of this reply as a comment.

0

Wec0n, in its show and hide functions you are checking multiple elements at the same time, these checks will not work if these attributes are set by CSS.

You can do this in a more practical way according to this example below.

To facilitate understanding created two specific functions show and hide sub-menus.

In these functions just pass the id of the sub-list you want to show by clicking on each element as an argument as well as how it should be hidden when the mouse leaves the menu.

I set the event to hide the menu with the onmouseleave because then you don’t need to select this menu again if you want it to be hidden by clicking on another menu.

Following example:

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

This one works when you hover over it, punch without JS, only 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

Good morning, I understand the desire not to depend on frameworks, but know that nowadays there is no way to create everything from scratch, because it takes a lot of time and for a company is very expensive "re-invent the wheel".

I suggest you do not fight against large frameworks, or frameworks that have a large user community, for your question the suggestion is that you use the bootstrap because you already have this menu ready and so you can use your time in other features.

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

see you around

  • It is not recommended to use bootstrap in version 4, it is in beta yet. The final version is http://getbootstrap.com.br/components/.

  • Version 4 has already been released the final. But it can be any version using it gets easier. Or other style framework, material or any other.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.