+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Individual Class/ID Names for Mega Menu

Individual Class/ID Names for Mega Menu

4 posts, 1 answered
  1. Michelle
    Michelle avatar
    9 posts
    Registered:
    17 Apr 2014
    21 Jul 2014
    Link to this post

    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.

  2. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    24 Jul 2014
    Link to this post
    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
     
    Answered
  3. Michelle
    Michelle avatar
    9 posts
    Registered:
    17 Apr 2014
    24 Jul 2014 in reply to Vassil Vassilev
    Link to this post

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

  4. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    Registered:
    21 Jan 2015
    24 Jul 2014
    Link to this post
    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
     
4 posts, 1 answered