Simple Horizontal Menu Bar 960 pixels

I was playing in Dreamweaver today trying to put together a simple menu bar using background images of the sand of the Oregon Coast.  I was looking for a menu bar that stretched to 960 pixels and filled my entire page.  This Menu Bar supports 6 links, but more can be added by coding extra columns and playing with the width to make it fit your needs.

One problem with this menu bar is I've created and saved the images with text included, so unless you are using it for the same purpose, you will need to include your own images w/ text to replace mine.  Simply swap the following highlight with your own image url.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TqN87UwAWkHOYwkNMTrferBQxGIqcee7F_gO949tT9Xwm_fxgza9oCwzsHl_rcHX-pPDHOYX8UwAYIO36DxDu5Y1a-DAKCWlGGzHaeOgUfWZF-IxXKPbfEO4W9qNUk1grjMLfcFyQ-QM/


For a 6 link menu bar to fit into 960 pixels, with no border, each image needs to be 120 pixels.  The height is up to you, as the table height can be adjusted to accommodate.

In the below code, the link html code is set for my pages, so please remember to change the location you want your images to link to.





To use, simply go into your Blogger widgets, choose the Javascript and leave out the title.

Paste this code:

<table width="960" height="48" border="0" cellpadding="0"> <tr> <td width="280" height="42"><a href="http://nattydog.blogspot.com/p/portfolio.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0EZVQrpx5E70ky29pkwcFuPn4HjnK0rAzobkL-deW0Utij75l1njpskJtaYZZuTdmVI35S5jgZXLSvhs-PvyXQMbo7AP84zF8EWxiuag2-Plq3V7XMq0YaZ_f3cDCtJxtr3BF00qz3Cj/&quot;" width="160" height="40" border="0" /></a></td> <td width="280"><a href="http://nattydog.blogspot.com/p/vision.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TqN87UwAWkHOYwkNMTrferBQxGIqcee7F_gO949tT9Xwm_fxgza9oCwzsHl_rcHX-pPDHOYX8UwAYIO36DxDu5Y1a-DAKCWlGGzHaeOgUfWZF-IxXKPbfEO4W9qNUk1grjMLfcFyQ-QM/" width="160" height="40" border="0" /></a></td> <td width="292"><a href="http://nattydog.blogspot.com/p/our-history.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWr4zuuviyuiTeATKbphar5RB1tGdkAcNGBWUNan9XPCI2Lxnrr1sV6k4SeH9juj5NViDpkbYunIWFPCQCsS47p_c3z6RJR8F6f3jPhqKmnMKUMPGjxZVqIgQeM7rPsxfok71k6RsH61b/" width="160" height="40" border="0" /></a></td> <td width="292"><a href="http://nattydog.blogspot.com/p/contact-us.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsvbn9RLsOT-1Dp9AsXKZvPVb3AgoqA8IwJkqGW9rl36ZtWJZFs9XYGrU1enhKFUjz_W3OEYwkD-wRXeLIh1i0YBnmR4URAjnUpSozcnsAjcaldQfH7SI5CD7_T0zrDEZ1O19B2NySBUu/" width="160" height="40" border="0" /></a></td> <td width="292"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiX3u3-6H_J9E0pdI3PlkO2rCzconVn9t7grrNpym2OqYWEVKV3iGbR3ym1OV_s-v6XSW2zp6QHmq59IIiNq1-8E9XVWFI9HBEgWvgoRu2TBF7sz65ufq9Tq3YlgyuwKYswIfUtcPaRe4K/" width="160" height="40" /></td> <td width="292"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiX3u3-6H_J9E0pdI3PlkO2rCzconVn9t7grrNpym2OqYWEVKV3iGbR3ym1OV_s-v6XSW2zp6QHmq59IIiNq1-8E9XVWFI9HBEgWvgoRu2TBF7sz65ufq9Tq3YlgyuwKYswIfUtcPaRe4K/" width="160" height="40" /></td> </tr> </table>



When you are finished please make sure the menu bar fits your page, if not, you can adjust the width in the coding. Replace my images with your own, and change the links. You are done.