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