Often a Website owner decides to dress up their menu display by using button graphics instead of plain text links. Its a great idea to give your navigation more punch, but I recommend you avoid going with image files for your buttons and instead choose a simple CSS (Cascading Style Sheets) layout. Here are reasons:
Graphic files can increase the time it takes your site to load into a browser.
Search engines cannot read images.
CSS, when used properly, will give you far more control without the need for java script.
Using a little bit of CSS, you can create a very nice menu array that your visitors will think are dynamic image files. Copy the URL below, paste it into a browser, and have a look at two sample menus that is build with basic CSS.
http://www.websitecreationcourse.com/css-menu.php
As you can see, these buttons not only look like compact images, they even react when you roll your mouse over them. When you hover over any part of these sample menus you can watch the buttons change color and seem to depress into the page.
Pretty cool huh?
These menus require no heavy java script code that could slow your load time. I simply added a short section to my external style sheet to tell a browser how to display my buttons in terms of size, colors, font style, etc. and then referenced these specs in the HTML document where the menus reside.
In simplest terms this is a two-step process that took all of ten minutes to complete.
And search engine spiders will read the anchor links placed in this sort of menu as direct text linkage. Whats more, you can apply the title= attribute to further enhance your onsite SEO.
Here is the code youll need to add to your external CSS to fly this sort of menu:
.buttonscontainer {width: 120px;}
.buttons a {color: #; border: 1px solid; background-color: #; padding: 0px; padding-left: 0px; font: 12px Arial, sans-serif; font-weight: bold; text-decoration: none; border-color: # # # #; display: block; margin: 3px; width: 100%; text-align: center;}
.buttons a:hover {border: 1px solid; padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; background-color: #; border-color: # # # #; color: #; text-decoration: none;}
Of course you need to edit the color specs above, in addition to changing any borders, margins, etc. as you see fit.
Open your HTML pages and, exactly where you need to define your slick new menu buttons, open two divs with class=”buttonscontainer” and class=”buttons”, add your button text and anchor, and close both divs.
Play around with this coding in your own design scheme. The sample menus I showed you are really only the beginning of what you can do with this foundation.