Comments on: Tab-Based Navigation in Six (or Seven) Easy Steps

By: Jason

Jason — Sun, 18 Dec 2011 02:27:10 +0000

A lot of these articles are really helpful, and this one could be as well.
I am a complete newb and the examples would help me out a lot. Unfortunately, the examples are not functioning because all of the source codes and results are the same.

By: sjaak Wooning

sjaak Wooning — Wed, 15 Jun 2011 07:17:34 +0000

It is partly working for me. The tab based menu bar looks perfect. Also the hoover works just fine. The selected also.

There is just one tiny thing that irritates me a lot.
I want the menu that is selected stay selected. When i click it it is selected. But i want the menu item to be selected all the time.

ai added the javascript into my masterpage but it doesn’t seem to work.

can you help me out. I like the solution it looks so easy to do.

By: Mike

Mike — Fri, 12 Feb 2010 01:18:09 +0000

Not sure why but the changes you made broke it in IE, and it doesn’t respond as well in other browsers Revision. Perhaps we shouldn’t fix what isn’t broken?

By: Saint John Web Design | Informative Computer Solutions » Blog Archive » A Super Simple Horizontal Navigation Bar

Sun, 07 Feb 2010 04:29:42 +0000

[...] occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to [...]

By: Mike Capson » Blog Archive » A Super Simple Horizontal Navigation Bar

Mike Capson » Blog Archive » A Super Simple Horizontal Navigation Bar — Sat, 06 Feb 2010 00:57:41 +0000

[...] occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to [...]

By: A Super Simple Horizontal Navigation Bar | CSS Heaven

A Super Simple Horizontal Navigation Bar | CSS Heaven — Sun, 11 Oct 2009 20:12:32 +0000

[...] occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to [...]

By: A Super Simple Horizontal Navigation Bar

A Super Simple Horizontal Navigation Bar — Fri, 04 Sep 2009 23:47:29 +0000

[...] occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to [...]

By: Revision

Revision — Sat, 14 Mar 2009 05:22:10 +0000

Couldn’t rest until I worked out why the display: inline; and line-height declarations were in the original. Well, they were there to make IE6 (and earlier) work of course! I started from a standards compliant browser and then forgot that IE6 is still being used, regrettably. So, here’s code that should work in most browsers (with the lines that fix IE6 all beginning with an underscore – meaning only IE6 reads them – all other browsers ignore them):

ul#nav {
position: absolute;
top: 10px;
right: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
_height: 1%;
}

ul#nav li {
float: left;
}

ul#nav li a {
display: block;
_position: relative;
_display: inline-block;
padding: 13px 5px 7px 5px;
margin-right: 5px;
background-color: #034a7f;
color: #fff;
font-weight: bold;
text-decoration: none; }

ul#nav li a:hover {
padding-top: 17px;
background-color: #075a97; }

One final IE6 quirk. If you upload this to your host and run the file in IE6 it is fine. If you run it locally, then you may need to refresh the page before the menu will appear (tried the peekaboo fixes and they don;t work).

This only applies if the menu is positioned absolutely. If it is in the normal flow, it is fine. Can anyone suggest why?

By: Revision

Revision — Fri, 13 Mar 2009 00:19:04 +0000

I wonder if one misunderstanding leads to another. The code can more properly be written as:

ul#nav {
position: absolute;
top: 10px;
right: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}

ul#nav li {
float: left; }

ul#nav li a {
/* display: inline;
float: left;*/
display: block;
padding: 13px 5px 7px 5px;
/* line-height: 2em;*/
margin-right: 5px;
background-color: #034a7f;
color: #fff;
font-weight: bold;
text-decoration: none; }

Where it starts to get skewed with this attempt create a horizontal menu is the missing [overflow: auto;] declaration on the ul element. This declaration forces the ul parent to wrap around the floated li children, the use of the succeeding float of the a element is then not required (actually gets in the way in some browsers). And why is the [display: inline;] declaration there I wonder?

Now, the a element (normally an inline element) can usefully get the [display: block] declaration added. This then allows vertical settings (margins, padding etc.) to apply properly. Is this why line-height was included – because padding was not giving the required vertical spacing? I don’t know but set the top and bottom padding values as shown and line-height setting is redundant.

To end: in this example, because the ul element has [position: absolute;] which takes it out of the normal document flow, then [overflow: auto;] is not needed but I included it for completeness.
Regards
Revision

By: Sh

Sh — Wed, 09 Jul 2008 07:23:29 +0000

Thank u so much! It worked fantastically!