Creating list based navigation bars with CSS

"At last" they cry, "more technical content!" Something a little straight-forward this time I think. Lets have a look at how to create nice navigation bars on websites. For this we'll be using a bit of HTML and a sprinkling of CSS.

Now we all remember nav bars that looked like this:

Item 1
Item 2
Item 3

Yuck! So how is a list going to help this you may ask? Surely it's going to look just as bad if not worse, something like this maybe:

• Item 1
• Item 2
• Item 3

Argh, my eyes my beautifuls eyes. Right enough messing about, sorry. All this list needs is some careful styling, lets start by having a gander at the html used above:

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

Ok, lets put a <div> around that and give it an ID.

<div id="navbar">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>

Right now we can fiddle about with the navbar div to our heart's content in the CSS. I won't bother with the actual div CSS itself beyond a width just put in for example because I've no idea where you want to put it or anything so lets go straight in an modify those list styles:

#navbar {
width: 150;
}

#navbar ul {
margin: 0;
padding: 0;
}

#navbar ul li {
list-style: none; /* gets rid of the bullet points */
}

#navbar ul li a {
text-decoration: none; /* gets rid of underlines */
width: 150px;
background-color: #eee; /*a very light grey*/
}

Due to the aparent limitations of this blogging interface and WYSINRWYG (What You See Is Not Really What You Get) I don't seem to be able to display this here which is a pity (God knows I've just spent the last hour trying to). But never mind go to this link to see it in action

One final addition of note: to change something when the user mouses over the navbar item do the following


#navbar ul li a:hover {
text-decoration: underline;
background-color: #ccc;
}

that will underline the text and make the box a darker grey when the mouse point moves over it.

Notes
A couple of extra's I've picked up on my way round, this method seems all the more effective if you name the anchor so <a id="nbar" etc then in the css you can refer to something like #navbar ul li a#nbar.
Iceweasel under debian seems to like having <br /> tags after the list element... no idea why
For horizontal navigation bars just include the property display: inline; in the css.

have lots of fun and if you get totally lost, try w3schools, it's got shed loads of useful info.

Ajax Autocomplete

As a first technical post this is an ideal candidate as it took me bleedin' ages to get sorted out - so here goes.

The purpose behind this exercise is to try and make a form input text field on your webpage come up with auto-complete suggestions based on items already in the database in question. Okay lets start right at the very very beginning:

1. Go and get the scriptaculous scripts, download them to your computer and unzip them. Have a look through the folder you just unzipped, there should be a subdirectory called src with a bunch of .js files in it. Got it? Good! Bung controls.js and effects.js in the directory you are keeping your scripts in (for our example we'll call it scripts/).

2. Now you want to go and get prototype, and chuck the script prototype.js in the same location as the other two you just got.

3. Now then, in the header of your html file where the input text field appears you want to link the scripts you just got, something like this:

<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/effects.js" type="text/javascript"></script>
<script src="scripts/controls.js" type="text/javascript"></script>

Make sure you include them in this order or they'll get upset.

4. In the same file go and find your input field. It might look like this to begin with:

<input name="rodent" type="text" />

We need to add an id attribute to the field as this is what the autocompleter looks at.

<input name="rodent" id="rdnt" type="text" />

5. Next job is to add in a div underneath the input tag to take the results, something nice and simple:

<div id="autocomplete">

6. Last but no means least for this file, create a new autocomplete object:

<script language="JavaScript">

new Ajax.Autocompleter("rdnt", "autocomplete", "auto_comp.php", {frequency: 0.1});

</script>

A bit of explanation here: there parameters passed are 1. the input id, 2. the div id, 3. a php file that returns a <ul> list of database results and 4. I like frequency 0.1 (seconds) as it seems pretty smooth - for big databases this might be a bit too much strain.

7. Ok now well visit the php. This is quite simple to do: imagine we have a database table with an id and name of a small furry animal. We want to return autocomplete suggestions based on what's been typed i.e. if someone types a "b" into the input box above we want to see entries like "badger" and "beaver" pop up. Note that the value currently in the text box will be passed via the $_POST['<input name>'] variable. Something like the following should do the job:

<ul>
<?php
$text = mysql_escape_string($_POST['rodent']);
$sql = "SELECT * FROM rodents WHERE name LIKE '".$text."%' GROUP BY name"
$result = mysql_query($sql)
while ($row = mysql_fetch_array($result)) {
echo '<li id="ac_items">'.$row['name'].'</li>'
} ?>
</ul>

Nothing exciting just returning an unordered list of the query returns.
This should now be working (touch wood) but probably doesn't look very special. It's time to go and visit the css - this is up to you how you do it - I would recommend setting list-style: none and padding-left: 0 in div.autocomplete ul li {}, change the cursor for the li elements and probably include a mouse over colour too so it's ovbious the elements of the list do something.

I've skipped a good deal in this little post but there's a fantastic wiki for all the script.aculo.us scripts and many other points and examples to be found through google.

Good Luck