Cascading Dropdown Navbar in HTML

kitkat9933 · 26 Jun 2014 at 21:17

Edit:

I am currently rebuilding my schools site and I am having a little trouble finishing of the Dropdown bar.

I have got it working but when I hover on a parent to show the children, it expandS the navbar FULLY rather than just creating a column downwards, pictures below to explain..
The new design is the top one, but I want the menu dropdown to do what the old one does, but in the new design.

Currently it does this:

And I want to make it do this

Any advise? If it makes sense lol

GravyMonster · 26 Jun 2014 at 21:29

Do you mean the 'Home', 'About us' etc nav at the top?

If so, it's a UL/LI menu, so you can create sub UL elements, and hide them until the parent is CSS :active, or :hover.

kitkat9933 · 26 Jun 2014 at 21:36

Spunkey said:
Do you mean the 'Home', 'About us' etc nav at the top?

If so, it's a UL/LI menu, so you can create sub UL elements, and hide them until the parent is CSS :active, or :hover.

Ok, i'll try that thanks.

dav3evans · 26 Jun 2014 at 22:01

Is this what you're after:

http://jsfiddle.net/4ScFz/400/

kitkat9933 · 26 Jun 2014 at 22:04

dav3evans said:
Is this what you're after:

http://jsfiddle.net/4ScFz/400/

Yes thanks.

kitkat9933 · 27 Jun 2014 at 08:53

First post updated, with where I currently am.

dav3evans · 27 Jun 2014 at 09:08

Are you using the link I sent you above? If so you'll need to target the code that starts with

Code:

.second-level-menu > li {}

Essentially, you need to do this so that you target just the drop downs and set them to a different height, as currently your second level is as high as the top level links.

kitkat9933 · 27 Jun 2014 at 09:27

dav3evans said:
Are you using the link I sent you above? If so you'll need to target the code that starts with

Code:

.second-level-menu > li {}

Essentially, you need to do this so that you target just the drop downs and set them to a different height, as currently your second level is as high as the top level links.

I integrated that code to get where I am now, and targeting that bit but still with no luck. So close, but yet so far way.

This is my current code on Jsfiddle if it could be possible for you to have a look at. Bare in mind some formatting and styling has messed up and the pictures missing in JSfiddle.

http://jsfiddle.net/eyf2T/

dav3evans · 27 Jun 2014 at 12:03

I'll take a proper look if I have the chance later. Just to confirm, when the menu expands, should the dark grey background go along with it or just stay on the top line?

You have quite a lot of code on the jsfiddle page as well. To make it a little more digestible, for us are yourself, you might want to just build the menu outside of the page, get it working, and then look at dropping it into the site.

kitkat9933 · 27 Jun 2014 at 12:18

dav3evans said:
I'll take a proper look if I have the chance later. Just to confirm, when the menu expands, should the dark grey background go along with it or just stay on the top line?

You have quite a lot of code on the jsfiddle page as well. To make it a little more digestible, for us are yourself, you might want to just build the menu outside of the page, get it working, and then look at dropping it into the site.

Thanks,

Ok I'l try that as well.

When the menu current expands, the entire top bar expand as well. I want it so only the menu expands downwards.

dav3evans · 28 Jun 2014 at 20:02

Hey dude, without being able to get Firebug on that menu of yours it's hard to debug why it's pushing the rest of the page down, jsfiddle doesn't tend to work to well when you have whole pages of a site in there. If you want to send me copies of the pages or an FTP link I'll happily take a proper look though. Just trust me with download links etc... if you need more help

kitkat9933 · 28 Jun 2014 at 21:31

dav3evans said:
Hey dude, without being able to get Firebug on that menu of yours it's hard to debug why it's pushing the rest of the page down, jsfiddle doesn't tend to work to well when you have whole pages of a site in there. If you want to send me copies of the pages or an FTP link I'll happily take a proper look though. Just trust me with download links etc... if you need more help

That be great if you could mate, I'll send you in trust tomorrow when I get home. I'll defiantly owe you some beers!

dav3evans · 1 Jul 2014 at 21:56

Hey mate, I moved rather than copied the files out of the GDrive folder like a muppet. So that you can try to get things going, I've made the menu in the colours your need, and made the top level larger compared to the other items underneath. I think that's the kind of thing you're after.

What I would do from here is remove the current menu you have, and it's associated CSS, and then drop the one I've made into your site, along with the styling I've done. From there I'd hope it'll be plain sailing for you... but that's almost never the case when it comes to stuff like this

Let me know if the file didn't sync properly and I'll take a look.

Cheers,

Dave.

kitkat9933 · 2 Jul 2014 at 15:07

Thank you!

That's great, I owe you a big favour.

dav3evans · 2 Jul 2014 at 18:56

No problem buddy, glad to be of assistance