Nav bars - tables vs lists

AusQB

AusQB

New Member
Is there any advantage to using lists over tables (or vice-versa) when designing a nav bar?

I typically just use tables, although I have used lists for drop down menus. Are lists just simpler to use because they don't have all those things like padding and spacing to worry about?


Also, about nav bars in general, how do I implement a "current" class to denote which nav button is currently active (ie. the corresponding page is open)? This is sort of venturing into PHP I suspect.
 
conor

conor

New Member
Lists all the way. The rule I try my best to live by is "Tables for presentation not layout". Trust me you will find it much easier once you learn how to use lists. They are way easier to make cross browser compatible as well.

For the current thing I recommend using jQuery not PHP.. It is possible with PHP but it would be easier with jQuery. Try out this example that I found online, it will add the class 'current' to every link that has the same destination as the destination you are in.

Code: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    var thisUrl = window.location.href;
    var i = thisUrl.indexOf('?');
    if(i >= 0){
     thisUrl = thisUrl.substring(0,i);
    }
    $('#list li a').each(function(){
      if(this.href == thisUrl){
        $(this.parentNode).addClass('current');
      }
    });
  });
</script>
<ul id="list">
  <li><a href="index.php" id="page1">Page One</a></li>
  <li><a href="about.php" id="page2">Page Two</a></li>
  <li><a href="test.php" id="page3">Page Three</a></li>
  <li><a href="contact.php" id="page4">Page Four</a></li>
</ul>
 
AusQB

AusQB

New Member
I'm having trouble converting a single row table into a list. I can't seem to use the images in the list items (is that possible?).

Also, how do I stretch the list out like the table does?

Here is my code:

Code: 
<div id="navbar">
<ul>
	<li id="homebutton"><a href="index.php">HOME</a></li>
	<li id="servicesbutton"><a href="services.php">SERVICES</a></li>
	<li id="portfoliobutton"><a href="portfolio.php">PORTFOLIO</a></li>
	<li id="aboutbutton"><a href="about.php">ABOUT</a></li>
	<li id="contactbutton"><a href="contact.php">CONTACT</a></li>
	<li id="forumbutton"><a href="/forum">FORUM</a></li>
</ul>
</div>

Code: 
#navbar {
	background: #000000;
	height: 50px;
	width: 100%;
}

#navbar ul {
	white-space: nowrap;
	width: 100%;
}

#navbar li {
	display: inline;
	list-style-type: none;
	width: 140px;
}

#homebutton {
	background: url('../images/b_home.png') no-repeat center bottom;
}


#servicesbutton {
	background: url('../images/b_services.png') no-repeat center bottom;
}


#portfoliobutton {
	background: url('../images/b_portfolio.png') no-repeat center bottom;
}


#aboutbutton {
	background: url('../images/b_about.png') no-repeat center bottom;
}


#contactbutton {
	background: url('../images/b_contact.png') no-repeat center bottom;
}

#forumbutton {
	background: url('../images/b_forum.png') no-repeat center bottom;
}


Each of those images is 140px wide.
 
conor

conor

New Member
If you do this it gets rid of a div:

Code: 
<ul id="navbar"><!-- list in here --></ul>

This also tidies up your CSS:

Code: 
ul#navbar{
	background:#000;
	height:50px;
	width:100%;
	white-space:nowrap;
	list-style-type:none;
}
ul#navbar li {
	display:inline;
	width:140px;
}

That code seems valid (unless i'm missing something!) for what you want it to do. If you want the li items to be bigger then just add padding to it. It should be working - just make sure that your images are in the right directory. If you use firebug then you can check.
 
V

Vanish Design

New Member
AusQB I have a pretty simple way of doing an "on-state" that'll tell you which page you're on. Works easily on a small site. Set a class on the body and set a different ID for each <a> in the navigation.

So you have:
Code: 
<body class="home">
<ul>
<li><a href="/" id="homeLink">Home Page</a></li>
<li><a href="page2.html" id="page2Link">Page 2</a></li>
</ul>
</body>

Then set the CSS
Code: 
.home #homeLink, .page2 #page2Link
{background-color: red;}

Doesn't disable the link, but does provide the onstate, and can use the same CSS property for every one.
 
You must log in or register to reply here.
Top