Cascading Dropdown Navbar in HTML

kitkat9933

kitkat9933

kitkat9933

Soldato
Joined
26 Aug 2012
Posts
4,449
Location
North West
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:

gNUOiSz.png


3fLKM1y.png


And I want to make it do this

EWqmfJm.png


Any advise? If it makes sense lol
 
Last edited:
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.
 
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.
 
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.
Click to expand...


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/
 
Last edited:
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.
 
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.
Click to expand...

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.
 
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 :)
 
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 :)
Click to expand...

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!
 
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.
 
You must log in or register to reply here.
Back
Top Bottom