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

CSS

Matthew Barnes
PLUS
Matthew Barnes
Courses Plus Student 16,550 Points
Posted by Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points

Smoother Burger Menu Transition

Hi Guys,

I have a burger menu for mobile screens, and I'm using Jquery to toggle a class changing the height. Here is my code:

HTML: 

     <a class="btn-menu" href="#"><span>MENU</span></a>
        <div class="nav hide">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Media</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

Sass: 

/*========================
 Base Styles
 ========================*/

.hide {
height: 0;
overflow: hidden;
}

.show {
height: 100%;
}

/*========================
Navigation
========================*/

.header {
background-color: $background;
.logo {
    margin-top: 5px;
    display: inline-block; 
    img {
        margin-left: 5px;
        width: 200px;
        height: 65px;
    }
}
.nav {
    ul {
        padding: 0;
        padding-bottom: 10px;
        li {
            list-style-type: none;
            text-align: center;
            padding: 7px;
            background-color: $orange;
            border-radius: 10px;
            box-shadow: 2px 3px 5px black;
            margin: 8px auto;
            width: 80%;
        }
        a {
            text-decoration: none;
            color: $blue;
            font-size: 1.2em;
            font-weight: 500;
            display: block;
            width: 100%;
        }
    }
}
}

jQuery:

<script> $(".btn-menu").click(function(){ $(this).toggleClass("btn-menu-open"); $(".nav").toggleClass("show"); }); </script>

This works, however I was hoping to use a transition to make the change of width smoother over 2s. Any help will be much appreciated!

Thanks in advance!

Matt

2 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Since you already have JQuery, try this: in the HTML remove the "hide" class from the div, and in the JavaScript replace toggleClass("show") with slideToggle(2000).

Personally, I think 2 seconds (2000 ms) is a bit long.

Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points
Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points

2 Seconds was a bit long, changed to 1s. This is exactly what I'm looking for however, I need the code to hide the menu on load and show the menu on click? This solution shows the menu on load and then when I click the button hides the menu... ideally I need this to be reversed?

Thanks for your help!

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

:point_right: No problem. Just add this line to the bottom of your JavaScript to make it hidden initially:

$(".nav").hide();

:information_source: FYI: You can use the string "slow" as the argument to slideToggle() for a peppier but smooth 800 ms.

Erik Schultz
Erik Schultz
16,232 Points
Erik Schultz
Erik Schultz
16,232 Points

jQuery('a.btn-menu').on('click', function(event) { event.preventDefault(); jQuery('.nav').slideToggle(200); });

You can leave .hide on your nav this way.

Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points
Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points

Thanks both for your help! In the end I read the jQuery documentation for slideToggle() and set the .nav to "display: none" in the css, this is the desired effect needed.

The $(".nav").hide(); also worked, however there was a split second I could see the menu on load before the browser got to the javascript and hid the menu.

Thanks again for your help!