Blog

Scenerio: I wanted to created a drop down menu with the cmslistmenu instead of the cmsmenu control.  The cmsmenu control works, but the rendered output is a LOT of tables and javascript.  I like to keep my markup as lean as possible. I also wanted to use a cms control so the menu could be built dynamically at runtime based on the cms content structure.

Solution: The solution is actually quite simple and you’ll see that you can cut and paste most of this to work with your project.

1. Drop the <cms:CMSListMenu ID=”CMSListMenu1″ runat=”server” /> control in your markup where you want the menu to be rendered.

2. Updated your css stylesheet for the site.

#CMSListMenu1{margin:0; list-style:none;}
#CMSListMenu1 li.CMSListMenuLI, #CMSListMenu1 li.CMSListMenuHighlightedLI{float:left; font-size:13px; font-weight:bolder; line-height:30px; text-transform:uppercase; padding-right:22px;}
#CMSListMenu1 li.CMSListMenuLI ul{position:absolute; display:none; width:13em; background-color:#000; padding:0 0 6px 4px; list-style:none;}
#CMSListMenu1 li.CMSListMenuLI:hover ul{display:block;}
#CMSListMenu1 li.CMSListMenuHighlightedLI ul{position:absolute; display:none; width:13em; background-color:#000; padding:0 0 6px 4px; list-style:none;}
#CMSListMenu1 li.CMSListMenuHighlightedLI:hover ul{display:block;}
#CMSListMenu1 li.CMSListMenuLI ul.CMSListMenuUL li.CMSListMenuLI, .nav li.CMSListMenuHighlightedLI ul.CMSListMenuUL li.CMSListMenuLI{float:none; line-height: 2em;}
#CMSListMenu1 li.CMSListMenuLI ul.CMSListMenuUL li.CMSListMenuHighlightedLI{float:none; line-height: 2em;}
#CMSListMenu1 li.CMSListMenuLI ul.CMSListMenuUL li.CMSListMenuHighlightedLI .CMSListMenuLinkHighlighted{color:#006600;} #CMSListMenu1 li a, #CMSListMenu1 li a:visited{color:#9e7c13; text-decoration:none;}
#CMSListMenu1 li a:hover{color:#006600;}

These two steps along will give you a working dropdown menu.  Now simply update they styling in your stylesheet to match your site.

3 (optional): If you care about IE6 you’re going to have to add a little jQuery to get the dropdown to function.
3a. Add jQuery reference in the head of your site if you’re not already using it:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"  type="text/javascript"></script>

*note  I like to advantage of the MS CDN.
3b. I add a javascript reference to a globals javascript file.

<script src="~/Scripts/global.js" type="text/javascript"></script>

In that globals.js file add these lines of code:

$(document).ready(function() {
$('li.CMSListMenuLI, li.CMSListMenuHighlightedLI').hover(
  function() { $('ul', this).css('display', 'block'); },
  function() { $('ul', this).css('display', 'none'); });
});

Working example: Nature Valley Pro Ride

You may have to create an IE conditional style sheet to fix the positioning of the dropdowns.

That’s it, a simple way to get a dropdown menu based on your cms content that is semantically correct using pure css and a little jQuery for IE6.

Filed under: Web Development   Tags: Kentico CMS,
 No Comments »