[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Change direction of navagation bar

Posted on 2010-04-07
18
Medium Priority
?
474 Views
Last Modified: 2012-05-09
Hi Experts.  With the help of an expert on here, I was able to get my css navagation bar put together and implemented on my site.  I am curious to see how the nav bar would look vertical instead of horizontal (current setup).  How can I change this?  The code is below.

Thanks in advance for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />   
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>   
<style>   
/* These styles just pretty up the page a bit. */   
body {   
   font: 62.5%/1.2 times, sans-serif;   
   background-color: #fffff; }   
#wrap {   
   font-size: 18px;   
   padding: 50px;   
   margin: 0;    
   position: absolute; 
   left:-50px; 
   top:-50px; 
  
   
/* These styles create the dropdown menus. */   
#navbar {   
   margin: 0;   
   padding: 50;   
   height: 1.5em; }   
#navbar li {   
   list-style: none;   
   float: left; }   
#navbar li a {   
   display: block;   
   padding: 3px 20px;   
   background-color: #006600;   
   color: #fff;   
   text-decoration: none; }   
#navbar li ul {   
   display: none;    
   width: 10em; /* Width to help Opera out */   
   background-color: #009933;}   
#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: #00cc33;   
   border-bottom: 1px solid #009933;   
   color: #ffff; }   
#navbar li li a:hover {   
   background-color: #009933; }   
   #navbar li ul li {   
                font-size:14px;      
   }   
</style>   
   
<script>   
// Javascript originally by Patrick Griffiths and Dan Webb.   
// http://htmldog.com/articles/suckerfish/dropdowns/   
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);   
</script>   
   
</head>   
<body>   
   <div id="wrap">   
      <ul id="navbar">   
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->   
         <li><a href="#">Main</a>   
         </li>   
         <li><a href="#">Home Users</a><ul>   
               <li><a href="#">Service and Repair Options</a></li><li>   
                    <a href="#">Do It Yourself (DIY)</a></li><li>
                    <a href="#">Customer Rewards/Referrals</a></li>
                    <a href="#">PC Wellness Center</a></li>
                    <a href="#">Start Remote Assistance</a></li></ul>   
         </li>   
         <li><a href="#">Small Business</a></li><ul>   
               <li><a href="#">Service and Repair Options</a></li><li>   
                    <a href="#">Business Case Studies</a></li></ul>   
            <li><a href="#">Store</a><ul>   
               <li><a href="#">Online Shopping Center</a></li></ul>     
            <li><a href="#">Why Choose Us</a><ul>   
               <li><a href="#">Customer Reviews</a></li>   
               <a href="#">Business Case Studies</a></li></ul>     
            <li><a href="#">Games</a><ul>   
               <li><a href="#">BattleMechs</a></li><li>   
               <a href="#">Empire of the Galadur</a></li><li>   
               <a href="#">Airport Madness 2</a></li></ul>
         </li>   
      </ul>   
   </div>   
   
</body>   
</html>

Open in new window

0
Comment
Question by:samiam41
  • 11
  • 7
18 Comments
 
LVL 9

Expert Comment

by:exalkonium
ID: 30047285
What about something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>  
<style>  
/* These styles just pretty up the page a bit. */  
body {  
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;  
   background-color: #eee; }  
#wrap {  
   font-size: 18px;  
   /*width: 858px; */ 
   padding: 50px;  
   margin: 0;   
   position: absolute;
   left:-50px;
   top:-50px;
   overflow:visible;
}  
  
/* These styles create the dropdown menus. */  
#navbar {  
   margin: 0;  
   padding: 50;  
   height: 1.5em; }  
#navbar li {  
   list-style: none;  
   float: left;
   clear:both;
   width:250px;
}
#navbar li a {  
   display: block;  
   padding: 3px 20px;  
   background-color: #006600;  
   color: #fff;  
   text-decoration: none; }  
#navbar li ul {  
   display: none;   
   width: 10em; /* Width to help Opera out */  
   background-color: #009933;}  
