Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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!