Comments on: Simple Navigation Bar With CSS And (x)HTML

By: Steven Bradley

Steven Bradley — Sun, 12 Feb 2012 17:26:54 +0000

For submenus I use the suckerfish system. I’ve linked to it about a dozen times in the comments so a quick search on the page should take you to it.

By: Udhaya

Udhaya — Sat, 11 Feb 2012 07:15:23 +0000

Thanks for the post..Its working..Do u have css code for sub menus…

By: Steven Bradley

Steven Bradley — Thu, 02 Feb 2012 05:17:04 +0000

I’m thinking the problem is more with the cgi script than the code here. Is there a reason why you’re using the cgi script. They went out of practice quite some time ago.

If you want the navbar to remain in place you can do that with some css. Give the outermost container on the navbar a position of fixed and it should remain in place.

Using the code here you could add

#list-nav {position: fixed}

By: Jesse

Jesse — Thu, 26 Jan 2012 19:05:36 +0000

I’ve tried your code and noticed an odd side effect when it follows a url. What I have is a PERL/CGI script which creates a webpage with the nav bar on it. My intention was to create the effect of a stationary and ever present nav bar as users navigate the links. The base url for all links are the same directing it back to the original CGI script, but the page changes it’s appearance based on additional parameters stipulated in the link.

For example:

Home = http://server.com/bin/script.cgi
Page 1 = http://server.com/bin/script.cgi?page=1

and etc..

The same nav bar code is reloaded everytime a link is clicked. But the funny thing is when following a URL the nav bar breaks up and forms a stair step from left to right. Refreshing the page will put the nav bar back into it’s appropriate orientation, using anchors to navigate within the same page seems to work fine, but put a url into and the nav bar breaks apart the next time it’s loaded.

Do you have any thoughts concerning that? Thanks.

By: Steven Bradley

Steven Bradley — Thu, 12 Jan 2012 16:10:39 +0000

Hi Frank. I’m working on a new post to do just that. In the meantime you can use the suckerfish system which is the one I usually use. I’ve linked to it a half dozen or so times in the comments so just do a search on this page for suckerfish. It should be easy to find.

By: Frank...

Frank... — Thu, 12 Jan 2012 11:14:17 +0000

do you mind showing us how to create navigation bars with drop down menus or refer me to else, please.

By: Alexander

Alexander — Sat, 07 Jan 2012 20:46:32 +0000

that helped a bit but i need adust then length a little bit thanks

By: Steven Bradley

Steven Bradley — Sat, 07 Jan 2012 05:41:40 +0000

Yep. You just need to adjust the widths I used. There’s one on the ul#list-nav, which sets the overall width of the entire navbar and then there’s one on ul#list-nav li a, which sets the width on the individual menu items.

You’ll probably need to adjust both and I think it will be easier to start by increasing ul#list-nav and then increasing ul#list-nav li a.

Hope that helps.

By: Steven Bradley

Steven Bradley — Sat, 07 Jan 2012 05:37:32 +0000

I wrote a post on centering with css. The basic idea is you want to give the element you want to center (in this case #list-nav) a width and then set the left and right margins to auto. You also need to use a proper doctype for some older versions of IE.

By: Alexander

Alexander — Sat, 07 Jan 2012 01:37:38 +0000

i have added the text i need and because its to long i has extended down one box so is there away to make the boxes longer