Override script on CSS List Menu, and other options

Dave Russell asked on September 4, 2014 08:52

I've applied css to the "css list menu" web part so I can use the a custom collapsable menu. I have two questions one of which i've worked around.

First and most importantly, where can I override the out of the box CSS Menu script and use my custom menu js script. (incidently I know the my script works, because when I run in preview mode, I don't get a conflict/flickering menu i.e. on mouse out the menu disappears and the visibility/display gets out of sync)

Last of all, even though I worked around this by appling jquery to added the necessary classes, can I stop each of the css from propergating to each child item when applying the css as comma seperated string in the css property of the web part?

I understand that the functionality i desire is possible using hierarchial transformation. I wasn't able to find suitable walkthrough for this, and when I did attempt to added a new transformation I recieved a error for which I've recently submitted a bug report.

I'm using kentico 8.0.21 in portal mode.

menu css list menu

Correct Answer

Brenden Kehren answered on September 4, 2014 15:06

Trying to modify or override the out of the box classes and such for the CSS List Menu is more work than if you were to learn how to use the Hierarchical Viewer. Plus if you learn how to use the Hierarchical Viewer, you'll use it more often and in other areas. Did you check out the documentation? There is also a walk through although its for v7. In the walk through there are some items that you can The principal is still the same although in v8 the ability to specify where your sub items go has been added simply by adding this

<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />

A note on your scripts, if your navigation requires scripts, I'd suggest doing your full testing when logged out of Kentico simply because Kentico loads jQuery and several scripts to make the UI function and sometimes they cause issues.

1 votesVote for this answer Unmark Correct answer

Recent Answers

Dave Russell answered on September 5, 2014 10:07

The walk through, as a guideline worked a treat (after I found a workaround for the bug - I had to create each of the transformations then select them). I didn't need the SubLevelPlaceHolder.

I still have the problem with flickering menu getting out of sync, which I think is a conflict with class names used in the skin.css in global theme.

0 votesVote for this answer Mark as a Correct answer

Dave Russell answered on September 5, 2014 13:09

In response to the walk through: If following the walkthrough in Kentico 8.0 (I've been informed this is fixed in Kentico 8.1), you may encounter an exception when clicking New to add a transformation to the heirarchial transformations, namely adding the TopLevel, TopLevelFooter, SubLevelFooter etc. To get around this before creating the Heirarchial Transformation create the items as transformations, then use the Select button. Hope this help anyone who may encouter similar errors.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on September 5, 2014 19:36

Again, do your actual testing outside of the Kentico UI for the full effect. If you're not logged in there should be no side affects of the skin.css file in your site whatsoever because the Global theme is not applied to your site after logged out.

1 votesVote for this answer Mark as a Correct answer

Dave Russell answered on September 5, 2014 20:13

Hi Brenden thanks again for the reply. The menu works in my pattern library (html) without any influence from Kentico - it still a problem when I'm not logged into Kentico. I've had several people try it on a number of machines/browsers. I'm trying to identify which css/script is applying a switch on display: block/none to the ul which has the contains class "dropdown-menu". Any pointers would be appreciated.

0 votesVote for this answer Mark as a Correct answer

Dave Russell answered on September 5, 2014 21:44

I found the problem. Simply searched all the scripts for display:none !important, and removed the offending code :), which was a similar menu feature, I'd inadvertantly, imported from another project, that I didn't actually need.

2 votesVote for this answer Mark as a Correct answer

Dave Russell answered on September 7, 2014 07:09

I've just upgraded to Kentico v8.1 and the menu I built as suggested in the walk through for v7 in the first answer that is marked correct had stopped working correctly. Replace the expression NodeChildNodesCount==0 with NodeHasChildren and it works again.

1 votesVote for this answer Mark as a Correct answer