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

Posted by Katy Burdine
Katy Burdine
Courses Plus Student 5,922 Points

Navigation Transition Translate Down Bugging

I'm working on a nav code and the transition and translate portion is supposed to bring the menu down when hovered over, and stay down when selected. It won't stay down when the selected class is applied, and the hover part keeps twitching back up like it's bugging. Can this be fixed or should I start from scratch?

<!-- navigation in html -->

    <nav>
        <ul>
            <li><a href="#" class="selected home">Home</a></li>
            <li><a href="#" class="contact">Contact</a></li>
            <li><a href="#" class="support">Support</a></li>
        </ul>
    </nav>

/******************** NAVIGATION CSS ********************/

nav { margin: 0 auto; overflow: hidden; list-style:none; padding: 0; height: 100%; z-index:999; position:absolute; top:0; right: 0; }

nav li { display: inline-block; margin: 0 auto; margin-right:5px; }

nav a, nav a:visited, nav li:active { text-align: center; text-decoration: none; font-family: sans serif; font-size: 11px; color: #fff; padding: 15px 10px 20px 10px; -webkit-border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; border-radius: 0 0 15px 15px; transition: all .4s .1s; -webkit-transition: all .4s .1s; -moz-transition: all .4s .1s; -o-transition: all .4s .1s; }

.home { background: -moz-linear-gradient(top, #f89c20, #d6791d); background: -o-linear-gradient(top, #f89c20, #d6791d); background: -webkit-linear-gradient(top, #f89c20, #d6791d); background: linear-gradient(top, #f89c20, #d6791d); }

.contact { background: -moz-linear-gradient(top, #51c5f1, #189ac9); background: -o-linear-gradient(top, #51c5f1, #189ac9); background: -webkit-linear-gradient(top, #51c5f1, #189ac9); background: linear-gradient(top, #51c5f1, #189ac9); }

.support { background: -moz-linear-gradient(top, #a8cf37, #8bb433); background: -o-linear-gradient(top, #a8cf37, #8bb433); background: -webkit-linear-gradient(top, #a8cf37, #8bb433); background: linear-gradient(top, #a8cf37, #8bb433); }

nav a:hover { padding: 40px 10px 20px 10px; transform: translate(0px,40px); -webkit-transform: translate(0px,40px); -moz-transform: translate(0px,40px); -o-transform: translate(0px,40px); }

.selected { margin:40px 0 0 0; padding: 40px 10px 20px 10px; }

3 Answers

Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

I've started working on it but I need a little more information. What do you mean keep it down, because by the look of it the transition pushes the link down for a few seconds and then snaps to the top. I've included a little code to help you get started but let me know if that's what you were aiming for

nav { 
    margin: 0 auto; 
    overflow: hidden; 
    list-style:none; 
    padding: 0; 
    height: 100%; 
    position:absolute; 
    top:0; 
    right: 0; }

nav li { 
    display: inline-block; 
    margin: 0 auto; 
    margin-right:5px; }

nav a, 
nav a:visited { 
    text-align: center; 
    text-decoration: none; 
    font-family: sans serif; 
    font-size: 11px; 
    color: #fff; 
    padding: 15px 10px 20px 10px;  
    border-radius: 0 0 15px 15px; 
    -webkit-border-radius: 0 0 15px 15px; 
    -moz-border-radius: 0 0 15px 15px;
    transition: all .6s .2s; 
    -webkit-transition: all .6s .2s; 
    -moz-transition: all .6s .2s; 
    -o-transition: all .6s .2s; 
}

.home { 
    background: -moz-linear-gradient(top, #f89c20, #d6791d); 
    background: -o-linear-gradient(top, #f89c20, #d6791d); 
    background: -webkit-linear-gradient(top, #f89c20, #d6791d); 
    background: linear-gradient(top, #f89c20, #d6791d); }

.contact { 
    background: -moz-linear-gradient(top, #51c5f1, #189ac9); 
    background: -o-linear-gradient(top, #51c5f1, #189ac9); 
    background: -webkit-linear-gradient(top, #51c5f1, #189ac9); 
    background: linear-gradient(top, #51c5f1, #189ac9); }

.support { 
    background: -moz-linear-gradient(top, #a8cf37, #8bb433); 
    background: -o-linear-gradient(top, #a8cf37, #8bb433); 
    background: -webkit-linear-gradient(top, #a8cf37, #8bb433); 
    background: linear-gradient(top, #a8cf37, #8bb433); }

nav a:hover { 
    padding: 40px 10px 20px 10px; 
    transform: translate(0px,40px); 
    -webkit-transform: translate(0px,40px); 
    -moz-transform: translate(0px,40px); 
    -o-transform: translate(0px,40px); 
}

nav .selected {
    padding: 40px 10px 20px 10px;
}
Katy Burdine
PLUS
Katy Burdine
Courses Plus Student 5,922 Points
Katy Burdine
Katy Burdine
Courses Plus Student 5,922 Points

It was the snapping back up that was bothering me. :) Thank you for the help!

Elijah Collins
Elijah Collins
19,457 Points

So you don't want it to snap back up? I have to take a look at it again but do you have any examples because I think I have may a solution

Katy Burdine
Katy Burdine
Courses Plus Student 5,922 Points

It feels like it's breaking when it snaps back up, so no. I've been looking around, but I can't find anything too similar. My best way of describing it would be like pulling a ribbon down, or a tab.

Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

Ok I think I'm closer on this one. Test this css out and see if that works

nav { 
    margin: 0 auto; 
    overflow: hidden; 
    list-style:none; 
    padding: 0; 
    height: 100%; 
    position:absolute;  
    right: 0; }

nav li { 
    display: inline-block; 
    margin: 0 auto; 
    margin-right:5px; }

nav a { 
    text-align: center; 
    text-decoration: none; 
    font-family: sans serif; 
    font-size: 11px; 
    color: #fff; 
    padding: 45px 10px 20px 10px;  
    border-radius: 0 0 15px 15px; 
    -webkit-border-radius: 0 0 15px 15px; 
    -moz-border-radius: 0 0 15px 15px;
    transition: all .6s .2s; 
    -webkit-transition: all .6s .2s; 
    -moz-transition: all .6s .2s; 
    -o-transition: all .6s .2s; 
}

.home { 
    background: -moz-linear-gradient(top, #f89c20, #d6791d); 
    background: -o-linear-gradient(top, #f89c20, #d6791d); 
    background: -webkit-linear-gradient(top, #f89c20, #d6791d); 
    background: linear-gradient(top, #f89c20, #d6791d); }

.contact { 
    background: -moz-linear-gradient(top, #51c5f1, #189ac9); 
    background: -o-linear-gradient(top, #51c5f1, #189ac9); 
    background: -webkit-linear-gradient(top, #51c5f1, #189ac9); 
    background: linear-gradient(top, #51c5f1, #189ac9); }

.support { 
    background: -moz-linear-gradient(top, #a8cf37, #8bb433); 
    background: -o-linear-gradient(top, #a8cf37, #8bb433); 
    background: -webkit-linear-gradient(top, #a8cf37, #8bb433); 
    background: linear-gradient(top, #a8cf37, #8bb433); }

nav a:hover { 
    padding: 80px 10px 20px 10px; 
    transform: translate(0px,40px); 
    -webkit-transform: translate(0px,40px); 
    -moz-transform: translate(0px,40px); 
    -o-transform: translate(0px,40px); 
}

nav .selected {
    padding: 40px 10px 20px 10px;
}