#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:160px;
}  
#navbar li:hover li, #navbar li.hover li {  
   float: none; }  
#navbar li:hover li a, #navbar li.hover li a {  
   background-color: #33FF33;  
   border-bottom: 1px solid #009933;  
   color: #000; }  
#navbar li li a:hover {  
   background-color: #009933; }  
   #navbar li ul li {  
                font-size:12px;     
   }  
</style>  
  
<script>  
// Javascript originally by Patrick Griffiths and Dan Webb.  
// http://htmldog.com/articles/suckerfish/dropdowns/  
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);  
</script>  
  
</head>  
<body>  
   <div id="wrap">  
            <ul id="navbar">  
                <!-- The strange spacing herein prevents an IE6 whitespace bug. -->  
                <li><a href="#">Main</a></li>  
                <li><a href="#">Home Users</a>
                    <ul>  
                        <li><a href="#">Service and Repair Options</a></li>
                        <li><a href="#">Do It Yourself (DIY)</a></li>
                        <li><a href="#">Customer Rewards/Referrals</a></li>
                        <li><a href="#">PC Wellness Center</a></li>
                        <li><a href="#">Start Remote Assistance</a></li>
                    </ul>  
                </li>  
                <li><a href="#">Small Business</a>
                	<ul>  
                		<li><a href="#">Service and Repair Options</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Store</a>
                	<ul>  
                		<li><a href="#">Online Shopping Center</a></li>
                    </ul>
                </li>
                <li><a href="#">Why Choose Us</a>
                	<ul>  
                		<li><a href="#">Customer Reviews</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Games</a>
                    <ul>  
                        <li><a href="#">BattleMechs</a></li>
                        <li><a href="#">Empire of the Galadur</a></li>
                        <li><a href="#">Airport Madness 2</a></li>
                    </ul>
                </li>  
            </ul>  
   </div>  
  
</body>  
</html>

Open in new window

0
 
LVL 9

Expert Comment

by:exalkonium
ID: 30047379
I cleaned up your list area too, BTW. ;)
0
 
LVL 9

Author Comment

by:samiam41
ID: 30047931
Thanks exalkonium and congrats on the master rank!  Was the lack of order driving you crazy in the code?

I am attaching a screenshot of what the website looks like now.  It appears the dropdown menu is covering up the option below.


web.example.v1.bmp
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 9

Expert Comment

by:exalkonium
ID: 30048136
That was how I set it. If you want to correct this, change this section's left attribute:

#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:160px;
}

to something like this:
#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:290px;
}

Open in new window

0
 
LVL 9

Expert Comment

by:exalkonium
ID: 30048876
Thanks for the compliment! I already had one for javascript, but your questions have helped me hit Master for CSS and also let me hit Guru for an overall expert!
0
 
LVL 9

Author Comment

by:samiam41
ID: 30051913
I thought I noticed you had the "master" shield being displayed.  Very cool.  You sure earned it especially working through my mess.  Which brings me to this.  I saw what you changed and thought I would try my hand at "tweaking" the code a little.  I didn't mess it up (I think) but I'm not sure why the page isn't highlighted now when you put your mouse over it.  The window pops up but the option isn't selected.  
web.example.v1.1.JPG
0
 
LVL 9

Author Comment

by:samiam41
ID: 30052028
And as you can tell from the pic, somehow there is dark green in the flyout window instead of the lighter green.  I am guessing that in my tweaking, I changed a size value that wasn't consistent elsewhere.  
0
 
LVL 9

Author Comment

by:samiam41
ID: 30052324
Aww crap!  When I made the change to where the flyout window (is that the correct term?), some how now I can't get the mouse from the page name over to the new window.  Here is the -modified- code...  Sorry for messing it up.  Just wanted to see how I did (or didn't) know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />    
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>    
<style>    
/* These styles just pretty up the page a bit. */    
body {    
   font: 62.5%/1.2 times, sans-serif;    
   background-color: #fffff; }    
#wrap {   
   font-size: 18px;   
   /*width: 858px; */  
   padding: 80px;   
   margin: 0;    
   position: absolute; 
   left:-50px; 
   top:-50px; 
   overflow:visible; 
}   
   
   
    
