Forums (Obsolete)

Member

lwhittemore-emh - 9/21/2013 2:08:47 PM

RE:CMSListMenu and Classes

Awesome, this was really helpful. The only thing I need left if to figure out how to check if the document has subpages below it.

The menu need look like this

<ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>

as you can see the item that has the submenu below it needs to have some extra items added to it

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

how do we add a conditional statement to the transformation that checks for child documents that are also of a specific class "cms.menuitem"


Kentico Legend	Brenden Kehren - 9/22/2013 12:14:53 AM RE:CMSListMenu and Classes lwhittemore-emh wrote: Awesome, this was really helpful. The only thing I need left if to figure out how to check if the document has subpages below it. Check out your post here Should give you the answer. You can also check out the "class" in that same IF statement.


Kentico Legend	Brenden Kehren - 8/6/2012 7:38:04 AM RE:CMSListMenu and Classes I was able to get the menu to work as I wanted with this post and the inline code mentioned below. Thanks for the persistence and help Jan!

Member

lwhittemore-emh - 8/29/2013 2:28:12 PM

RE:CMSListMenu and Classes

How would I make this work when the code looks like this


<ul class="nav navbar-nav main-menu">
     <li class="active"><a href="#" title="Home">Home</a></li>
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" title="About BCH">About BCH<b class="caret"></b></a>
          <ul class="dropdown-menu">
               <li><a href="#" title="Get to Know Us">Get to Know Us</a></li>
               <li><a href="#" title="History of BCH">History of BCH</a></li>
               <li><a href="#" title="News & Press Releases">News & Press Releases</a></li>
          </ul>
     </li>
     <li><a href="#" title="Medical Staff">Medical Staff</a></li>
     <li><a href="#" title="BCH Foundation">BCH Foundation</a></li>
     <li><a href="#" title="Employment">Employment</a></li>                                
</ul>

The problem that I am running into is when the <li> tag needs to have classes added to it.


Member	lwhittemore-emh - 8/29/2013 2:36:40 PM RE:CMSListMenu and Classes by having my separator transformation on having the closing li tag will likely get me where I need to be. what sort of macro would I need to check to see if the item has sub pages so I can add the proper class to the tag. The menu is only going to show cms.menuitem's


Member	lwhittemore-emh - 8/29/2013 2:51:03 PM RE:CMSListMenu and Classes {% DocumentID==CurrentDocument.DocumentID?"Highlighted":"" %}") %> the bot the variables pull the current documents id not the document that is being iterated through.

Kentico Legend

Brenden Kehren - 8/29/2013 3:01:27 PM

RE:CMSListMenu and Classes

This

<%# CMS.CMSHelper.CMSContext.CurrentResolver.ResolveMacros("{% DocumentID==CurrentDocument.DocumentID?\"active\":\"notactive\" %}") %>

can easily be resolved into this without the need for a macro as long as it's inside a transformation

<%# (EvalInteger("DocumentID") == CurrentDocument.DocumentID ? "active" : "notactive") %>

Member

lwhittemore-emh - 8/29/2013 4:48:29 PM

RE:CMSListMenu and Classes

FroggEye wrote: This
<%# CMS.CMSHelper.CMSContext.CurrentResolver.ResolveMacros("{% DocumentID==CurrentDocument.DocumentID?\"active\":\"notactive\" %}") %>
can easily be resolved into this without the need for a macro as long as it's inside a transformation
<%# (EvalInteger("DocumentID") == CurrentDocument.DocumentID ? "active" : "notactive") %>

Awesome that worked. Learn something new everyday. Thanks!

Member

wynveen-dcim - 10/9/2013 2:55:08 PM

RE:CMSListMenu and Classes

How did you manage to get this to work? I am also implementing a bootstrap menu and can't get the 'active' class on the <li>. The <li> is rendered in the header or separator templates where it doesn't have access to the current document, as far as I can tell. Using {%DocumentID%} returns the ID of the page I'm currently on as opposed to the ID of the menu item document. It's probably because it is technically between menu item documents. Is it possible to grab the next document to check whether to add the active class?


Kentico Legend	Brenden Kehren - 10/9/2013 3:06:21 PM RE:CMSListMenu and Classes EvalInteger("DocumentID") is the document currently being rendered. If there are 15 of them in the dataset this would be one of them. CurrentDocument.DocumentID is the document you are navigating to (link you clicked on) or the current active document.

Member

wynveen-dcim - 10/9/2013 3:21:11 PM

RE:CMSListMenu and Classes

EvalInteger("DocumentID")

is empty in a SeparatorTemplate. Is there any way to get the documentID from the SeparatorTemplate?

