How To Add Horizontal LinkList in a Website?

Discussion in 'HTML & Website Design' started by nicelk, Oct 11, 2009.

  1. #1
    I want to add horizontal linkList(navigation bar) into my Website.But I don't know how to do this.Please help me.
     
    nicelk, Oct 11, 2009 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Since a menu is just a list of links that doesn't have to be ordered in any particular sequence, use an unordered list. Then style it (making sure to either remove the margins and padding beforehand via a reset, then adding them when you need to, or set them locally, even if they're to zero). Here's how I tend to go about it.

    
    <ul id="menu">
    	<li><a href="#">Link Text</a></li>
    	<li><a href="#">Link Text</a></li>
    	<li><a href="#">Link Text</a></li>
    	<li><a href="#">Link Text</a></li>
    	<li><a href="#">Link Text</a></li>
    	<li><a href="#">Link Text</a></li>
    </ul>
    
    Code (markup):
    And the CSS:

    
    #menu, #menu * {
    	margin: 0;
    	padding: 0;
    }
    
    #menu {
    	background: /* declare a background color here */ ;
    	color: inherit; /* this is to shut the W3C validator up */
    	height: 2em; /* set a height for the menu */
    	line-height: 2em; /* and then make sure the line height matches the height */
    	overflow: hidden; /* let's contain those floats that will come later */
    }
    	#menu li {
    		float: left;
    		list-item: none;
    	}
    
    	#menu a {
    		display: block;
    		height: 2em; /* same as the height of the menu */
    		padding: 0 0.5em; /* resets the left and right padding so the link is readable */
    		text-decoration: none; /* removes the default underline */
    	}
    
    	#menu a:hover, #menu a:focus, #menu a:active {
    		background: /* maybe you want the background to change on hover? */ ;
    		color: /* and the color too? */ ;
    
    Code (markup):
     
    Dan Schulz, Oct 11, 2009 IP
  3. sunsoftsystem

    sunsoftsystem Peon

    Messages:
    92
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    sunsoftsystem, Oct 11, 2009 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #4
    My code's better. ;) :cool:
     
    Dan Schulz, Oct 11, 2009 IP
  5. nicelk

    nicelk Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    yes, very helpful ...Thanks
     
    nicelk, Oct 11, 2009 IP