Change Vertical menu to Horizontal - Please Help if you can!

**gpcsl** · 08-15-2013, 04:59 PM

Hi Everyone! My name is Rhonda and I am working on the website for my church. The site is http://www.grantspasscsl.org. I have recently offered to help them improve it but I am by no means a web designer or programmer. I can manipulate basic html but am faced with the minister wanting the drop down menu to be horizontal instead of vertical. Personally I don't really care for the design of the existing menu and think it’s clunky but I don't have the skills to write a new one on my own. The minister likes the one at http://www.cslsr.org/ but I don't think I can create it. Anyway, below is the css for the existing fly out menu. I did make an attempt and changed the display to inline in the #navbar li and changed the width to zero in #navbar. Basically, I am looking for any and all help so we can have a decent horizontal menu on our website that looks nicer and not so clunky. I appreciate any and all help.
With much gratitude!
Rhonda

Code:

/* Fly-out menu */

#navbar {
	width: 0;
	margin: 0;
	padding: 0; 
	}
#navbar li {
	list-style: none;
	display: inline;
	float:left; /* Optional. Removes space between menu elements */
	}
#navbar li a {
	padding: 3px 8px;
	background-color: #5e8ce9;
	color: #fff;
	text-decoration: none; 
	}
#navbar li ul {
	display: none; 
	background-color: #69f;
	}
#navbar li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; 
	}

#navbar li:hover li {
	float: none; 
	}

#navbar li:hover li a {
	background-color: #69f;
	border-bottom: 1px solid #fff;
	color: #000; 
	}

#navbar li li a:hover {
	background-color: #8db3ff; 
	}

sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-color: #69f;
	border-bottom: 1px solid #fff;
	color: #000; }

**coothead** · 08-16-2013, 02:28 AM

Hi there gpcsl,

and a warm welcome to these forums.

Your page is coded with tables.

It also has quite a few coding errors...

http://validator.w3.org/check?verbos...passcsl.org%2F

With that in mind, I have re-coded your page with slightly more modern methods.

The fruits of my labours can be found here...

http://ubuntuone.com/3cqybeLQCUZxLDtTHzDroA

coothead

**Nile** · 08-16-2013, 02:29 AM

(edit: Ahh, look at that. coothead was kind enough to remake the homepage for you. You can read my post anyways if you'd like, though)

Hm... it's too bad that layout uses tables. I'd have just rearranged everything, changed some CSS, and made it like new for you, but I don't really want to mess with table-based layouts. It is a fairly simple website, though, so if there's not enough experience to produce it, you may want to go with an online website builder.

However, if you're focused on keeping how it is now, you may see yourself checking out any of the following:

http://www.dynamicdrive.com/dynamici...smoothmenu.htm
http://www.dynamicdrive.com/dynamici.../generator.htm (recommended for it's customization tools)
http://www.dynamicdrive.com/style/cs...rop_line_tabs/
http://www.dynamicdrive.com/style/cs...rop_line_menu/
http://www.dynamicdrive.com/style/cs...el_css_menu_2/

I haven't really gone into the logistigics of how the layout is setup, but if it's a classic tabular layout, you'll need to put one of the above menus inside a new row (<tr>) and column (<td>). To be honest, the same goes if you want to remain using the menu you're currently using. I'll get you started by giving you some hints on the CSS (for the original menu, if you want to keep it just change orientations):

I haven't gone into how the menu is constructed, but instead of display: inline;, you may want a float (float: left;). I'd read up on what a float is if you don't already know and how it's related to absolute and relative positioning, and block or inline displays.
You'll also probably want to remove the width attribute as horizontal menus don't really have fixed-width items. (I reread your post and am now seeing that you've acknowledged this width issue, so right now I'll just say I'd remove it completely and not 0.

Anyways, good luck.

**gpcsl** · 08-16-2013, 03:28 AM

Oh my goodness coothead, that is absolutely beautiful! I love the rounded corners and the drop shadow. Love it sooo much! Dude, you rock! I knew I was biting off more than I can chew with this, but there was no one else, so I appreciate your help so very much. Now to run off and see if I can get it all uploaded and in place. Any other advice or suggestions are welcome.

**gpcsl** · 08-16-2013, 03:30 AM

Nile, thank you so much for stepping up to help! Your willingness to assist a neophyte is tremendous and greatly appreciated. For now, with my limited skills and coothead's turnkey coding, I think I will try and get those docs in place. Again, thank you so very much!
Rhonda