Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stephanie Roberts
Stephanie Roberts
16,757 Points

I am new to Javascript and I am currently using MooTools framework.

I am creating a toggle nav for a website. Could anyone give me any tips on how to style this in css? How do I make the navbar li disappear and show again.

window.addEvent('domready', function(){

$(document.body).addEvent('click:relay(.nav-toggle)', function(event, target){

    if(event) event.stop(); 
    target.toggleClass('show');

});

});

Stephanie Roberts
Stephanie Roberts
16,757 Points

``` <button class="nav-toggle">

    <span> </span>
    <span> </span>
    <span> </span>

</button>   

<nav class="navbar" role="navigation">

    <ul>

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">What we do</a></li>

        <li><a href="#">Products</a></li>

        <li><a href="#">News</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</nav>

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi Stephanie,

Try adding the class of nav-toggle to a new div just above your unordered list which will server as your button to toggle the navigation.

You could then try adding a class of show to your unordered list.

All this of course making sure jQuery and your JavaScript file is properly linked in your HTML 

<div class="nav-toggle"><!-- content for button or hamburger menu --> </div>
<nav class="navbar" role="navigation">

    <ul>

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">What we do</a></li>

        <li><a href="#">Products</a></li>

        <li><a href="#">News</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</nav>