adv banner
Horizontal Navigation Bar
by Ghostbone.com
Navigation Boxes
by Imusion
Tabbed Navigation
by Ghost
Creating a Navigation Bar with CSS
by Janine Warner
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Navigation Menu
rss

Navigation Menu

Author: Andy More by this author

Added: June 12, 2006 Rating:  Average Rating: 2.75 Votes: 44 Position: 10230 of 12768Average Rating: 2.75 Votes: 44 Position: 10230 of 12768Average Rating: 2.75 Votes: 44 Position: 10230 of 12768Average Rating: 2.75 Votes: 44 Position: 10230 of 12768Average Rating: 2.75 Votes: 44 Position: 10230 of 12768 Level: Beginner Software:  Dreamweaver

Navigation MenuThis is simply going to teach you how to do your navigation like the one from our site.

Ok, first i will tell you what's going on, and why and where I'm adding stuff. Then, the final code will be displayed at the end. If we just start with a simple table... with 2 rows (tr)

<table>
    <tr>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
    </tr>
</table>

Ok, Lets add out links and our widths to the tables

<table>
    <tr>
        <td width="250px"><a href="http://www.google.com" target="_blank">Yahoo</a> </td>
    </tr>
    <tr>
        <td width="250px"><a href="http://www.google.com" target="_blank">Google</a></td>
    </tr>
</table>

Now, for the next part... the onmouseover basically means what happens when you put your mouse over the TD.. and the onmouseout means what happens when you hover out of the TD. this.style.backgroundColor is just saying what colour to display, in this case... we have #BADAEA, #DBDBDB and #C0C0C0

The final script being...

<table>
   <tr>
      <td width="250px" onMouseOver="this.style.backgroundColor='#BADAEA';" onMouseOut="this. style.backgroundColor='';" bgcolor="#C0C0C0"><a href="http://www.google.com" target="_blank">Yahoo</a></td>
   </tr>
   <tr>
      <td width="250px" onMouseOver="this.style.backgroundColor='#BADAEA';" onMouseOut="this. style.backgroundColor='';" bgcolor="#DBDBDB"><a href="http://www.google.com" target="_blank">Google</a></td>
   </tr>
</table>

Example



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Navigation Menu"