Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


The easiest way of creating SEO friendly dynamic menu

Mentor ,
Mar 28, 2012 Mar 28, 2012

Copy link to clipboard

Copied

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!

TOPICS
Documentation

Views

4.9K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 28, 2012 May 28, 2012

Copy link to clipboard

Copied

Mario,

Thank you for the tutorial. Was able to get it to work after finally getting it through my head to use V1!

Am still trying to figure out how to get the background color of the entire menu bar to display a color the entire width of the page. Any suggestions?

scShaw

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
May 28, 2012 May 28, 2012

Copy link to clipboard

Copied

Hi Rocky,

I have it on this page http://mgtrain.businesscatalyst.com/htmlonly. You can firebug that page and see what I've done there.

Practically, in my CSS I have the following property which sets the background:

div#nav div#placeholder-nav {

background-color:

#4C1B1B;

}

I have wrapped my menu inside <div id="placeholder-nav">

Hope that helps!

Cheers,

mario

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 28, 2012 May 28, 2012

Copy link to clipboard

Copied

Mario,

Thank you. I'll give it a whirl, tomorrow.

sc

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 07, 2012 Aug 07, 2012

Copy link to clipboard

Copied

Great tutorial Mario! I'm a little confused about the dynamic menu V1 and V2 thing. Isn't BC on V3 now? I know how to get to V2 but how do I get to V1?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Aug 08, 2012 Aug 08, 2012

Copy link to clipboard

Copied

Hey Brett,

V1 menu is a preconfigured menu rendered by {module_menu...} which doesn't allow you to make changes to the markup. V2 menu is the one you know where you can access the layouts and control the markup.

As for V3, when you hear that we are actually referring to the admin interface version and not the menu version.

Cheers,

-mario

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 22, 2014 Apr 22, 2014

Copy link to clipboard

Copied

Hi

I have tried to use this to get a different colour sub menu arrow, but it doesnt seem to be working.

I was wondering if someone could help me understand a couple of issues on this page.

http://www.brightonpanelworks.com.au/

The OUR SERVICES and ABOUT US are the dynamic menus in white text just above the car banner image.

.

1. The sub-menu arrow image is NOT appearing for the top level OR sub menu items???

2. The original Business Catalyst sub menu arrow IS appearing for the sub-menu submenu items (eg. OUR SERVICES - SPRAY PAINTING and ABOUT US - VACC MEMBER)??? ... even though I have disabled the sub menu arrow option in the dynamic menu "menu look" section of admin???

Any advice or assistance would be greatly appreciated!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 23, 2014 Apr 23, 2014

Copy link to clipboard

Copied

LATEST

I fixed point 2. Had to uncheck the sub menu indicator for the sub menus! D'oh!

So now only neeed to understand why my background sub-menu arrow as per the css is NOT displaying (ie. point 1. above)

Ive tried going back to the original CSS from above on a test page and it doesnt display the listed sub-menu arrow for that either!!!???

Can anyone help???

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines