I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links.

When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.

What I want to acplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.

HTML

<!-- original code -->
<ul id="nav">
    <li>Home</li>
    <li class="parent">About
        <ul class="sub-nav">
            <li>Johnny</li>
            <li>Julie</li>
            <li>Jamie</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

<!-- my code -->
<div class="header-nav">
  <nav class="nav-menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li> 
    </ul>
  </nav>

  <a href="#" id="menu-icon"></a>
</div>

JS

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav').toggleClass('visible');
    });
});

// rename the JS to use the id/class for my script

The JSfiddle is here /

I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links.

When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.

What I want to acplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.

HTML

<!-- original code -->
<ul id="nav">
    <li>Home</li>
    <li class="parent">About
        <ul class="sub-nav">
            <li>Johnny</li>
            <li>Julie</li>
            <li>Jamie</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

<!-- my code -->
<div class="header-nav">
  <nav class="nav-menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li> 
    </ul>
  </nav>

  <a href="#" id="menu-icon"></a>
</div>

JS

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav').toggleClass('visible');
    });
});

// rename the JS to use the id/class for my script

The JSfiddle is here https://jsfiddle/cRsZE/982/

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 19, 2015 at 15:08 user1052448 asked Aug 19, 2015 at 15:00 user1052448user1052448 43333 gold badges66 silver badges2020 bronze badges 2

• Would be nice to explain why this was down-voted – user1052448 Commented Aug 19, 2015 at 15:10
• 2 jsfiddle/neuroflux/cRsZE/985 - probably downvoted because people on here are unforgiving :/ – Barrie Reader Commented Aug 19, 2015 at 15:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You have to update the click event in your jQuery to work for clicking the menu icon. This works:

$(document).ready(function() {
    $('#menu-icon').click(function() {
        $('.nav-menu ul').toggleClass('visible');
    });
});

Edit As requested via the ments, to have the menu appear below the menu icon all you have to do is reposition the menu icon to be above the ul like so:

<div class="header-nav">
  <a href="#" id="menu-icon"></a>
  <nav class="nav-menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li> 
    </ul>
  </nav>
</div>

And working Fiddle

Need To update Code Like That :

 $(document).ready(function() {
$('#menu-icon').click(function() { 
$('.nav-menu ul').toggleClass('visible');
});
});

For Documentation :https://jqueryui./menu/

Cleaned up code a little. Like this?

https://jsfiddle/cshanno/cRsZE/990/

$(document).ready(function () {
    $('#menu-icon').click(function () {
        $('.sub-nav').toggleClass('visible');
    });
});