Can Drop Down Menus be Search Friendly as well as User Friendly?
One of the popular methods for creating navigation menus for Web pages is using drop down menus. By mousing over any of the buttons of the navigation menu, the user is able to learn about some of the content of the corresponding pages without visiting them first. Some drop down menus are nested two or more levels allowing the user to access sub pages by one click. This makes drop down menus user friendly from Usability point of view. However, most techniques used to create drop down menus involve some sort of scripting (mainly JavaScript) that add behavior to graphical buttons, as shown in this example. Since search engines don’t index JavaScript and most of them can’t follow links embedded in graphics, this makes drop down menus search engine incompatible from an SEO point of view.
Building Drop Down Menus with CSS and Dreamweaver CS3
A more search friendly technique for creating drop down menus is using CSS and HTML. A List Apart published an article showing how to create a horizontal drop down menu using CSS. In this case, the navigation menu is created with HTML as a nested unordered list with all the items created as text links that can be easily indexed by search engines. However, this method can require some coding by the designer. Luckily, Adobe implemented drop down menu widget (called Menu Bar) into their Spry framework for Ajax (which comes with Dreamweaver CS3). As an example, the drop down menu for this Web site was created using Dreamweaver CS3 Vertical Menu Bar (view the Page Source for code details). Since the drop down menu in this case is created with basic HTML tags and styled with CSS tags, this makes them search friendly as well as user friendly.