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

Forums / Designing with Sitefinity / Assigning Classes to Dropdown Navigation

Assigning Classes to Dropdown Navigation

4 posts, 0 answered
  1. Greg
    Greg avatar
    82 posts
    Registered:
    08 Aug 2012
    17 Nov 2010
    Link to this post
    Hello -

    I'm using the SiteMenu navigation control to create dropdown navigation for my site. I'm actually porting over my existing site to Sitefinity 3.7, so the navigation is already styled how I want it. However, I'm trying to assign a class of 'dir' to the <li> elements in my navigation, like so:

    <ul id="nav" class="dropdown dropdown-horizontal">
        <li class="dir"><a href="/Industries/Default.aspx">Industries</a>
            <ul>
                <li><a href="/Industries/Agriculture.aspx">Agriculture</a></li>
                <li><a href="/Industries/Education.aspx">Education</a></li>
                <li><a href="/Industries/Government.aspx">Government</a></li>
                <li><a href="/Industries/Health.aspx">Health</a></li>
                <li><strong><a href="/Industries/Default.aspx">See All Industries »</a></strong></li>
            </ul>
        </li>
        <li class="dir"><a href="/Support/Default.aspx">Support</a>
            <ul>
                <li><a href="/Support/Default.aspx">Support Home</a></li>
                <li><a href="/Support/Create_Support_Ticket.aspx">Create Support Ticket</a></li>
                <li><a href="/Support/Remote_Support_Request.aspx">Remote Support Request</a></li>
                <li><a href="/">Helpdesk Portal</a></li>
                <li><a href="/">Project Extranet</a></li>
                <li><a href="/Contact/Default.aspx">Contact Us</a></li>
            </ul>
        </li>
         
    </ul>

    Is there a way to assign this class to my <li> elements? I looked through the options in SiteMenu and only saw a selected class and class for the whole item.

    Thanks!

    Greg
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    17 Nov 2010
    Link to this post
    Hello Greg,

    Here are the available selectors that you can use out of the box

    .rmItem

    LI

    Applied to the LI elements enclosing each item.

    .rmFirst LI Applied to the LI element enclosing the first item in a group. Used to customize the appearance of the first item only:

    .RadMenu_Office2007 .rmGroup .rmFirst .rmLink,
    .RadMenu_Office2007 .rmGroup .rmFirst .rmTemplate
    {
      background: transparent url(Menu/MenuItemBgFirst.gif) no-repeat left bottom;
      line-height: 58px;
    }
    .rmLast LI Applied to the LI element enclosing the last item in a group. Used to customize the appearance of the last item only:

    .RadMenu_Office2007 .rmGroup .rmLast .rmLink
    {
      background: transparent url(Menu/MenuItemBgLast.gif) no-repeat;
      line-height: 58px;
    }
    .rmSeparator LI Applied to the LI element enclosing an item that is a separator (IsSeparator is True).


    Another option is using jQuery and its css methods.

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Greg
    Greg avatar
    82 posts
    Registered:
    08 Aug 2012
    17 Nov 2010
    Link to this post
    Hey Ivan -

    Thanks, as always, for the quick response. I guess I'll just change my class names and use the built in class names provided by SiteMenu.

    Thanks again,

    Greg
  4. Greg
    Greg avatar
    82 posts
    Registered:
    08 Aug 2012
    18 Nov 2010
    Link to this post
    Well I settled on using a shared generic content item to use for navigation. Not ideal, but having to override tons of styles applied for the RadMenu was getting to be difficult and very time consuming. In Sitefinity 4 I'd love to see the option of creating a very clean, standard navigation list with no classes or ID's applied (or at least none that already have built-in styles affecting them).

    Thanks,

    Greg
Register for webinar
4 posts, 0 answered