Forums (Obsolete)

Member

daniel.munday@wellstudio.co.uk - 8/23/2013 6:00:02 AM

Creating a menu with boostrap markup

Hi,

I'm completely new to Kentico and I'm trying to build a menu with bootstrap markup through the portal engine. There will be nested menus with the class dropdown, so -

<ul class="nav navbar-nav">
      <li><a href="#">Other link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent cat</a>
        <ul class="dropdown-menu">
          <li><a href="#">Sub 1</a></li>
          <li><a href="#">Sub 2</a></li>
        </ul>
      </li>
    </ul>

My question is - is there any way to do this through the default menu web parts in the portal?
I'm trying to find a way to add that dropdown class at least. It seems like 'CSS list menu' almost gets there, but not quite.

There are three ways that I can think of doing it -
1. Get a web part to do it for me - seems unlikely
2. Combine web parts together (maybe three cat menus one after the other or something?)
3. Write my own code for it outside of the portal engine.

Does anyone have any advice?

Thanks,

Dan


Kentico Legend	Brenden Kehren - 8/23/2013 11:12:15 AM RE:Creating a menu with boostrap markup The Hierarchial Viewer will meet your needs. You could also use nested repeaters although there is are performance issues with nesting them. Better to use the Heirarchial Viewer as it's built for this nesting purpose. I've got a good conversation here about it and setting up a navigation structure.


Member	DanM - 8/23/2013 12:14:39 PM RE:Creating a menu with boostrap markup Thanks for the advice. I'll try it out and get back to you about whether it worked. I reckon there will be a lot more requests like this in future as people start to integrate responsive frameworks into Kentico.


Kentico Legend	Brenden Kehren - 8/23/2013 1:47:23 PM RE:Creating a menu with boostrap markup I'm positive it will work, its a matter of understanding how the control works and how you can make it work to your advantage. Many people already use responsive design with the current toolset that Kentico offers.


Member	lwhittemore-emh - 8/29/2013 1:50:45 PM RE:Creating a menu with boostrap markup Did you have any luck accomplishing this? I am about to try to build one.

Member

DanM - 9/2/2013 1:13:13 PM

RE:Creating a menu with boostrap markup

I'm almost there... I think if I give it another hour or two I'll have ironed out all the bugs.
Thanks FroggEye!

lwhittemore-emh - This page was a real help:
http://devnet.kentico.com/Knowledge-Base/Web-parts-Controls/How-to-build-up-a-menu-using-the-hierarchical-tran.aspx
Things are slightly different in Kentico 7, but very similar.
You'll have to create a new Hierarchical transformation. You can find this section in the Heirarchical viewer menu.
You then have to add a load of transformations to this transformation, so you build it up out of lots of parts to create the list that you want.
Give it a try with the instructions in the link, you should be able to create a simple list that you can then build upon.

btw, if you only want to show pages that you've ticked as 'Show in Navigation' (CMS DESK > Content > Properties > Navigation), you just add this as the WHERE clause -
DocumentMenuItemHideInNavigation = 0


Member	cwyatt-emh - 9/17/2013 11:33:31 AM RE:Creating a menu with boostrap markup Thanks for the help. I have it mostly built but am running into one issue. The <li> item that is above the sub menu also has a class that sets it as the toggle. How do I check to see if the item has MenuItems Below it?

Member

DanM - 9/17/2013 11:48:10 AM

RE:Creating a menu with boostrap markup

I haven't tried this yet, but I'm sure you could do it with a macro transformation.
You could use a conditional statement to check whether the current item has children, then alter your classes from there.

You can switch from an ascx to macro transformation by selecting Transformation type:Text/XML.

The scripting is a little different with a macro, you lose the Eval function and the quotations when you want to output a page property.

This is (part of) the ascx code that I used to output each item -
<a class="<%# IfCompare(Eval("NodeChildNodesCount"),0,"dropdown-toggle","") %>"
I think macro would be simpler and allow more functionality though.

Also, my own menu isn't finished yet, but I intend to go back to it and fully flesh it out this week. If I remember I'll post the code here once I'm done.