/* These styles create the dropdown menus. */    
#navbar {    
   margin: 0;    
   padding: 50;    
   height: 1.5em; }    
#navbar li {   
   list-style: none;   
   float: left; 
   clear:both; 
   width:170px; 
}  
#navbar li a {    
   display: block;    
   padding: 3px 20px;    
   background-color: #006600;    
   color: #fff;    
   text-decoration: none; }    
#navbar li ul {    
   display: none;     
   width: 10em; /* Width to help Opera out */    
   background-color: #009933;}    
#navbar li:hover ul, #navbar li.hover ul {   
   display: block;   
   position: absolute;   
   margin: 0;   
   padding: 0; 
   left:300px; 
} 
#navbar li:hover li, #navbar li.hover li {    
   float: none; }    
#navbar li:hover li a, #navbar li.hover li a {    
   background-color: #00cc33;    
   border-bottom: 1px solid #009933;    
   color: #ffff; }    
#navbar li li a:hover {    
   background-color: #009933; }    
   #navbar li ul li {    
                font-size:14px;       
   }    
</style>    
    
<script>    
// Javascript originally by Patrick Griffiths and Dan Webb.    
// http://htmldog.com/articles/suckerfish/dropdowns/    
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);    
</script>    
    
</head>    
<body>    
   <div id="wrap">    
      <ul id="navbar">    
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->    
         <li><a href="#">Main</a>    
         </li>    
         <li><a href="#">Home Users</a><ul>    
               <li><a href="#">Service and Repair Options</a></li><li>    
                    <a href="#">Do It Yourself (DIY)</a></li><li> 
                    <a href="#">Customer Rewards/Referrals</a></li> 
                    <a href="#">PC Wellness Center</a></li> 
                    <a href="#">Start Remote Assistance</a></li></ul>    
         </li>    
         <li><a href="#">Small Business</a></li><ul>    
               <li><a href="#">Service and Repair Options</a></li><li>    
                    <a href="#">Business Case Studies</a></li></ul>    
            <li><a href="#">Store</a><ul>    
               <li><a href="#">Online Shopping Center</a></li></ul>      
            <li><a href="#">Why Choose Us</a><ul>    
               <li><a href="#">Customer Reviews</a></li>    
               <a href="#">Business Case Studies</a></li></ul>      
            <li><a href="#">Games</a><ul>    
               <li><a href="#">BattleMechs</a></li><li>    
               <a href="#">Empire of the Galadur</a></li><li>    
               <a href="#">Airport Madness 2</a></li></ul> 
         </li>    
      </ul>    
   </div>    
    
</body>    
</html>

Open in new window

0
 
LVL 9

Accepted Solution

by:
exalkonium earned 2000 total points
ID: 30052558
Maybe this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>  
<style>  
/* These styles just pretty up the page a bit. */  
body {  
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;  
   background-color: #eee; }  
#wrap {  
   font-size: 18px;  
   /*width: 858px; */ 
   padding: 50px;  
   margin: 0;   
   position: absolute;
   left:-50px;
   top:-50px;
   overflow:visible;
}  
  
/* These styles create the dropdown menus. */  
#navbar {  
   margin: 0;  
   padding: 50;  
   height: 1.5em; }  
#navbar li {  
   list-style: none;  
   float: left;
   clear:both;
   width:250px;
}
#navbar li a {  
   display: block;  
   padding: 3px 20px;  
   background-color: #006600;
   color: #fff;  
   text-decoration: none; }  
#navbar li ul {  
   display: none;   
   width: 10em; /* Width to help Opera out */  
  /* background-color: #009933;*/}  
#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:160px;
}  
#navbar li:hover li, #navbar li.hover li {  
   float: none; }  
