Design and CSS styles
Version 6.x > Design and CSS styles > CMSListMenu and own CSS View modes: 
User avatar
16vMonkey - 7/27/2012 10:04:09 AM
CMSListMenu and own CSS

I'm having real problems trying to get CSS given to me by a designer to work with the CMSListMenu webpart.

Is there any chance someone could convert my CSS below to work so the menu renders properly? I would be very grateful!

ul.mainmenu { position: relative; width: 100%; list-style: none; padding:0; }
ul.mainmenu li { float: left; zoom: 1; }
ul.mainmenu a:hover { color: #666; }
ul.mainmenu a:active { color: #ffa500; }
ul.mainmenu li a { display: block; color: #FFF; font-size: 15px; padding-top: 13px; padding-right: 20px; padding-left: 20px; text-decoration: none; padding-bottom: 12px; }
ul.mainmenu li.hover, ul.mainmenu li:hover { background: #f6f6f6; color: #000; position: relative; box-shadow: 0px 0px 10px rgba(000,000,000,0.5) }
ul.mainmenu li.hover a { color: #000; }
ul.mainmenu li.hover a:hover {color: #666;}
ul.mainmenu ul { list-style: none; padding:0; width: 480px; visibility: hidden; position: absolute; top: 100%; background-color: #f6f6f6; -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); }
ul.mainmenu ul.menuleft { left:0px!important; }
ul.mainmenu ul.menuright { right:0px!important; }
ul.mainmenu ul li { background: #f6f6f6; color: #000; float: left; font-size:14px; padding: 0px; width:150px; }
/* IE 6 & 7 Needs Inline Block */
ul.mainmenu li ul li.hover, ul.mainmenu ul li:hover { background: #f6f6f6; color: #000; position: relative; box-shadow: none; }

ul.mainmenu ul { padding: 10px 0; }
ul.mainmenu ul li a { border-right: none; width: 100%; display: inline-block; font-size: 12px; padding: 5px 10px; }
ul.mainmenu ul li a:hover { box-shadow: none; }
ul.mainmenu ul li a:before { content: '\00BB '; color: #F00; font-weight: bold; padding-right: 2px; }
ul.mainmenu ul ul { left: 100%; top: 0; }
ul.mainmenu li:hover > ul { visibility: visible; }

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 7/28/2012 6:27:00 AM
RE:CMSListMenu and own CSS

please see the documentation here: CMSListMenu - appearance and styling. You can also find examples there. It can be also helpful to study the styles of this web part on the sample Corporate site.

You can also use a tool to isnpect the elements and their CSS styles (Firebug or Web developer tools).

Best regards,
Helena Grulichova

User avatar
Kentico MVP
Kentico MVP
Brenden Kehren - 8/14/2012 8:25:56 AM
RE:CMSListMenu and own CSS
I've found it easier if you are using the CMSListMenu webpart to use the rendered CSS classes and just put a prefix on main and sub levels. Its easier to follow in my opinion. All you do in your CMSListMenu webpart properties is set the CSS prefix with your prefix names (in my case main,sub) and ensure the Render CSS classes checkbox is checked and all should work without issue.

The rendered classes for the CMSListMenu are CMSListMenuUL, CMSListMenuLI, CMSListMenuLink, CMSListMenuHighlightedLI, CMSListMenuLinkHighlighted. Below is an example of a vertical menu I've created that uses these built-in classes and the CSS associated with it. Should give you a good idea how it works.

<div class="nav">
<ul class="mainCMSListMenuUL">
<li class='mainCMSListMenuLI'><a href='/Page1' class='mainCMSListMenuLink' title='Page1'>
<ul class="subCMSListMenuUL">
<li class='subCMSListMenuLI'><a href='/Page1/Page2' class='subCMSListMenuLink' title='Page2'>
Page2</a> </li>
<li class='subCMSListMenuLI'><a href='/Page1/Page3' class='subCMSListMenuLink' title='Page3'>
Page3</a> </li>
<li class='subCMSListMenuLI'><a href='/Page1/Page4' class='subCMSListMenuLink' title='Page4'>
Page4</a> </li>
<li class='subCMSListMenuLI'><a href='/Page1/Page5' class='subCMSListMenuLink' title='Page5'>
Page5</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page6' class='mainCMSListMenuLink' title='Page6'>
Page6</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page7' class='mainCMSListMenuLink' title='Page7'>
Page7</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page8' class='mainCMSListMenuLink' title='Page8'>
Page8</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page9' class='mainCMSListMenuLink' title='Page9'>
Page9</a> </li>
<li class='mainCMSListMenuLI'><a href='/Page10' class='mainCMSListMenuLink' title='Page10'>
Page10</a> </li>

/*# Main Navigation #*/
#sidebar .nav { margin: -18px -18px 36px -18px; }

/* main and sub ul containers */
#sidebar .nav .mainCMSListMenuUL
, #sidebar .nav .subCMSListMenuUL { list-style: none; margin: 0; padding: 0; }

/* main ul item */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI { margin: 0 0 3px 0; padding: 13px 0 7px 0; -webkit-transition: background 0.3s ease-in; -moz-transition: background 0.3s ease-in; -o-transition: background 0.3s ease-in; -ms-transition: background 0.3s ease-in; transition: background 0.3s ease-in; }

/* set the all caps for the main menu items */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI { text-transform: uppercase; }

/* main ul item hover and main ul item selected */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI:hover
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI { background: #839975; background: rgba(131, 153, 117, 0.8); }

/* main ul item link and main ul item selected link */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI .mainCMSListMenuLink
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .mainCMSListMenuLinkHighlighted
, #sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .mainCMSListMenuLink { display: block; padding-left: 18px; color: #fff; font-family: 'OswaldBook'; font-size: 30px; line-height: 30px; text-decoration: none; -webkit-transition: background 0.3s ease-in; -moz-transition: background 0.3s ease-in; -o-transition: background 0.3s ease-in; -ms-transition: background 0.3s ease-in; transition: background 0.3s ease-in; }

/* main ul item link and sub ul item link hover effect */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI .mainCMSListMenuLink:hover
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLink:hover
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLinkHighlighted:hover { text-decoration: none; }

/* set the > image on the selected main menu item */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .mainCMSListMenuLinkHighlighted { background: transparent url(../App_Themes/Comp/Images/menu-arrow.png) no-repeat -1px 6px; }

/* setting up the second level navigation */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuLI .subCMSListMenuUL { display: none; margin-top: 9px; }

/* clear the all caps from the sub menu items */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI { text-transform: none; }

/* show the sub menu items when selected */
#sidebar .nav .mainCMSListMenuUL .mainCMSListMenuHighlightedLI .subCMSListMenuUL { display: block; }

/* sub menu li */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI {line-height: 20px; padding: 7px 0px 5px 18px; margin-bottom: 1px; }

/* set the sub link */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI .subCMSListMenuLink
, #sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI .subCMSListMenuLinkHighlighted { display: block; font-family: 'OswaldLight'; font-size: 20px; color: #fff; }

/* set the background color when hovering a sub link */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuLI:hover { background: #9BAD90; }

/* set the background color and > image when a sub link is selected */
#sidebar .nav .mainCMSListMenuUL .subCMSListMenuUL .subCMSListMenuHighlightedLI { background: #9BAD90 url(../App_Themes/Comp/Images/menu-arrow.png) no-repeat -1px 9px; }

Here is an image of the end result (I removed the small text from below the large text for simplicity). The green background is somewhat transparent, when you hover over it the background gets darker and not transparent. When you select an item, the background stays dark and not transparent. When you select a main item that has nested items, it keeps the main item selected and opens the sub items list. There are also 2 references to an image, this is a small white arrow (>) that is another indicator as to what link is selected.
User image

User avatar
Peter.Solnet-gmail - 8/14/2013 5:29:39 AM
RE:CMSListMenu and own CSS
Hello FroggEye,

I have a similar challenge. I am actually new with kentico. My challenge is ensuring the CMSListMenu apply different class to each li element.

my html look like this:

<ul id="navlist" class="clearfix">
<li class="home"><a href="#"></a></li>
<li class="xo"><a href="#">About Us</a></li>
<li class="xoxo"><a href="#">People</a></li>
<li class="xoxoxo"><a href="#">Business</a></li>
<li class="xo"><a href="#">News</a></li>
<li class="xoxo"><a href="#">Careers</a></li>
<li class="xoxoxo"><a href="#">Gallery</a></li>
<li class="xi"><a href="#">Contact Us</a></li>

User avatar
kentico_sandroj - 8/14/2013 1:30:20 PM
RE:CMSListMenu and own CSS

If the methods that have been outlined so far would not work for you, I would recommend taking a look at the document properties for navigation. You can set specific classes on a per-document level which would be rendered by the CSS List Menu Web part.

Please let me know if you have any questions.


User avatar
Peter.Solnet-gmail - 8/15/2013 3:27:12 AM
RE:CMSListMenu and own CSS

Thanks for the response. I found a way around that just like you suggested. The navigation tab on Document Properties did the magic.


User avatar
Kentico MVP
Kentico MVP
Brenden Kehren - 8/14/2013 2:06:37 PM
RE:CMSListMenu and own CSS
Why would each <li> need its own css class? Interesting.

At any rate, you might look into using the Hierarchica Viewer. You can specify your own transformations and set values dynamically based on the documents properties.