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

Forums / Designing with Sitefinity / Select single item from Site Menu

Select single item from Site Menu

4 posts, 0 answered
  1. Hector Sustaita
    Hector Sustaita avatar
    11 posts
    Registered:
    12 May 2010
    21 Jul 2010
    Link to this post
    Hi,

    I'm developing a website using Sitefinity 3.7, and I found an issue (hope not): I want to set a background image via CSS for the first item of the displaying menu (rmSlice), a different one for the middle items (rmItem) and another one for the last item (rmLast).
    I already achieve this when the menu has 2 or more items, but when is only one, the background image for the last item is shown, and thats not correct. I try to specify the .rmFirst .rmLast, with no success.

    So, because it is a SiteMenu, the items source is the sitemap and cannot be altered.

    Any ideas ??
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    21 Jul 2010
    Link to this post
    Hi Hector Sustaita,

    SiteMenu is standard RadMenu control. All server side, client side methods and Css file selectors works in the same way in Sitefinity. Is there any code or demo that you can share?

    Kind 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. Hector Sustaita
    Hector Sustaita avatar
    11 posts
    Registered:
    12 May 2010
    21 Jul 2010
    Link to this post
    Sure.

    I only have te css file. Like said before, when the submenu has only one item, the background image displayed is the one according to rmLast.

    .RadMenu_MenuJockey
    {
     height: 200px;
     width:215px;
    }

    .RadMenu_MenuJockey .rmItem
    {
        background-image:url('img/pa_menu.png');
        background-repeat:no-repeat;
        height:33px;
        width:215px;
    }

    .RadMenu_MenuJockey .rmLink,
    .RadMenu_MenuJockey .rmTemplate .rmText
    {
     font-weight:normal;
     font-size:14px;
     font-family:Times New Roman;
     text-decoration:none;
     color:White;
    }

    .RadMenu_MenuJockey .rmText
    {
        margin-left:10px;
        margin-top:6px;
    }

    .RadMenu_MenuJockey .rmItem:hover,
    .RadMenu_MenuJockey .rmItem .rmLink:hover,
    .RadMenu_MenuJockey .rmItem .rmText:hover,
    .RadMenu_MenuJockey .rmItem .rmExpanded
    {
        cursor:pointer;
        font-weight:bold;
    }

    .RadMenu_MenuJockey .rmSlide
    {
        margin-top:14px;
        margin-left:8px;
    }

    .RadMenu_MenuJockey .rmSlide .rmItem .rmText
    {
        margin-top:7px;
        margin-left:5px;
    }

    .RadMenu_MenuJockey .rmSlide .rmLink:hover
    {
        text-decoration:underline;
    }

    .RadMenu_MenuJockey .rmVertical .rmSlide .rmFirst
    {
        background-image:url('img/m_1.png');
        background-repeat:no-repeat;
    }

    .RadMenu_MenuJockey .rmSlide .rmItem
    {
        background-image:url('img/m_bg.png');
        background-repeat:repeat-y;
        margin-top:-13px;
    }

    .RadMenu_MenuJockey .rmVertical .rmSlide .rmLast
    {
        background-image:url('img/m_2.png');
        background-repeat:no-repeat;
    }

    .RadMenu_MenuJockey .rmVertical .rmSlide .rmLast .rmFirst .rmLast
    {
        background-image:url('img/m_2.png');
        background-repeat:no-repeat;
    }

  4. Hector Sustaita
    Hector Sustaita avatar
    11 posts
    Registered:
    12 May 2010
    21 Jul 2010
    Link to this post
    Hi.

    I have a side solution for my posted issue.
    Modifiying the User Control SiteMenu.ascx, inside the Sitefinity folder by changing the background image for those items that have only 1 child:

     

    <script type="text/javascript">

        function ItemOpening(menu, args) {

            var item = args.get_item();

            if (item.get_items().get_count() == 1) {

                item.get_items().getItem(0).get_element().className = "SingleItem";
            }
        }

    </script>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SitemapDataSource1"
                      OnClientItemOpening="ItemOpening">
    </telerik:RadMenu>


    So, creating a new css class called SingleItem, we can set the background:

    .SingleItem
    {
        list-style-type:none;
        background-image:url('img/pa_menu.png');
        background-repeat:no-repeat;
        padding-top:8px;
        margin-top:-14px;
        height:33px;
    }

    I'm not sure this is the best practice, but it works fine !!
Register for webinar
4 posts, 0 answered