Are you looking for a way to compile all of the pages on your webpage into one simple, yet elegant, menu bar? Lucky you, because I have brought you a very sweet Navigation Bar. Check out the code in the gray box below and try it for yourself on your webpage.
Simple HTML and CSS Navigation Bar
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
ul#menubar {
clear: both;
float: left;
list-style: none;
margin: 16px 10px 10px 10px;
border-bottom:0px solid #333333; /*Remove to create tab effect*/
width:950px; /*If tab effect is not being used, this will define how long the bottom border will be*/
}
ul#menubar li {
display: inline;
list-style: none;
}
ul#menubar li a {
margin-right:0px;
color: #FFFFFF;
display: block;
float:left;
font: 16px/100% Signika;
font-weight: 600;
line-height: 40px;
text-decoration: none;
vertical-align: middle;
padding: 0 10px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKS8aodEakF1XmNWU407e9wNN97kF5_2BsDVCR4p-_Fj8oGgCQrFBwpvy58GrcxxcVRAKpUlq5iAZY4vBtydS1JdK3ZmaeTGU4ZyyYCfcXVabWhfndeqhdpzIsK7xw_1KZugpatWbXfmbd/s1600/navbarnormal2.png);
background-color:#000000; /*A basic background color is set incase the image will not load*/
border:0px solid #333333;
border-bottom:none;
}
ul#menubar li a:link, ul#menu a:active, ul#menu a:visited {
color: #FFFFFF;
}
ul#menubar li a:hover {
border: 0px solid #000000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqA9bCqCuHN_NQIHICUJB3mfAwQeKinlsV1Fmusgy6_VyPQMLgyBOPhpGB8ix2bn2DKBBeGI3ZgRlxJJ3gxvaLp8aiB3R1vnocru7BRvRAOX4VTrP8QgRKeiLi1avB9N22Czxfypbdct28/s1600/navbarover2.png);
color: #;
}
</style>
<ul id="menubar">
<li><a href="http://vgauthority.blogspot.com">HOME</a></li>
<li><a href="http://vgauthority.blogspot.com">BLOGGER TEMPLATES</a></li>
<li><a href="http://vgauthority.blogspot.com">FREE DOWNLOADS</a></li>
<li><a href="http://vgauthority.blogspot.com">GPT GUIDES</a></li>
<li><a href="http://sharecash.org/download.php?file=2204450">MAKE MONEY</a></li>
<li><a href="http://www.youtube.com/M9Timmy">VIDEO CENTER</a></li>
</ul>
Comments
Post a Comment