Skip navigation

Currently Being Moderated

The easiest way of creating SEO friendly dynamic menu

Mar 28, 2012 9:42 PM

Business Catalyst offers few menu types, but the best type to use is the one that produces clean code, which is good for SEO, and that is HTML Only menu type.You can achieve the same result with dynamic menu V2, but it's a bit harder to understand so we'll stick to V1.

 

In this document we'll use suckerfish CSS to get that dynamic dropdown effect.

 

These are steps you need to take:

 

Step 1. Go to Menus links and create a new menu. From the Menu Type dropdown choose "CSS (HTML Only)", then click Next and create your menu items, such as "Contact Us", "About" and whatever else.

 

Step 2. Insert the menu module into your template, publish the template and look at the page which uses that template on the front end.

 

Step 3. While looking at the page, you either need to use Firebug or View Source Code and find the code that looks like this:

 

<div id="cat_641383_divs">
     <ul id="nav_641383">
          <li>
               <a href="/Home.htm">Home</a>
          </li>
          <li>
               <a href="/_catalog/Books">Online Shop</a>
          </li>
...

 

The IDs on the div and ul will look different in your case. The items will also be differently named and have different URLs, but the code structure should be the same.

 

Step 4. Download the file called "htmlonlymenu.css", which is attached to this document and open it in your favourite text editor. I use SublimeText 2. Try it and you'll love it. Once you open the file use Find and Replace functionality to replace all instances of "#nav_641383" with the ID aattached to ul in Step 3. In this document it's shown as "nav_641383" but in your case it will probably be different.

 

Step 5. Save the css file, upload it to your site, perhaps your /css/ folder and link the file to your template. The link would look like this:

 

 

<link rel="stylesheet" href="/css/htmlonlymenu.css" media="screen,projection" type="text/css">

 

 

That's all there is to it. You will have a functioning dynamic menu where if you move over the parent menu, which has sub-menus, the submenus will come up like this:

 

htmlonlyexample.jpg

 

Now it's just a matter of styling the the colors, font, widths and the rest, but you have a clean, SEO Friendly, CSS menu.

 

Enjoy!

Attachments:
 
Comments (5)