0

Im setting up a onclick dropdown navigation bar for the mobile part of my website, The problem im having is when it takes a double click in order for it to drop down. The result I want is for it to drop down on the first click.

The only thing I've tried so far is a Javascript function that I will show in my code.

function myFunction() {
  var x = document.getElementById("submenu1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
    }

function myFunction_2() {
  var y = document.getElementById("submenu2");
  if (y.style.display === "none") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
  }
}
.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  list-style: none;
}

.main-nav li {
  text-align: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid white;
}

#submenu1 .submenu1-li:first-of-type {
  border-top: 1px solid white;
}

.main-nav a {
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  background-color: #000;
  padding: 5% 0%;
}

.submenu1-li {
  position: absolute;
  top: 0px;
}

#submenu1 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.submenu2-li {
  position: absolute;
  top: 0px;
}

#submenu2 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu2 .submenu2-li:first-of-type {
  border-top: 1px solid white;
}

#active {
  background-color: #ffffff;
  color: #000000;
  height: 100%;
}

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}
<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>
            <ul id="submenu1">
              <li class="submenu1-li">
                <a id="active" href="home.html">Home</a>
              </li>
              <li class="submenu1-li">
                <a href="about.html">About</a>
              </li>
              <li id="desktop-contact-move" class="submenu1-li" >
                <a href="contact.html">Contact</a>
              </li>
              <li id="desktop-port-move" class="submenu1-li" style:"order: 1;">
                <a href="javascript:void(0)" onclick="myFunction_2();">Portfolio
                  <span class="arrow">&#x25BC;</span>
                </a>
                <ul id="submenu2">
                  <li class="submenu2-li">
                    <a href="designs.html">Designs</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="websites.html">Websites</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="photography.html">Photography</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

I expect the output to be a dropdown menu that responds on first click. but the output im getting is a dropdown menu that responds on the second click, which is wrong for what I want.

Thanks in advance and blessings to those who help

anees
  • 1,777
  • 3
  • 17
  • 26
PhilLovesHelp
  • 1
  • 1
  • When you need is a "debounce" function. This ignores additional clicks during a timeout. See: https://stackoverflow.com/questions/24004791/can-someone-explain-the-debounce-function-in-javascript – Diodeus - James MacFarlane Jan 31 '19 at 20:24

2 Answers2

1

The reason it's not showing on the first click is that this condition

if (x.style.display === "none")

is false since you've set display: none; in CSS stylesheet. So a really quick way to fix this would be to add display: none; inline:

<ul id="submenu1" style="display:none;">

But a cleaner way would be to use classes to control menu visibility. See the snippet below.

function myFunction() {
  var x = document.getElementById("submenu1");
  x.classList.toggle('hidden');
}
.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  list-style: none;
}

.main-nav li {
  text-align: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid white;
}

#submenu1 .submenu1-li:first-of-type {
  border-top: 1px solid white;
}

.main-nav a {
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  background-color: #000;
  padding: 5% 0%;
}

.submenu1-li {
  position: absolute;
  top: 0px;
}

#submenu1 {
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu1.hidden {
  display: none;
}

.submenu2-li {
  position: absolute;
  top: 0px;
}

#submenu2 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu2 .submenu2-li:first-of-type {
  border-top: 1px solid white;
}

#active {
  background-color: #ffffff;
  color: #000000;
  height: 100%;
}

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}
<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>
            <ul id="submenu1" class="hidden">
              <li class="submenu1-li">
                <a id="active" href="home.html">Home</a>
              </li>
              <li class="submenu1-li">
                <a href="about.html">About</a>
              </li>
              <li id="desktop-contact-move" class="submenu1-li" >
                <a href="contact.html">Contact</a>
              </li>
              <li id="desktop-port-move" class="submenu1-li" style:"order: 1;">
                <a href="javascript:void(0)" onclick="myFunction_2();">Portfolio
                  <span class="arrow">&#x25BC;</span>
                </a>
                <ul id="submenu2">
                  <li class="submenu2-li">
                    <a href="designs.html">Designs</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="websites.html">Websites</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="photography.html">Photography</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
abadalyan
  • 1,205
  • 8
  • 13
0

Ok so here the problem is that the x.style.display returns blank string because that property is defined in stylesheet.

1st solution is to use inline css

2nd is apply another check for blank string like this.

function myFunction() {
  var x = document.getElementById("submenu1");
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
    }

function myFunction_2() {
  var y = document.getElementById("submenu2");
  if (y.style.display === "none" || y.style.display === "") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
  }
}
.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  list-style: none;
}

.main-nav li {
  text-align: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid white;
}

#submenu1 .submenu1-li:first-of-type {
  border-top: 1px solid white;
}

.main-nav a {
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  background-color: #000;
  padding: 5% 0%;
}

.submenu1-li {
  position: absolute;
  top: 0px;
}

#submenu1 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.submenu2-li {
  position: absolute;
  top: 0px;
}

#submenu2 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu2 .submenu2-li:first-of-type {
  border-top: 1px solid white;
}

#active {
  background-color: #ffffff;
  color: #000000;
  height: 100%;
}

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}
<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>
            <ul id="submenu1">
              <li class="submenu1-li">
                <a id="active" href="home.html">Home</a>
              </li>
              <li class="submenu1-li">
                <a href="about.html">About</a>
              </li>
              <li id="desktop-contact-move" class="submenu1-li" >
                <a href="contact.html">Contact</a>
              </li>
              <li id="desktop-port-move" class="submenu1-li" style:"order: 1;">
                <a href="javascript:void(0)" onclick="myFunction_2();">Portfolio
                  <span class="arrow">&#x25BC;</span>
                </a>
                <ul id="submenu2">
                  <li class="submenu2-li">
                    <a href="designs.html">Designs</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="websites.html">Websites</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="photography.html">Photography</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

More information about the problem at : Fixing the Mobile Double-Click Link Issue

anees
  • 1,777
  • 3
  • 17
  • 26