add drop down tab in nav menu? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

vision2000 -> add drop down tab in nav menu? (12/13/2007 10:45:45)

Hi,

Is there a simple way to add a drop down to the fitness services tab in the top nav to show the 4 other services.

http://www.ihost-websites.com/WRIGHT/services.shtml

I'm hoping I can edit the current nav (css/xhtml) instead of recreating another one.

Please advise.



Tailslide -> RE: add drop down tab in nav menu? (12/13/2007 11:00:14)

No unfortunately - no simple way.

There are lots of dropdown menus around but most are either wholly Javascript (which is bad) or generally inaccessible for people without a mouse.

You should aim for a CSS version OR a Javascript enhanced version (i.e. it won't fail badly without Javascript on).

Here's a fully accessible CSS menu which you can style to look however you like: http://carroll.org.uk/sandbox/suckerfish/bones2.html

Here's a Javascript enhanced CSS menu: http://www.twinhelix.com/dhtml/fsmenu/

You need to ensure that the coding is correct in either case - you appear to have most of your current links in a single list item which is incorrect - each should be in it's own list item.



vision2000 -> RE: add drop down tab in nav menu? (12/13/2007 11:11:59)

Thanks for the swift reply...I'll try and one working.



vision2000 -> RE: add drop down tab in nav menu? (12/13/2007 14:23:53)

Here's my attempt to imitate the drop down used on verydeepblue.co.nz/cpsic/index.php

http://www.ihost-websites.com/WRIGHT/services2.shtml

It looks ok in IE but terrrible in FF.

What did I mess up and how do I get it in the same top position as my bottom menu..centered and down a fraction?

Thanks a lot!



jaybee -> RE: add drop down tab in nav menu? (12/13/2007 14:39:07)

#menu{
height:20px;
color:#fff;
padding:0 0 30px 20px;
background-color: #336699;

works in Firefox, haven't got time to check it in IE though. Basically you need to shift the content area down so it's not covering the menu.



vision2000 -> RE: add drop down tab in nav menu? (12/13/2007 15:23:13)

Thanks a lot...almost there

In IE the content got moved to the top of the blue line

How do I center the menu and get the blue line to be the same height as the bottom menu?



jaybee -> RE: add drop down tab in nav menu? (12/13/2007 15:26:56)

The blue line is easy, change the height in the code I gave you above.

Center depends on how you've done the page, let me take a look.



jaybee -> RE: add drop down tab in nav menu? (12/13/2007 15:52:27)

Because of the way the page is set up you'll have to play around with different margins and padding for that top menu bar to get the text to sit in the middle.

#menu{
height:0px;
color:#fff;
padding:5px 0 20px 20px;
background-color: #2D62A8;
}

looks close but you may want to tweak the first and third padding values.

Likewise centering the links is not just a case of margin auto.

A quick and dirty center is

#navbar ul {
margin: 0;
padding: 0 0 0 80px;
list-style: none;}

You don't need the position relative on the ULs as your layout is different to the developer's page.

Again, this is checked in FF not IE so try it in that.



vision2000 -> RE: add drop down tab in nav menu? (12/13/2007 16:19:28)

Thanks for the help centering it.

I tried adjusting the padding top and bottom

In IE the links move to the top
In FF the links move to the bottom

Do I need to just leave a thick blue line to accomodate them both
or is there a workaround?



jaybee -> RE: add drop down tab in nav menu? (12/13/2007 19:57:12)

The trick is, as I said, playing around with the values in padding and margins until it's near what you want. IE can do some odd things with padding as it always used to get the calculations wrong (thought that had been sorted in IE7 though, maybe not) so you might be better off using margins or borders to space it out but it's mostly trial and error.



vision2000 -> RE: add drop down tab in nav menu? (12/14/2007 13:04:37)

Thanks for your tips

After playing around with margins and padding this is as close as I could get to satisfying both browsers.

Does it look fine to you?

ihost-websites.com/WRIGHT/services2.shtml



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625