CSS Navigation Menu (Full Version)

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



Message


RockcliffRugby -> CSS Navigation Menu (4/20/2008 7:29:55)

Hi,

I'd like to put a CSS menu on my website, I've done a bit of work on it based on what I've seen in this article:
http://www.alistapart.com/articles/horizdropdowns

This is great, and my menu currently looks like this: http://www.alistapart.com/d/horizdropdowns/horizontal2.htm

But, I would really like the menu to go horizontally across the page like this:
Home | About | Service | Contact Us

instead of vertically down it like this:
Home
About
Services
Contact Us

The CSS for the menu can be found here:
http://www.alistapart.com/d/horizdropdowns/style2.css

I am very much a newbee with CSS so simple answers would be greatly appreciated!

Thanks




jaybee -> RE: CSS Navigation Menu (4/20/2008 8:13:09)

Well done for giving it a go. Take a look at the Suckerfish menus




RockcliffRugby -> RE: CSS Navigation Menu (4/20/2008 8:45:00)

Thanks for the quick reply.

That suckerfish layout is just what I want, but I cant find what the CSS command is to wrap the menu items. But I do like the formating of the site I posted before.

Any ideas?

I've tried copying parts of the CSS from my stylesheet into the one from suckerfish and have narrowed it down, I think, to this.

SuckerFish:
ul
{
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

My Stylesheet:
ul
{
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

When I copy the ul section of my stylesheet into suckerfish it puts it like this
Menu1
Menu2
Menu3
etc..

But when I copy the ul section from suckerfish into my stylesheet it just extends the width of the blocks, no positioning change.
|Menu1__________________________|
|Menu2__________________________|
|Menu3__________________________|




jaybee -> RE: CSS Navigation Menu (4/20/2008 11:16:16)

#nav a {
display: block;
width: 10em;
}

It's the display block that tweaks horizontal rather than vertical.




RockcliffRugby -> RE: CSS Navigation Menu (4/20/2008 15:20:17)

God I'm being really thick!

I've tried the tag you suggested but I've still had no luck, from what I can see from the template from
http://www.alistapart.com/d/horizdropdowns/horizontal2.htm the block tag is already being used

I've attached the files I'm working with and would be very grateful if someone could have a look as Im clueless!!!!


Thanks




jaybee -> RE: CSS Navigation Menu (4/20/2008 16:51:23)

No you're not being thick. You've chosen a vertical menu with horizontal flyouts which is a completely different build method to a horizontal menu with dropdowns. It's not just a case of tweaking.

You're better off starting with the latter and just changing the styles. Here's another one on the same site




jurgen -> RE: CSS Navigation Menu (4/20/2008 17:18:14)

There are many drop-down menus available.....

This is what I use on my site......

Horizotal drop-down




RockcliffRugby -> RE: CSS Navigation Menu (4/20/2008 17:55:11)

Brilliant, thanks very much jaybee.

Will try it tomorrow and when I get it working I'll post up the files so anyone wanting the same thing can just tweak mine.

Thanks again!




RockcliffRugby -> RE: CSS Navigation Menu (4/22/2008 8:42:04)

Hi again everyone!

I've just about got it now.

Only problem is, when i mouse over a heading, the sub menu appears slightly off and then when i move to a sub menu item it the sub menu area moves off again.

I think its the positioning in the :hover section but I dont know what I'm looking at to change!!!!

Any ideas?!

(See attached)





jaybee -> RE: CSS Navigation Menu (4/22/2008 8:47:51)

Can we have a link to an actual page? It's much easier as we have tools that allow us to play with the css without permanently altering it.




RockcliffRugby -> RE: CSS Navigation Menu (4/22/2008 17:04:19)

Hi, I've just uploaded it to my site.

http://www.whitleybay-rockcliffrfc.co.uk/Menu/menu.htm

I wasn't going to put it on until it was working fully but if it helps you out...

I've been previewing it in IE which looks ok, but as soon as i open it in firefox its all over the place!!!

I appreciate all the help.

Thanks

[edit] I've also just noticed that when I've uploaded it, the menu doesn't change color on hover.

This is not the case when I preview it from my hard drive! Arrrghhhh CSS!




jaybee -> RE: CSS Navigation Menu (4/22/2008 19:15:29)

Before even looking at it recommendation 1 - always develop using Firefox. Check it in Opera, fix it for IE, in that order.




jaybee -> RE: CSS Navigation Menu (4/22/2008 19:26:03)

OK, I'm playing with it in Firefox on the Mac.

To get the dropdowns immediately under the main menu item

/*positioning of dropdowns */
li li {
display: block;
float: none;
border: 1px;
border-top:0px;
position:relative;
top: 0px;
left:-44px;
}

the colour doesn't change because you have the background image name wrong.

on normal it's
background:url("tabrightE.gif") no-repeat Right top;
and on hover
background:url("tabRightE.gif") no-repeat Right top;

that capital R is the problem. Windows lets you get away with it but to Unix it's a totally different file name.




RockcliffRugby -> RE: CSS Navigation Menu (4/23/2008 3:24:48)

Thanks for the quick response!

However, the positioning of the menus in IE was fine, changing it to left:44px; may look ok in FF but completely throws off the IE.

I'd originally had it set to left: -6px; to position it correctly in IE, so you can imagine what left: -44px; looks like!!!

What is really bugging me is how the sub menu jumps around when you go from a heading to a sub menu i.e.

Mouseover Menu item "Teams"
Sub Menu block appears about 5 px lower than the menu
Mouseover sub menu item "1st XV" and the sub menu block jumps to about 5px below the menu item text.

Like I said I'm a noob with CSS but could it be something like I've got the position: tag set wrong on the hover: section?

Thanks

[edit] I havent had chance to upload any changes to my site yet as I'm at work...sssshhh!




jaybee -> RE: CSS Navigation Menu (4/23/2008 6:51:33)

Which is why we say develop in FF fix for IE. Don't have time to play at the moment but IE gets the box model wrong. What that basically means is it doesn't add up padding, border and margin in the same way that other browsers do.

If IE is out then I usually play with padding, replacing it with margin where possible. On a very quick look at yours if you take the padding out of the hover then the dropdown stops jumping but the text moves. LOL.




RockcliffRugby -> RE: CSS Navigation Menu (4/23/2008 9:37:26)

Good old IE!!! I try it on FF later.

If I use width: and height: tags to pad out my block instead of padding: would that be ok in IE?

Cheers




jaybee -> RE: CSS Navigation Menu (4/23/2008 14:23:08)

Height may cause a problem as text resizing can go a bit bonkers.




rdouglass -> RE: CSS Navigation Menu (4/23/2008 14:30:11)

quote:

play with padding, replacing it with margin where possible.


<$.02>
IMO, that'll get you the most for the quickest when it comes to fixing IE box model issues. Work on that first.
</$.02>




RockcliffRugby -> RE: CSS Navigation Menu (4/26/2008 4:05:26)

Hooray! Now we are getting somewhere.

I've been checking it with firefox like jaybee said and now its starting to look quite snazzy, or whatever the kids are saying nowadays!!!!

IE is looking ok except for menu items being offset.

Just a few bugs to sort out now like:


  • How to have a top-border on the menu headings without doubling up the borders on the menu items
  • And, what is that random gap on the left handside?! I cant find it anywhere!!!


Any ideas?

http://www.whitleybay-rockcliffrfc.co.uk/Menu/menu.htm

I can see the light at the end of the tunnel now!





Tailslide -> RE: CSS Navigation Menu (4/26/2008 4:16:50)

I think it's the default padding applied to the UL by Firefox, Opera etc. If you add padding:0; to the UL then the gap disappears... but you'll need to fiddle with the other rules as this then throws the padding on all of it.

Personally I tend to add a global reset at the start of all stylesheets which basically sets all default margins and paddings to zero - because different browsers have different defaults on different items. That way you start from a level playing field and you can re-introduce margins or padding as required as you go along.





jaybee -> RE: CSS Navigation Menu (4/26/2008 16:25:53)

This works

body {
	font-family: arial, helvetica, serif;
	font-size: 10pt;
}

a {
	display:block;
	text-decoration: none;
	text-align:center;
	border-top-width: 0px;
	background:url('tabrightE.gif') no-repeat Right Top;
}

ul {
	list-style: none;
    margin: 0;
    border-top: 0px;
}

/* Style for the heading links*/
#nav a 
{
	display:block;
	color: white;
	text-decoration: none;
	width:150px;
}


li {    border-top:1px solid white;
	float: left;
	position: relative;
	width: 150px;
}

/*style for the first heading in the list*/ 
li#first {
	border-left-width: 1px;
	position:relative;
}

