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

WordPress

Shaun Taylor
Shaun Taylor
2,654 Points
Posted by Shaun Taylor
Shaun Taylor
2,654 Points

Slide-down sub-menu in Bootstrap-to-Wordpress project...

Hi,

I'm building a website that's based on the Bootstrap-to-Wordpress project. The site can be seen here - http://ideedev.co.uk/flowmech/

In the navigation, when you hover over 'Products' for example, the light blue sub menu appears n hover and then disappears when you move away.

This is all fine, however my client has asked that the sub menus slide down rather than just 'appear'...

I've been looking around google, stack overflow etc. and can't seem to find a solution, JS, CSS or otherwise.

Can anyone help me figure it out please?

I'm happy with CSS, HTML and basic PHP, but not brilliant at js, so as much detail as possible (Where code needs to go, etc.) would be massively appreciated.

Thanks all in advance :)

Shaun.

2 Answers

Maciej Wrona
Maciej Wrona
7,162 Points
Maciej Wrona
Maciej Wrona
7,162 Points

There is one quite simple CSS only method. Start with setting 0 opacity and visibility: hiden of ul. Than change it to 1 and visible on hover state. To add slide down effect - change top offset of ul. Don't forget about transition's duration.

EGZ

ul{ opacity: 0; top: 30px; visibility: hiden; }

a:hover ul{ opacity: 1; top: 60px; visibility: visible; transition: all .25s ease; }

I've once found this method here: http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu

Good Luck

Shaun Taylor
Shaun Taylor
2,654 Points
Shaun Taylor
Shaun Taylor
2,654 Points

Thanks for this, Maciej...

Sorry for the later reply - I haven't been getting any notifications for some reason...

I've taken a look and tried to apply this CSS but it doesn't seem to do anything - I'm sure I'm missing something but don't know what. Here's my current CSS for the submenu: 

/* subnav */

@media (min-width:768px) {
    .sub-menu {
        display: none;
        position: absolute;
        background: #222;
        padding: 10px 15px;
        width: 200px;       
    }

    li:hover .sub-menu {
        display: block;
    }

}

.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.sub-menu li:last-child {
    margin-bottom: 0;
}

.sub-menu a  {
    color: #999;
    text-decoration: none;
}

.sub-menu a:hover  {
    color: #fff;    
}   

.sub-menu {
    background-color: #2194ec;
    z-index: 20;
}

.sub-menu li {
    margin-bottom: 10px;
    list-style: none;
}

.sub-menu li:last-child {
    margin-bottom: 0; 
}

.sub-menu a  {
    color: #c5e4fc;
    text-decoration: none;
}

.sub-menu a:hover  {
    color: #fff;    
}   

.current-menu-item > a, .current-menu-parent > a {
    color: #fff;
    background-color: #00468A;
}

.current-menu-parent .current-menu-item a {
    color: #fff;
}

And here's the code I tried to add from you:

.sub-menu ul {
    opacity: 0; 
    top: 30px; 
    visibility: hiden; 
}

.sub-menu ul:hover {
    opacity: 1; 
    top: 60px; 
    visibility: visible; 
    transition: all .25s ease; 
}

Where am I going wrong? :-/