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,
 View Comments

This is my first post dedicated towards my portfolio. I’ve had my site up for over a year now, but still have not created a portfolio for it. I have a lot to add to it and am coming to the realization that I will never get it done if I try to do it all at once.

My plan is to start creating a blog post for all my portfolio items in hopes that creating it in increments, it will eventually get done.

I am going to start from the beginning.

The first site I worked on as a freelancer is StillPointe, www.stillpointe.net, a Natural Health Center. I was brought into the project by Nock Design Group. The client wanted a re-design of the site with the ability to manage it themselves.

Nock Design Group did the complete design of the site as well as their “I’m Back …” campaign. I took the PSD design and converted it to the web using css and div tags. I built the site on top of Kentico CMS.  StillPointe can now manage all the copy on their site. The client liked using Google’s calendar feature, so that was implemented into the site along with a Google map. Finally a newsletter sign-up and blog were built into the site.

The site is also hosted with me. I’ve found a way to optimize Kentico sites on my server.  A new post about that will come in the future.

With the combination of Nock Design Group’s design and my implementation of the site on top of Kentico CMS we were able to deliver an excellent site for StillPointe that they can completely manage at a very reasonable cost.

Filed under: Portfolio   Tags: Kentico CMS,
 View Comments