Skip to main content

Simple HTML and CSS Navigation Bar

  
     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>

Labels:

Comments

Post a Comment

Popular posts from this blog

Batman: Arkham City "Pay Your Respects" Achievement/Trophy Guide

Get some help earning the "Pay Your Respect" achievement/trophy in Batman: Arkham City.  
45 comments
Read more

Rewards1 Offer Walkthroughs (GPT Site Offer Guides)

 This is just a quick reminder, and probably introduction to most. I personally have created what I call an "Official Rewards1 Offer Walkthrough" page on this blog. Just click here to visit the page. On this page you can find a bunch of guides for Rewards1 Offers. Please keep in mind that these offer guides can be used with most GPT sites Most of the guides I have posted are to the high paying offers. For those of you who have not yet created an account and would like to start earning online you can do so by going to Rewards1.com and creating an account. Just click the "Sign-Up" button on the landing page, enter your information on the Sign Up page, and confirm your account through the email address you provided. Once you have confirmed you email, check back here and use our guides to get you earning some more money. In other News, please be so kind to visit our newest blog: Check out DLC4You for an in-depth DLC archive for PS3, Xbox 360, Wii, and more.
27 comments
Read more

Batman: Arkham City Review

     Video game sequels can get a bit dull now-a-days, especially when developers start spewing them out as if they were rendered on a mechanical manufacturing line. Since we, as a gaming community, are exposed quite often to sequels that were "rushed out of the gate", we might be getting ourselves into a terrible dilema. However, there are some sequels that just blow you away. With mind-blowing mechanics, a simply amazing plot, and a noticeable step up from the previous release. Arkham City is sure to completely transform anyone who gets their hands on this game into the Dark Knight. Plot      In the previous release, Batman: Arkham Asylum, the facility on Arkham Island is left in ruins thanks to the menacing Joker's all out plan. In desperate need for a new facility to imprison Gotham's most dangerous thugs, Professor Hugo Strange is elected warden and is given approval to set up a new facility in the slums of Gotham City. In an attempt to ...
1 comment
Read more