Optimized Dropdown Menus

By using Optimized Dropdown Menus Widget, you’ll be able to create dropdown menus that are searchable or “spiderable” by search engine bots.

So how does it work?

Basically, it works like this:

The menu’s markup code is being printed as an ordinary nested menu. e.g.

<ul>
    <li><a href="http://example.com/page">Some Random Page</a></li>
    <li><a href="http://example.com/page-another">Another Page</a></li>
    <li><a href="http://example.com/yao">Yet Another One</a></li>
</ul>

Since most browsers support JavaScript, using the widget, the markup would be translated into something like this

<select>
    <option value="http://example.com/page">Some Random Page</option>
    ...
    <option value="http://example.com/page">Something else</option>
</select>

The tricky part here is, that search engines do not usually interpret JavaScript, all they will be able to scan is the nested menu. That way they will reach out for those pages, and most probably will crawl those pages as well.

ODM also supports a range of per-widget settings:

  • Control whether links will be open in new window or in the same window
  • Choose to use HTML5/XHTML markup for the menu

Features set for the next versions

Soon there will be an option for developers to use the same functionality via the code. e.g.

<?php optimized_dropdown_menu( $menu_args ); ?>

Translations

Currently, these translations are available:

Download

Latest version: Download Optimized Dropdown Menus v1.2.2 [zip]

Installation

Install Optimized Dropdown Menus in 3 easy steps

  1. Upload the plugin folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to Appearance > Widgets and drag the widget (“Optimized Dropdown Menu”) to any sidebar you wish

FAQ

Q. How do I add a menu?
A. First you should set up a menu before you attempt to use the widget. In order to do that, go to Appearance > Menus and create a new menu. When you’re finished creating and saving the new menu, go back to Appearance > Widgets and select the appropriate menu.

Changelog

1.2.2

  • New! Added support for opening links in new window. Proposed by Kari S.

1.2.1

1.2

  • Optimized Dropdown Menus is now translation-ready

1.1

  • Fixed bug where the menu was rendered, but the “Go” button was not responding. props Graham W.
  • Codebase improved, now wrapped in a class

1.0

  • Initial release.

3 Comments

  1. Is it possible to set the dropdown box to load the URL without the “go” button? If not is it possible to use the button css for my theme for consistency?

    Many thanks in advance.

    Reply

    1. Hi Gavin,
      Thanks for your comment!
      Right now we don’t support not having the “Go” button, although this is a rather good idea.
      I might actually implement this soon.
      But, to your question, you can freely use CSS to customize the said button. Many themes have pre-built CSS rules for “button” and “input” HTML elements, so in which case you don’t have to do much to make it work and look okay.
      Good luck!

      Reply

  2. Hi Maor

    I have implemented your plugin on my site thank you. I was would like to make the “Go” button in the same style as my other button’s on my site. Happy to use just an image rather than set website css if that makes it easier.

    Would this be possible? If so which part of your code do I need to update?

    Thanks in advance.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">