#navbar li:hover li a, #navbar li.hover li a {  
   background-color:transparent;
   border-bottom: 1px solid #009933;  
   color: #000; }  
#navbar li li a:hover {  
   /*background-color: #009933;*/ }  
   #navbar li ul li {
	   background-color:#009933;
                font-size:12px;
   }
   #navbar li ul li:hover {
	   background-color:#33FF33;
                font-size:12px;
   }
</style>  
  
<script>  
// Javascript originally by Patrick Griffiths and Dan Webb.  
// http://htmldog.com/articles/suckerfish/dropdowns/  
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);  
</script>  
  
</head>  
<body>  
   <div id="wrap">  
            <ul id="navbar">  
                <!-- The strange spacing herein prevents an IE6 whitespace bug. -->  
                <li><a href="#">Main</a></li>  
                <li><a href="#">Home Users</a>
                    <ul>  
                        <li><a href="#">Service and Repair Options</a></li>
                        <li><a href="#">Do It Yourself (DIY)</a></li>
                        <li><a href="#">Customer Rewards/Referrals</a></li>
                        <li><a href="#">PC Wellness Center</a></li>
                        <li><a href="#">Start Remote Assistance</a></li>
                    </ul>  
                </li>  
                <li><a href="#">Small Business</a>
                	<ul>  
                		<li><a href="#">Service and Repair Options</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Store</a>
                	<ul>  
                		<li><a href="#">Online Shopping Center</a></li>
                    </ul>
                </li>
                <li><a href="#">Why Choose Us</a>
                	<ul>  
                		<li><a href="#">Customer Reviews</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Games</a>
                    <ul>  
                        <li><a href="#">BattleMechs</a></li>
                        <li><a href="#">Empire of the Galadur</a></li>
                        <li><a href="#">Airport Madness 2</a></li>
                    </ul>
                </li>  
            </ul>  
   </div>  
  
</body>  
</html>

Open in new window

0
 
LVL 9

Author Comment

by:samiam41
ID: 30052625
Thanks exalkonium:.  Testing your last suggestion now.  I found what I was trying to do!

http://www.cssplay.co.uk/menus/flyoutt.html

0
 
LVL 9

Expert Comment

by:exalkonium
ID: 30052645
Yup, seems flux0red. Try the one I just posted.
0
 
LVL 9

Author Comment

by:samiam41
ID: 30052836
I don't see any highlights (mouse over affects) now and menus overlap.
web.example.v1.2.JPG
0
 
LVL 9

Expert Comment

by:exalkonium
ID: 30053100
Funny, mine works perfect. What browser are you using, and are you copying and pasting my code entirely as is or just parts of it?
0
 
LVL 9

Author Comment

by:samiam41
ID: 30053272
:- )

I am copy/pasting your code straight into the html box.  Completely removing what ever was there prior and then putting in your suggested code.  Using IE8...  
0
 
LVL 9

Author Comment

by:samiam41
ID: 30053467
Heading out until I can work from home later this evening.  Thanks for all of your help.  I'm sure it isn't easy trying to figure out what my genius powers created.  lol!

0
 
LVL 9

Author Closing Comment

by:samiam41
ID: 31711983
Great work as always!  It's been great working with you and appreciate your patience explaining what needs to go where and why.  

Take care,
Aaron
0
 
LVL 9

Author Comment

by:samiam41
ID: 30218789
I appreciate your help with the previous questions.  I ended up going back to the horizontal nav bar and submitted a new question on how to add gifs to the page options on the top level.  If you are interested, here is the link.  Thanks again.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25787426.html?fromWizard=true
0
 
LVL 9

Author Comment

by:samiam41
ID: 30228780
Just posted a new question which should be a little easier then my previous ones.  If you get a chance, here it is.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25789093.html
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Custom Android App Development is the need of an hour for several businesses. If you go through the right firm for Android Application Development, it can make a huge difference to the ways in which customers interact with your business.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

611 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question