Individual Class/ID Names for Mega Menu - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Individual Class/ID Names for Mega Menu

  • Individual Class/ID Names for Mega Menu
  • 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.

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