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

Joe Consterdine
Joe Consterdine
13,965 Points
Posted by Joe Consterdine
Joe Consterdine
13,965 Points

Transition doesn't work on mobile-menu?

Hey guys,

I've created a mobile-menu and it works fine. The only problem is whenever I try to use transition to ease the slide it doesn't work.

Unfortunately I don't have a valid link to show you as it's all on my local machine.

I'll post the code and hopefully that will help.

P.S. It's built using Opencart if the code is confusing.

Thanks!

            <div class="home-nav-mobile-menu">
            </div>
            <div class="home-nav">
                <ul class="list-inline">
                    <div class="home-nav-mobile-main-links">
                        <li><a href="/">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="<?php echo $contact ?>">Contact</a></li>
                        <li><a href="#">Currency</a></li>
                        <li><a href="#">English</a></li>
                        <li><a href="<?php echo $wishlist ?>">Wishlist</a></li>
                        <li><a href="<?php echo $shopping_cart ?>">Cart</a></li>
                        <li><a href="<?php echo $checkout ?>">Checkout</a></li>
                    </div>
                <?php foreach($categories as $category) { ?>
                        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
                <?php } ?>
                </ul>
            </div>

@media (max-width: $screen-md) {
    .menu-open {
        right: 300px;
        position: relative;
}
}

.home-nav {
    display: none;

    @media(min-width: $screen-md) {
        display: block;
    }
}

@media (max-width: $screen-md) {
    .menu-open .home-nav {
        background: $brand-primary;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        z-index: $zindex-mobile-menu;
        width: 300px;
        display: block;
        padding-top: 4rem;
        transition: right 1s ease;
    }
    .menu-open .home-nav ul {
        margin: 0;
    }

    .menu-open .home-nav ul li {
        display: block;
        text-align: center;
        padding: 1rem 0;
        border-top: 1px solid lighten($brand-primary, 20%);
        border-bottom: 1px solid darken($brand-primary, 20%);
    }

.home-nav ul li a {
    color: #fff;
}
}

.home-nav-mobile-menu-icon, .home-nav-mobile-menu-icon-close {
    display: none;
}

@media (min-width: $screen-md) {
    .home-nav-mobile-menu {
        display: none;
    }
}

@media(max-width: $screen-md) {
    .home-nav-mobile-menu-icon, .home-nav-mobile-menu-icon-close {
        position: fixed;
        top: 1px;
        right: 0;
        display: block;
        z-index: $zindex-very-strong
    }
}

.home-nav-mobile-menu-icon-close {
    display: none;
    z-index: $zindex-strong;
}

 @media (max-width: $screen-md) {
     .home-header-main-menu {
     display: none;
 }
 }

 .home-nav-mobile-main-links {
     display: none;
 }

 @media (max-width: $screen-md) {
     .home-nav-mobile-main-links {
         display: block;
 }
 }

 @media (max-width: $screen-md) {
    .home-nav .home-nav-mobile-main-links li a {
        color: $brand-secondary;
     }
 }

$(document).ready(function(){
    $(".home-nav-mobile-menu").on("click", function(){
        $(".site-wrapper").toggleClass("menu-open");
        $(".home-nav-mobile-menu-icon").toggle();
        $(".home-nav-mobile-menu-icon-close").toggle();
    });
});

1 Answer

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Hi Joe,

The CSS transition property only works when the same property (like "width" or "right") is being set on the same element (like a "div") in 2 different states (whether that's something like "div" and "div:hover", or like "div { }" and "@media (min-width: 600px) { div { } }" and you're manually resizing your browser).

In your code, you're setting a "transition" property on the ".menu-open .home-nav" class, and you're setting a "right" property on it there, but you aren't setting a "right" property on ".menu-open .home-nav" in any other state, so there's no reason for the transition property to ever "transition" that element from one "right" value to another. You're setting a "right" property on ".menu-open", but that's not the same element, that's the parent of the one you have a transition on.

Another thing: Take a look at caniuse.com to see that transitions will never work in IE9 and below (no big deal but worth knowing) and that you should use the -webkit-, -moz-, and -o- vendor prefixes to make sure the transitions work on older versions of Chrome, Firefox, Opera, iOS, and Android browsers (click the "Show All" button to see deeper browser history).

.menu-open .home-nav {
  /* whatever other styles for this class */
  -webkit-transition: right 1s;
  -moz-transition: right 1s;
  -o-transition: right 1s;
  transition: right 1s;
}

Since you're using Sass you can make this a mixin and save yourself some typing.

Hope that helps you solve it!