If not, is there a way I can apply a transformation within another transformation so I could include the <li> in the Item Template? (Found something in http://devnet.kentico.com/docs/devguide/transformations_macro_expressions.htm, but it doesn't seem to render anything)

Example Item Template:


<li class="{%DocumentID==CurrentDocument.DocumentID?"active":""%}
    </div>
</li>

I've tried this but the ApplyTransformation doesn't seem to render anything. I made the content of the "cms.menuitem.megamenuitem" transformation the following just to test:

<span>item</span>

Kentico Support

kentico_janh - 10/10/2013 1:23:50 AM

RE:CMSListMenu and Classes

Hello,

There is no context in no-item transformations, so you can access document fields, however you can always workaround it by defining proper item transformation. Why don't you use another level of a hierarchical structure instead of the ApplyTransformation method (which should work anyway)? Please get an inspiration in following article:

Creating a Mega Menu using Hierarchical transformations

Best regards,
Jan Hermann

Member

jwynveen - 10/10/2013 8:37:50 AM

RE:CMSListMenu and Classes

I did follow that article to build my current menu. The problem is that the top level <li> elements are rendered in the header or separator template. If you have suggestions of how I could modify that to be able to put an "active" class on the <li>, I would be very appreciative.

The problem with another level of the hierarchy as opposed to ApplyTransformation is that sublevel wouldn't be within the <li></li> of the top level menu item (thus why the article puts the <li> in the header/separator).

Kentico Support

kentico_janh - 10/14/2013 1:21:50 AM

RE:CMSListMenu and Classes

Hello,

I suppose the active class should appear only when LI is part of the path of selected item:

<li class='{% if (CurrentDocument.NodeAliasPath.StartsWith(NodeAliasPath)) {return "active"} else {return "regular") %}'>

If this is not what you want to know, please describe once again what structure you want to achieve (you can for instance copy and paste your menu structure).

Best regards,
Jan Hermann

Member

jwynveen - 10/14/2013 8:51:58 AM

RE:CMSListMenu and Classes

Here is the structure I am trying to achieve. It is the default for the Bootstrap framework (getbootstrap.com)

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->

Kentico Support

kentico_janh - 10/15/2013 3:19:09 AM

RE:CMSListMenu and Classes

Hello,

So if I get it right, this is standard UL/LI menu but in case the Link document has any child documents, you need to pass another inner UL/LI menu, right?

I would do following (in pseudo-code):

a) Header transformation, 0 level:

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">

b) Footer transformation, 0 level:

</ul>
  </div>

c) Item transformation, 0 level:

if no child -> <li (if currently selected -> class="active")><a href="#">Link</a></li>

d) Header transformation, 1 level:

empty

e) Footer transformation, 1 level:

empty

f) First item transformation, 1 level:

<li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
<li><a href="#">sub document</a></li>

g) Last Item, 1 level:

<li><a href="#">One more separated link</a></li>
        </ul>

h) Single item, 1 level:

<li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">sub document</a></li>
        </ul>

i) Item transformation, 1 level:

<li><a href="#">sub document</a></li>

Best regards,
Jan Hermann


Member	jwynveen - 10/15/2013 4:31:10 PM RE:CMSListMenu and Classes That worked perfectly. Thank you! The only minor change I had to do was add the closing </li> in the 1 level single and last transformations. Otherwise it's exactly what I was looking for.


Kentico Legend	Brenden Kehren - 8/29/2013 3:03:09 PM RE:CMSListMenu and Classes If you're using the CSSListMenu webpart, I suggest allowing it to render the css classes automatically and get familiar with the classes it adds. You can change your css classes to work with what it automatically rendered, done it many times.


Member	lwhittemore-emh - 8/29/2013 4:49:59 PM RE:CMSListMenu and Classes I'm trying to do it using bootstraps menu. Which I don't really like, but I thought I would try.

Member

lwhittemore-emh - 8/29/2013 4:53:48 PM

RE:CMSListMenu and Classes

<li class="<%# (EvalInteger("DocumentID") == CurrentDocument.DocumentID ? "active" : "notactive") %>"><a href="<%# GetDocumentUrl() %>" title="Home"><%# Eval("DocumentName") %></a>

Is where I am at now for my item transformation.

Now I need a way to add the class "dropdown" to the li if there are pages below it. The pages also need to be site to show in the navigation in the properties.


Kentico Support	kentico_janh - 9/10/2013 1:19:28 AM RE:CMSListMenu and Classes Hello, Please take a look at following article where is shown how to check current item if there are any child documents: Creating a Mega Menu using Hierarchical transformations <a href="{% Transformation.GetDocumentUrl() %}</a> Best regards, Jan Hermann


Member	lwhittemore-emh - 9/26/2013 10:35:12 AM RE:CMSListMenu and Classes Thanks for you help. I think this is a step in the right direction but how do I check to make sure the child is of the menuitem document type and also not set to be hidden. Also I am using an acsx transformation if that helps.


Member	wynveen-dcim - 10/9/2013 11:23:47 AM RE:CMSListMenu and Classes How could I check if there are child nodes that are set to be shown in navigation? I found there is a {%CurrentDocument.ChildObjects%}, but how can I check if there are any where DocumentMenuItemHideInNavigation='false'? Is there something comparable to the linq method .Any(x => !x.DocumentMenuItemHideInNavigation)?


Kentico Legend	Brenden Kehren - 10/9/2013 11:33:32 AM RE:CMSListMenu and Classes Why not just set that value in your WhereClause vs. attempting to enumerate through it? Only select the ones you want to see then you don't have to worry about it later.

Member

wynveen-dcim - 10/9/2013 1:11:19 PM

RE:CMSListMenu and Classes

What where clause? I followed the link above for creating a mega menu and that included a where clause checking the field [DocumentMenuItemHideInNavigation]. However, the example uses NodeChildNodesCount to check for children. That count includes items that should be hidden from the nav/menu, so I'm trying to find the count of children that should actually be shown.

If I'm missing something obvious, please let me know. I'm pretty new to Kentico.