Design and CSS styles
Version 7.x > Design and CSS styles > Add new menu group View modes: 
User avatar
Member
Member
huey - 5/13/2013 12:15:49 PM
   
Add new menu group
I'm very new to Kentico.
I would like to add a menu that will list sub-pages in the left hand side of the page.
What is the best way to do this?
I thought I could add a new menu group. I've read where you can set up some kind of indicator, and then put that in the WHERE condition in the tree menu web part, but I don't know where to add it.
Any advice is appreciated thanks!

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 5/13/2013 2:02:32 PM
   
RE:Add new menu group
Assume you have your main navigation (Home, About, Contact, etc). Under About you have the following page structure.

-About
--Vision
--Mission
--Staff
--Careers

On the About page, add a Repeater (or CSSListMenu your choice).

Leave the Path empty (by default it will pick everything below that node).

Set the Document type to be Page (menu item).

Select a transformation something like a <li> or a <div> tag.

And you should be set. This will display all the menu items below the About page.

User avatar
Member
Member
kentico_sandroj - 5/13/2013 9:48:25 PM
   
RE:Add new menu group
Hi,

Frogeyes solution should work the way he described but please let us know if you need any additional details or help setting this up. Also, if you would like a more advanced example for a full navigation, this article would be a good read.

Regards,
Sandro

User avatar
Member
Member
huey - 5/14/2013 9:19:17 AM
   
RE:Add new menu group
Thanks for the responses.

I'm trying to get Froggeyes solution to work but I'm not quite there. If it works then it would be ideal because I have 3 different sections that need navigation on the left hand side. I don't want to have to have a template for each section, which is where I am now.

I think I'm getting stuck at the Transformation part. I added <li> to Item Separator but didn't get the results I expected. Here is what I got.

Document name: Who We Are
Teaser image:
Menu group:
Document name: Test1
Teaser image:
Menu group:

The area below is what I'm supposed to be looking at correct?

Repeater-Transformation.jpg

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 5/14/2013 11:33:13 AM
   
RE:Add new menu group
Not knowing your background with programming I'll explain a little. A repeater has 5 different areas:

- Header
- Item
- Alternating Item
- Seperator
- Footer

You are attempting to edit the "seperator". The seperator is what you'd see between items. If you want to see what I'm talking about, simply put <hr /> in there and you should see a line between each item.

What you need to do is create a Transformation (and alternating if you so desire the alternating item to look different) for that particular document type. For instance if it is a CMS.MenuItem then in the Transformation box (3 above where you are) click New and select Page (CMS.MenuItem). Then simply add something like
<li><a href='<%# GetDocumentUrl() %>'><%# Eval(" DocumentName") %></a></li>


Then further down in the webpart properties look for HTML Envelope, this is where you will set the "header" and "footer" of the list In the before enter <ul> and in the after enter </ul>. What you should end up with is a bulleted list of menu items.

User avatar
Member
Member
huey - 5/14/2013 12:18:59 PM
   
RE:Add new menu group
Thank you for spelling it out. I've done some wordpress / joomla template hacking for a few years and that's about it. I'm a beginner in C# / .NET and Kentico for sure.

It works perfectly! Just to make sure a couple more questions...

Is "Web Part Container" where I would add CSS styling, or do I add the class in the Transformation just created?

Are you saying that if I want alternate colors in rows then I would have to create another transformation?

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 5/14/2013 12:28:33 PM
   
RE:Add new menu group
I'd add your styling in the stylesheet (Site Manager>Development>CSS Stylesheets). A webpart container would wrap around all of the contents in the webpart. For instance if you look at the Most Active Posters (blue section) on the Devnet forum. The header, "Most Active Posters" is the container title and the content are the users. I'd stay away from them for now until you learn a bit more. Just create a class for you <ul> tag (ul.navMenu) and set that in the Content Before in the HTML Envelope property of the webpart (<ul class="navMenu">). Then set the rest of the styles .navMenu li { display: block; } etc... You might also create an "alt" style for the <li> tag as well.

What you'd do is clone or copy the existing transformation and save it as an alternate transformation and simply add the style to the <li> tag you created to make it look different. Then in the webpart property, select the newly created Alternating Transformation.


User avatar
Member
Member
huey - 5/14/2013 2:27:14 PM
   
RE:Add new menu group
Thanks I will do so.

I found a problem with the menu. When I go to sub pages, the navigation disappears. So I need to adjust the transformation that was created so that it reads the top level page correct?

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 5/14/2013 3:59:24 PM
   
RE:Add new menu group
If you've left the Path property empty then it will not find any child pages. You could specifically declare it (/About/%) or dynamically declare it with a macro.

If you want the page template to have a multi purpose then I'd suggest creating a custom macro and using it. Here is some code I used to create a macro to get the parent alias:
        
/// <summary>
/// Register the methods so they show in the Macro window
/// </summary>
public static void RegisterMethods()
{
MacroMethod getParentAlias = new MacroMethod("GetParentAlias", GetParentAlias)
{
Comment = "Returns the top level parent url alias.",
Type = typeof(string),
AllowedTypes = new List<Type>() { typeof(string) },
MinimumParameters = 1,
Snippet = "GetParentAlias(\"/Cards/Application/\")"
};
getParentAlias.AddParameter("URL", typeof(string), "Default ULR if none found.");
MacroMethods.RegisterMethod(getParentAlias);
}
/// <summary>
/// Wrapper method of GetParentAlias suitable for MacroResolver.
/// </summary>
/// <param name="parameters">array of parameters</param>
/// <returns></returns>
public static object GetParentAlias(params object[] parameters)
{
switch (parameters.Length)
{
case 1:
return GetParentAlias(ValidationHelper.GetString(parameters[0], ""));
default:
throw new NotSupportedException();
}
}

/// <summary>
/// Gets the top level navigation from a URL
/// </summary>
/// <param name="URL"></param>
/// <returns></returns>
public static string GetParentAlias(string URL)
{
// putting a dummy value in so if it cannot get a URL it will return one that doesn't exist and not display any items.
string ReturnValue = "/unknown";
// parse out the URL and get only the text between the first / and the second /
int firstIndex = 0;
string urlFirstSlashRemoved = URL.Substring(1, URL.Length - 1);
if (urlFirstSlashRemoved.Length > 0)
{
// check for second level page ie: /page1/page2/
firstIndex = urlFirstSlashRemoved.IndexOf("/");
if (firstIndex > -1)
{
ReturnValue = "/" + URL.Substring(1, firstIndex);
}
else
{
// parent page
ReturnValue = URL;
}
}
return ReturnValue;
}

You'd use it in a webpart as a macro expression like so:
{% GetParentAlias(CurrentURL) + "/%" @%}