Individual Class/ID Names for Mega Menu

Posted by Community Admin on 21-Jul-2014 00:00

First of all, I'm using Sitefinity 7.0. I'm trying to create a mega menu in sitefinity. In the pages section every page is listed in hierarchy. I created my own navigation widget to display every page and child page that I want in my mega menu. This is my widget code:

<%@ Control Language="C#" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.Extensions.LightNavigationControlTemplate" %>

<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="navigation" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>

<sf:ResourceLinks runat="server" UseEmbeddedThemes="true" Theme="Basic">

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.nav.widget.css" Static="true" />

</sf:ResourceLinks>

<navigation:SitefinitySiteMapDataSource runat="server" ID="dataSource" />

<sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" />

<div class="sfNavWrp sfNavHorizontalSiteMapWrp <%= this.GetCssClass() %>">

<%-- responsive design section - renders templates for the responsive design--%>

<navigation:NavTransformationTemplate runat="server" TransformationName="ToToggleMenu" TemplateName="ToggleMenu" />

<navigation:NavTransformationTemplate runat="server" TransformationName="ToDropDown" TemplateName="Dropdown" />

<%--end of the responsive design section --%>

<ul class="sfNavHorizontalSiteMap sfNavList">

<navigation:NavigationContainer runat="server" DataSourceID="dataSource" >

<Templates>

<navigation:NavigationTemplate>

<Template>

<li class="first">

<a runat="server" class="mainPage"

href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></

a>

<ul class="firstUl" runat="server" id="childNodesContainer"></ul>

</li>

</Template>

</navigation:NavigationTemplate>

<navigation:NavigationTemplate Level="5">

<Template>

<li class="second">

<a runat="server" class="secondPage"

href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></

a>

</li>

</Template>

</navigation:NavigationTemplate>

</Templates>

</navigation:NavigationContainer>

</ul>

</div>

As I'm trying to style my mega menu, I'm having issues with the class names. I'm not that familiar with sitefinity, so the code is a little confusing to me. Since I'm using code to pull each page name like the default navigation widgets, I can't individually change each class or ID name for each individual page. I've tried going into the page settings and adding a class or ID name for each individual page but there doesn't seem to be a way to do that.

Since I named my list items "first" and my links "mainPage" and my unordered list "firstUI", each link, unordered list and list item is being called this. Since they are all called the same thing, I can't individually edit them in the CSS without using a ton of !importants, and even that might not do it. Is there a way I should write my navigation widget so that each page has a different class or ID name?

And "second" and "secondPage" don't seem to ever be called, so I think I can delete/ignore those.
I've tried using nth-child/first-child/last-child, but even these target multiple page links, rather than just one.

Posted by Community Admin on 24-Jul-2014 00:00

Hello Michelle,

The navigation widget could be customized the way you need and I advise you to consult our documentation article here: Styling and customizing the Navigation widget

If you need to have a unique class for each page you can try, instead of class="mainPage" to set it class='<%# Eval("Title") %>'

Another option is to use some javascript or create a custom field (if you use 7.0 or later), which will contain the class you need. For your convenience I have also recorded a video.

Third option is to create an extension method, receiving the pageId and based on that will return the page level, which will be assigned as a class.

Hope this information helps.

Regards,
Vassil Vassilev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 24-Jul-2014 00:00

Vassil you are an absolute life/time saver. class='<%#Eval("Title")%>' is exactly what I needed. Thank you so much.

Posted by Community Admin on 24-Jul-2014 00:00

Hello Michelle,

I am glad I managed to help.

Regards,
Vassil Vassilev
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

This thread is closed

All Replies