When we read about seo friendly website, we always read recommendations about using plain text menus rather than using images in menu and to avoid JavaScript menu, but using dynamic - JavaScript menu is a necessity for some websites, especially those with a lot of categories where it is hard to get all the important part of the menu in a text menu.
- For those website fully CSS drop down menu or optimized JavaScript CSS menu may do the job for them and keep the navigation search engine friendly. The question now is how to indemnify that a site is using Java script menu, best way to check that is analyzing the source code of the menu and most likely you will see some thing like:
onmouseover=”MM_swapImage()” onmouseout=”MM_swapImgRestore()”
In this case the content of the menu is stored in external JavaScript function reside out site the body code with JavaScript format like:
mm_menu.addMenuItem(”News”,”location=’page.php’”);
Many spiders will not be able to read this format, or at least they will have difficulty to read it, CSS menus are the best solution for that or mixed seo friendly CSS-JavaScript
CSS menu
It is easy to identify CSS menu by viewing the source code and you will see something like this:
Pure CSS Dynamic Menu
<div id=”midlink”>
<ul id=”main_menu”>
<li><a accesskey=”A” href=”../menu/index.html” mce_href=”../menu/index.html”>Demos</a></li>
<li><a class=”chosen” accesskey=”M” href=”../menus/index.html” mce_href=”../menus/index.html”>Menus</a></li>
<li><a accesskey=”Y” href=”../layouts/index.html” mce_href=”../layouts/index.html”>Layouts</a></li>
<li><a accesskey=”B” href=”../boxes/index.html” mce_href=”../boxes/index.html”>Boxes</a></li>
<li><a accesskey=”Z” href=”../mozilla/index.html” mce_href=”../mozilla/index.html”>Mozilla</a></li>
<li><a accesskey=”E” href=”../ie/index.html” mce_href=”../ie/index.html”>Explorer</a></li>
<li><a accesskey=”O” href=”../opacity/index.html” mce_href=”../opacity/index.html”>Opacity</a></li></ul>
</div>
All links included within HTML code the spider will easily go through them, you will not see any interfere from JavaScript
Mixed CSS-JavaScript
Search engine friendly JavaScript menu, if you check the source code you will see
<div class=”chromestyle” id=”chromemenu”>
<div id=”dropmenu2″ class=”dropmenudiv” style=”width: 150px;”>
<a href=”http://www.cnn.com/”>CNN</a>
<a href=”http://www.msnbc.com”>MSNBC</a>
<a href=”http://news.bbc.co.uk”>BBC News</a>
</div>
<script type=”text/javascript”>
cssdropdown.startchrome(”chromemenu”)
</script>
The upper piece of code is plain HTML the class “chromestyle” function to form the drop down menu, this smart way kept the menu search engine friendly as the links still shown in HTML format controlled by CSS
The second piece of code is the JavaScript function that will called by CSS
