Make submenu appear when clicking the menu using javascript

Question

Make submenu appear when clicking the menu using javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

Hello! I created a menu with submenus that when clicking on it, it appears. By clicking outside, it hides, as well as clicking it again. By clicking on other menus, the submenu will also disappear. I would like to share the code here, as a lot of people have this problem and want to use javascript without frameworks. I am also sharing for criticism, as I am a beginner programmer. I started programming for about three months. Originated!

Show functions will be used as onclick on <li> itself containing <ul> . The hidden functions will all be used as onclick in <body> .

Excuse me for the cursing.

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

asked by anonymous 14.09.2017 / 08:22

4 answers

ASP .NET MVC and JavaScript - Open modal with ID of the selected object in a list Swift_TransportException error while sending e-amil using SMTP + Laravel 5.4

score 0 · Answer 1

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 it is very expensive to "re-invent the wheel."

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

link

even more

score 0 · Answer 2

Wec0n, in your 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 as this example below.

For ease of understanding I have created two specific functions to show and hide the sub-menus.

In these functions, just pass the id of the sub-list you want to display by clicking on each element as an argument as well as hiding it when the mouse exits the menu.

I put the event hide the menu with onmouseleave so you do not have to select this menu again if you want it to be hidden by clicking another menu.

Here's an 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>

score 0 · Answer 3

This one works when you hover the mouse over, so 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>

score 0 · Answer 4

I do not fight frameworks, I just do not like using them. Thanks a lot for the help. I programmed it a short time ago and still did not catch the "morning". I'm only programming as a hobby, I'm not going to work in the area. Many thanks to all.