Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I know this should be in the tutorial section but there's a lot of cobwebs in that part of the forum!

    I just wanted to post a bare bones navigation with hover effect for those of you who don't know how. I see a lot of navbars that have way too much code for what they do. So this is pretty srtipped down and can be enhanced, but it really doesn't need much else.

    Notice how little markup is required to render this, not very much css either. Just copy and paste this whole code in a blank doc.

    View Example

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    
    #navbar {
        background-color: #663399;  /* #navbar div is a wrapper for the ul list*/
        height: 30px;
    }
    
    #navbar  ul {
        margin: 0; /* Changing the margin here will require 
                      changing the #navbar height to grow with the ul*/
    }
    
    #navbar li {
        float:left; /* This will put the li's in a row*/
        list-style-type: none; /* This removes the bullet*/
    }
    
    #navbar li a /* This is the nuts and bolts of the area surrounding your text links*/
    {
        text-decoration: none;  
        color: #FFFFFF; 
        width: 100px;
        padding: 5px;
        text-align: center;
        display: block; /* This is what allows for using the text links to act as a box*/
    }
    
    #navbar li a:hover {
        background-color: #9999CC;
        text-decoration: none;
    }
    
    
    
    
    </style>
    </head>
    
    <body>
    
    <!--Start NavBar-->
    
    <div id="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
      
    <!--End NavBar-->  
    
    
    </body>
    </html>
    This should be a great way to learn ul navigation by changing some parameters and examine what happens when you do. Enjoy!

    p.s. I will post one for a vertical menu too, Just need to change a couple of things.:-)



    ----------------------------------------------------------------------------------

    Here's a vertical one. A little different and a tad more complex but again, play with it and watch what happens.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    
    
    #navcontainer {
        background-color:#5681C6;
        padding-top: 10px;
        width: 142px;
    }
    
    #navcontainer ul
    {
        margin-left: 1px;
        list-style-type: none;
        margin-top: 0px;
        padding-left: 0px;
    }
    
    
    #navcontainer a
    {
        display: block;
        padding: 7px;
        width: 125px;
        background-color: #5681C6;
    }
    
    
    #navcontainer a:link, #navcontainer a:visited
    {
        color: #FFFFFF;
        text-decoration: none;
    }
    
    #navcontainer a:hover
    {
        background-color: #FFFFFF;
        color: #212C4A;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="#">Home</a></li>
    <li><a href="#">Programs</a></li>
    <li><a href="#">Kits</a></li>
    <li><a href="#">Weight/Pricing</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    
    </div>
    </body>
    </html>

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    So sorry guys, I forgot to put links to the examples so you could view them. They are in the previous post now. Man I hate being dumb.

  4. #3
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Thanks Aero - I agree that this is really needed here.

    CSS is da bom - look what you can do with so little code!

    Mind if I post one of my own?

  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, I just quickly whipped this vertical list up, just to show another example. This one doesn't require too much code either, and has what I call 'separators'. Quite nice, and I've seen it on some sites around the net. It's not the best, but I didn't design it to be attractive, just to show you the concept. It's fully XHTML and CSS W3C complient. And it works in FF3, IE7 and Chrome. (they're all the one's I tested).

    View Example

    All the code required to produce the example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <title>Vertical Navbar (with separators) example</title>
    <style type="text/css">
    div#navcontainer
    {
    width: 210px;
    clear: both;
    }
    div#navcontainer div.section
    {
    width: 200px;
    border: 1px solid #339900;
    }
    div#navcontainer span.head
    {
    font-family: arial;
    color: #ffffff;
    font-size: 16px;
    background: #339900;
    padding: 3px 2px 3px 2px;
    display: block;
    }
    div#navcontainer ul 
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    div#navcontainer a:link, div#navcontainer a:visited, div#navcontainer a:active
    {
    font-family: arial;
    color: #339900;
    font-size: 12px;
    text-decoration: none;
    padding: 2px 2px 2px 4px;
    border-bottom: 1px solid #33cc33;
    display: block;
    }
    div#navcontainer a:hover
    {
    font-family: arial;
    color: #ffffff;
    font-size: 12px;
    text-decoration: none;
    padding: 2px 2px 2px 4px;
    border-bottom: 1px solid #339900;
    display: block;
    background: #339900;
    }
    </style>
    </head>
    <body>
    <div id="navcontainer">
        <div class="section">
        <span class="head">Heading</span>
        <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        </ul>
        </div>
        <div class="section">
        <span class="head">Heading</span>
        <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        </ul>
        </div>
    </div>
    </body>
    </html>

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    That's cool, just bare bones so people can see the basic structure. I even left out the font stuff as that can be inherited if it's not going to be different.

    I have one with rollover bg images too, but I don't know if people are interested enough to bother posting!

  7. #6
    Member Breezy's Avatar
    Join Date
    Sep 2009
    Posts
    51
    Member #
    19824
    Good to see people lookin' out... so much temptation in this biz to just be a hater
    Utah Web Design { Pimpin(it); } - ENJOY yo-self


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:41 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com