CODEWITHSUNDEEP
javascriptjquerycssmobile
Ris
Ris

Reputation: 1912

problems with nav in mobile view

I am trying to have an icon that is going to show up in my mobile veiw where you can click show and hide the menu, right now my code doesnt work, it does not open at all

my problem is trying to figure out id's and inputs here

not sure what I am doing wrong, could someone point me to the right direction please ? Thanks in advance

//this is what I have

<nav class="navMenu">
<input id="menu-icon" type="checkbox">
<label id="menu-icon" class="iconMenuLbl" for="menu-icon"></label>
<ul>

    <li>
        <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a>
    </li>
    <li>
        <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a>
    </li>
    <li>
        <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a>
    </li>
    <li id="loggedin-box" class="">
        <form method="POST" action="login">
        <div>
            <strong>some name</strong>
        </div>
        <button style="padding:0px;" name="logout" type="submit">
        <img class="navImg" src="media/Sign-Out.png">
        </button>
        </form>
    </li>
</ul>
</nav>

//js file

$(function() {
  var menuVisible = false;
  $('#menu-icon').click(function() {
    if (menuVisible) {
      $('.navMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('.navMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('.navMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

Upvotes: 0

Views: 46

Answers (1)

Spencer Rohan
Spencer Rohan

Reputation: 1939

You have two ids sharing the same name. 'menu-icon' try changing one of the ids to another name. IDs should be unique. -- ALSO move your input field out of the nav tag.

Upvotes: 3

Related Questions