menu css

Quote from: smashingred at Jan 20, 2009, 06:03 AM

Browsers have default margins and padding for almost every element. You either need to reset them all to zero or as you use them give them the margins and padding to override the browser default so I’d add the following at the beginning of your statement:

#navigation, #navigation li {
    margin:0;
    padding:0;
}

thanks, I realised that just after posting.

Now I just need to figure out how to do the dropdown elements. Products, Advice, News, Contacts will all have a drop down element. I’m not sure how to include this.

Did you read my sig?

Seriously, I would have suggested a different method of building your menu. Adding a dropdown is not a simple task and you likely should have used Wayfinder to do the menu then.

I usually recommend against dropdowns for two reasons, they are usually done for the sake of themselves and they don’t improve navigation; they often impede it for many users.

Cases for dropdowns is in web applications, intranets and strange hierarchical structures that don’t lend to a drill down approach.

That all said if you decide to do it you should look at the examples at the Wayfinder site: http://www.muddydogpaws.com/development/wayfinder/examples.html

All the best!

I have no choice but to use a dropdown - I have to match the current style exactly.

i have used the code from muddy paws for a website i’d down previously - the problem is this one must use images, which is fine as i have all the sprites in place, but I don’t know how to combine that with the code for the dropdowns.

Ahh,

Sounds like you are in for a challenge. It shouldn’t be too hard but you should have really done the dropdowns first using Wayfinder and then added styles to the top level nav. If it were me I’d duplicate the template and then in the new duplicate template get the wayfinder based dropdowns working then tackle putting back in the sprite CSS images/hovers. It will be less headachey and easier to debug.

We’ve all had challenges in compromise and it is often these cases that we learn from the most.

Cheers.

If you are having problems getting Wayfinder working please make sure you post in the appropriate forum.

It sounds like you are building something to another person’s specs?

I faced this issue as well (wanting to use a sprite and drop down navigation.) I thought about combining a horizontal nav sprite and getting it to work as a drop down with Wayfinder in the mix. I think quite a few people struggle with drop down>>sideways menus though: it takes some mouse skills. I have watched my dad with these things and he hates them. Depending on the length of the drop down menu you might find it looks strange when it covers the content of the page.

With my latest project I used a horizontal nav sprite with jQuery for the "big" navigation items (no drop down) and then in the content sidebar column used the Wayfinder snippet without any images. I will put all my post and category content nav links here. The Wayfinder will expand and contract its sub navigation automatically. I really like this combination and made for less head scratching during the construction stage...

Yeah I’m building to someone else’s specs.

I’m trying to duplicate a site that is currently coded using tables with inline styles and a dreamweaver template. My task is to turn it into a a XHTML/PHP/CSS site and then add-in the foreign language translations.

I will have a look at getting wayfinder set up and working tomorrow.

I still have some CSS problems/challenges but I post in another thread.

Right on...

Sometimes it is more of a hassle taking an existing site and swapping it over to a new code structure than it is starting a site from scratch. In your case all that table and inline style code is like nasty cork crumbles in a nice glass of wine...

max

I’ve had this experience and in all cases it is faster for me to rebuild the entire layout in HTML/CSS without tables. You’ve got my sympathies. Best of luck.