CODEWITHSUNDEEP
javascripthtmlcss
rustinpeace91
rustinpeace91

Reputation: 109

My javascript mobile menu only opens when double clicked.

I'm making a website for my friend using just HTML/CSS3 and Vanilla JS. Everything seems to be going OK but I can't figure out why my mobile menu only opens when I click it twice. It only does this the first time I try clicking it after refreshing the page. Once it's open I can open and close it again with one click.

Here is the relevant HTML 

            <header id = "top-menu">
            <img id = "title-image" class = "desktop-site" src = "images/ben-the-mover-guy.png">
            <img id = "mobile-title-image" class = "mobile-site" src = "images/mobile-title-white.png">
            <h1 id = "title-text">Ben the Mover Guy</h1>
            <a id = "mobile-icon" href = "javascript:void(0);" onClick = "dropDown()"><i id = "mobile-icon-id" class = "ion-navicon-round"></i></a>
            <nav id = "icon-nav" class = "desktop-site">
                <a href = "#"><i class = "ion-social-facebook"></i></a>
                <a href = "#"><i class = "ion-android-mail"></i></a>
                <a href = "#"><i class = "ion-ios-calculator"></i></a>
            </nav>
            <nav id = "main-nav" class = "horizontal-nav desktop-site">
                <span class = "selected"><a href = "#" class = "nav-link">ABOUT</a></span>
                <a href = "#" class = "nav-link">RATES</a>
                <a href = "#" id = "link-break" class = "nav-link"> <span class = "link-break-line">PREPARING FOR</span> YOUR MOVE</a>
                <a href = "#" class = "nav-link">CONTACT</a>
            </nav>
        </header>

and Javascript 

function dropDown() {
var x = document.getElementById("main-nav");
var y = document.getElementById("mobile-icon-id");

if (x.className === "horizontal-nav") {
    x.className = "mobile-nav";
    y.className = "ion-close-round"
} else {
    x.className = "horizontal-nav";
    y.className = "ion-navicon-round"
}
}

The issue is definitely not the CSS. After hitting up Inspect Element I noticed that it's not changing the class name to "mobile-nav" until the second click, so it's an issue with the JS.

I did a mock website a while ago where I used similar code and I didn't have this problem. The only difference was that I used a div with a unordered list for the nav links instead of the '' tag. That wouldn't have anything to do with it would it?

Upvotes: 0

Views: 999

Answers (2)

Nitin Walia
Nitin Walia

Reputation: 423

change your js function to this and it will work..

function dropDown() {
  var x = document.getElementById("main-nav");
  var y = document.getElementById("mobile-icon-id");
  if (x.classList.contains("horizontal-nav")) {
      x.className = "mobile-nav";
      y.className = "ion-close-round"
  } else {
      x.className = "horizontal-nav";
      y.className = "ion-navicon-round"
  }
}

Upvotes: 1

furkle
furkle

Reputation: 5059

The reason this is occurring is because you're checking the className attribute, which contains all classes of the element. The first time it's being checked, the value is not horizontal-nav -- it's horizontal-nav desktop-site, which causes the code in the else block to fire. The second time around, it is horizontal-nav, so it works correctly.

Use x.classList.contains("horizontal-nav"), or build/use a method to check whether className contains horizontal-nav rather than is horizontal-nav. jQuery's hasClass works perfectly for this, if you need to support older browsers.

Upvotes: 2

Related Questions