Multiple navigation bar

In the previous tutorial,I've showed how to create a navigation bar. However you may find that a navigation bar is not enough. Normally,a website consist at least two navigation bar, one at the top(or side), and the other one at the bottom.

Now,I'm gonna show a cleaner code on how to create multiple navigation bars. You will need this to make money online.


As usual,go to Layout > Edit HTML
Then paste the navbar class(.navbar) code where similar code is written.

.navbar li{
background: #00BFFF;
margin:0 65px 0 65px;
text-align:center;
font-size:100%;
font-style:italic;
font-family:Times;
font-weight:bold;
display:inline;
}

.navbar li a{color:#7E587E;}
.navbar li a:visited {color: #7E587E;}
.navbar li a:hover {color: #B93B8F;}

Then add on the unique id(#topnavbar,#footnavbar) to the code above,

#topnavbar{
text-align:center;
margin:0px;
background:#00BFFF;

}

#footnavbar{
text-align:center;
background:#FFFFFF;
}
#footnavbar li{
background:#FFFFFF;
font-size:10px;
font-style:normal;
}

Finally,You can now add 2 widget of HTML/Javascript to install these navbars.

<div id="topnavbar" class="navbar"><ul> <li><a href="http://moneytut.blogspot.com/2000/11/freebies-get-for-free.html">Freebies</a></li>
<li><a href="http://moneytut.blogspot.com/2009/10/list-of-money-program-you-might.html">money program</a></li>
</ul></div>

<div id="footnavbar" class="navbar"><ul> <li><a href="http://moneytut.blogspot.com/2009/11/exchange-links.html">Exchange Links</a></li><li><a href="mailto: davidng777@gmail.com">Contact US</a></li>
</ul></div>

Just in case you don't have the right place to place the widget,
I'll show you my code,use CTRL+F to find the right place,

             。
             。
             。



 

What you gonna do is changing showaddelement into 'yes', then you have the right place to add your widget! Happy designing to keep your fellow customer—in order to make money online.


How it works
The #topnavbar stands for unique id which can override class(.navbar);
if the data is declared twice, then the declaration of id will work. For example,background in "#footnavbar li" override background in ".navbar li".

While in the HTML/Javascript widget, in <div> id='topnavbar class='navbar', id should put the id of the navbar you declared with '#', while class should put the class of the navbar you declared with '.' .