Double Bar Menu
3. Stylesheet
Join the Discussion
More of this Feature
With an operational navigation menu in our page, the next step in making it into a double bar menu is to apply some styles to the menu in order to make the entries actually appear as a bar across the page.
To do this the first step is to copy the following stylesheet code and save it as bmenu.css.
#nav ul {margin:0; padding:0;list-style: none;
position:absolute; border: 1px solid #ccc;
background-color:#99f; width:100%;}
#nav li {float: left; width: 10em; height:1.2em;}
#nav li a {color:#fff; text-decoration:none;}
#nav div {position:relative; top:1.3em; height:2em;}
#nav div ul {display:none;}
Next you need to modify this code so the menu looks the way you want. Those things that you can safely change are the border, background-color, color, and the width of the li. You should leave the rest of the code alone or the manu will not display properly as a bar across the page.
To apply this stylesheet to the menu we link it into the head of our web page.
Our menu should now appear as a single bar across the page with a gap under it. The entries should be functional to take people to the pages that you want them to see if they have JavaScript disabled.
Of course if they do have JavaScript then we want the menu to function differently with the links on this menu bar determining which second bar to display below it. To achieve this we need to add the JavaScript.
