• Game Rebels: The site that rewards you for posting
  • Join The Awesome ARK Server!

    Island PVE (Official Rates x2) by Vurh.Club
    Join ARK Server! Join ARK Discord!
  • The Game Shop V2!

    A Complete revamp! Hundreds of FREE games, now available!
    Shop Now!
  • Game Rebels Community

    Welcome to this awesome gaming forum
    Register Now
  • Earn Points to Buy Games!

    The more you post, the more you earn
    Learn More

HTML Navigation Bar

Discussion in 'Coding Tutorials' started by DistanceDesigns, Mar 30, 2014.

  1. DistanceDesigns

    DistanceDesigns New Member

    137
    0.11
    23
    Simple Navigation bar that took me 3-4 mins to make

    Here it is
    Code:
    <!-- CodingTuts Inc, © All Rights Reserved -->
    <!-- Coded by Distance / Chris / HTMLCoding(Pastebin) -->
    <!DOCTYPE html>
    <html>
    <head>
          <title>Home</title>
    </head>
    <nav id="nav">
       <ul>
          <li><a href="index.html">Home</a></li>
    	  <li><a href="about.html">About</a></li>
    	  <li><a href="prices.html">Prices</a></li>
    	  <li><a href="affiliates.html">Affiliates</a></li>
    	  <li><a href="forums/">Forums</a></li>
       </ul>
    </nav>
    <style>
    #nav {
    font-family: helvetica,sans-serif;
    float: left;
    padding: 0;
    background-color: black;
    width: 100%;
    letter-spacing: 5px;
    word-spacing: 70px;
    text-align: center;
    }
    #nav ul {
    padding: 0;
    width: 100%;
    margin: 2px;
    }
    #nav li {
    display: inline;
    }
    #nav a {
    text-decoration: none;
    color: #0696FC;
    }
    #nav a:visited {
    
    }
    #nav a:hover {
    background-color: white;
    }
    #nav a:link, a:active {
    width: 120px;
    font-weight: bold;
    padding: 4px;
    }
    </style>
    
     
  2. Toxique

    Toxique Well-Known Member

    3,910
    1.33
    170
    Good tutorial! Thanks for sharing, +5rep :)
     
  3. TheDerpKing

    TheDerpKing New Member

    63
    0.08
    13
    Pretty good for HTML.