/*style for the last heading in the list*/ 
li#last {
	border-right-width: 1px;
	border-left:0px;
}


li ul {
	display: none;
	position: relative;
}

li>ul {
	top: auto;
	left: auto;
}

/*positioning of dropdowns */
li li 
{
	display: block;border:0px;
	float: none;
	width:150px;
	position:relative;
	top: 0px;
	left: -40px;
}

li:hover ul, li.over ul 
{
	display: block;
	background:url("tabrightE.gif") no-repeat Right top;
	background-position: 0% -42px;
}

ul li a:hover
{
	display: block;border:0px 1px 1px 1px;
	position:relative;
	left: 0px;
	top:0px;
	width:150px;
	background:url("tabrightE.gif") no-repeat Right top;
	background-position: 0% -42px;
}




d a v e -> RE: CSS Navigation Menu (4/26/2008 17:28:06)

why are you using points on the body font size?




jaybee -> RE: CSS Navigation Menu (4/26/2008 17:47:27)

Dave is correct, you really should use px rather than pt. I'd already changed a few of them.




d a v e -> RE: CSS Navigation Menu (4/27/2008 4:56:12)

is the way you're using px ok with IE?! (for text resizing i mean)




jaybee -> RE: CSS Navigation Menu (4/27/2008 6:46:34)

I'm on the Mac so I've not checked it in IE. Px has to be better than pt though. On my sites I use em and % and I would have changed his css to use that but I figured one step at a time.




d a v e -> RE: CSS Navigation Menu (4/27/2008 6:52:13)

you mean you don't have IE 5.5 or whatever used to be on the mac? :)

i just thought that while you were at it you might have used %/em.

i was just being curious/nosey :)




jaybee -> RE: CSS Navigation Menu (4/27/2008 7:07:24)

quote:

you mean you don't have IE 5.5 or whatever used to be on the mac? :)

I loaded it once. Then I deleted it fast. It's a dead duck.

He's having enough trouble getting the menu right without resizing issues. I figured we get it working. Once that's done then we can look at text resize but, that menu has height specified all over the place so I suspect that it was never meant to resize. May be wrong.




jaybee -> RE: CSS Navigation Menu (4/27/2008 7:11:58)

Do you have the web Dev toolbar for IE? If so, edit the css, pull my code above in to replace what's there then resize. It's working fine in all the Mac browsers I have available. I'm tempted to say that if it's fixed in IE then it serves them right. LOL




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.054688E-02