Results 1 to 6 of 6

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

  1. #1
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

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

    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; }
    Last edited by jscheuer1; 08-16-2013 at 09:03 AM. Reason: format

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    690
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there gpcsl,

    and a warm welcome to these forums.

    Your page is coded with tables.

    It also has quite a few coding errors...



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

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



    coothead
    Last edited by coothead; 08-16-2013 at 02:37 AM. Reason: made a cosmetic modification!!

  3. The Following User Says Thank You to coothead For This Useful Post:

    gpcsl (08-16-2013)

  4. #3
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    (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:

    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):

    1. 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.
    2. 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.

  5. The Following User Says Thank You to Nile For This Useful Post:

    gpcsl (08-16-2013)

  6. #4
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #5
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    690
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    No problem, you're very welcome.


    coothead

Similar Threads

  1. Change menu Headings from Vertical to Horizontal
    By trumpdown in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-10-2009, 08:46 PM
  2. horizontal MENU to Vertical
    By queerfm in forum CSS
    Replies: 2
    Last Post: 04-01-2008, 07:51 AM
  3. Change vertical menu into horizontal, please help!
    By Bluefame_Designer in forum CSS
    Replies: 5
    Last Post: 03-31-2008, 02:29 PM
  4. Vertical to Horizontal Menu?
    By chrisfromboji in forum JavaScript
    Replies: 0
    Last Post: 07-24-2007, 02:18 AM
  5. Replies: 2
    Last Post: 10-09-2006, 02:05 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •