Home Page
Tell a Friend Ask a Question General Info
Categories
Site Tools
Code Reference
Projects
Page Templates
Articles
IIS Articles
Code Articles
DHTML Articles
CSS & HTML
Friendly Coding
Design and SEO
Various Tests
- Other Projects
- People Counting
- Blooberi Lingerie
- Programming
- Tek-Tips
- SEO
- High Rankings Forum
- I Help You Forum
- Web Design & Development
- Webmaster Talk
- Webmaster Forum
- SearchBliss Forum
- Webmaster Forum UK
- Cascading Style Sheets
- We Love CSS
- CSS Creator Forum
-
Linking Test
DHTML and CSS Menus
DHTML Menus
Interactive DHTML menus can take many forms, although mostly these are drop-down menus, where a mouse hover action will expand a block of links. However in most cases these are entirely created by javascript and therefore are often very poor for usability and accessibility. Search engine crawlers and many accessibility devices are not javascript enabled so these menus are never created on the page. This is also an issue where users may be browsing the internet with javascript disabled so again will never see your site navigation.
Making a drop down menu both usable and SE friendly is not that difficult. It's more a matter of using standard HTML styled with CSS then using javascript to manipulate the CSS properties rather than using javascript to actually create the menu. The important thing is ensure that CSS enabled but javascript disabled user agent can display the menu in some way.
Here it is achieved by having the menu visible initially then when the page is loaded change the CSS to hide the drop down. Operating this way round javascript disabled user agents will never close the menu elements.
Another feature that can be set up using this style of menu is to have the drop down elements scrollable if they are quite long. This is simply a matter of setting a height and then using the CSS overflow property set to auto. With this set up scrollbars will appear whenever the menu content extends beyond the length set for the container element.
