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

Forums / Designing with Sitefinity / Sitemenu and pure css

Sitemenu and pure css

9 posts, 0 answered
  1. Rabindra
    Rabindra avatar
    106 posts
    Registered:
    17 May 2009
    14 Sep 2009
    Link to this post
    I have used a sitemenu for my verticle menu.
    I disabled embedded stylesheet, scripts, and skins.
    My sitemenu css looks at only ul and li and it works perfectly fine except for one thing. I am trying to add arrow to the right for Menu items that have sub menu items. I couldn't figure it out by using just css.
    I think I have to achieve this programmatically.

    So, how can I programmatically add arrow to the right to all menu items that have sub menu items?
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    14 Sep 2009
    Link to this post
    Hello Rabindra,

    Thank you for using our services.

    This can be achieved by CSS by setting the classes that are responsible for displaying the expand arrows to point to your arrow images. You can take a look at the RadMeny CSS Skin File Selectors - look for .rmLeftArrow, .rmRightArrow, .rmTopArrow, .rmBottomArrow style classes. Then should just apply them to the appropriate level of items. For example if you want expand arrows on your menu you can use the following sample CSS:
    .RadMenu_[YourSkin] .rmGroup .rmExpandRight, 
    .RadMenu_[YourSkin] .rmGroup .rmExpandLeft, 
    .RadMenu_[YourSkin] .rmTopArrow, 
    .RadMenu_[YourSkin] .rmBottomArrow, 
    .RadMenu_[YourSkin] .rmLeftArrow, 
    .RadMenu_[YourSkin] .rmRightArrow 
        backgroundtransparent url('arrows.png'no-repeat

    This should do the trick. If you have more questions, please feel free to contact us.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Rabindra
    Rabindra avatar
    106 posts
    Registered:
    17 May 2009
    14 Sep 2009
    Link to this post
    I am using firebug and I dont' see rmExpandRight.
    Is it because I have disable embedded stylesheet, scripts, and skins?
    Here is what I see. On line 3 span tag class there should be "rmText rmExpandRight" but it is not there. Only rmText is there.
    Any idea?

    <li class="rmItem"
       <class="rmLink " href="festivalsandevents.aspx"
         <span class="rmText">Festivals & Events</span> 
       </a> 
       <div class="rmSlide"
         <ul class="rmVertical rmGroup rmLevel1"
           <li class="rmItem rmFirst"
           </li> 
           <li class="rmItem rmLast"
           </li> 
         </ul> 
    </div> 

  4. Rabindra
    Rabindra avatar
    106 posts
    Registered:
    17 May 2009
    15 Sep 2009
    Link to this post
    If I disable EnableEmbeddedScripts="false" then I don't see ".rmExpandRight" but if enable "EnableEmbeddedScripts="true" then I see ".rmExpandRight".
    Therefore what you asked me to use is not working.
    I do not want to enable "EnableEmbeddedScripts="true"
  5. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    15 Sep 2009
    Link to this post
    Hi Rabindra,

    It is natural that you will not see those, since you have disabled embedded style sheets. In my first post I sent you the style rules that you should add to the skin of your site menu. Then it will work when you disable embedded style sheets your site menu styles are blank and you should build them from scratch.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Rabindra
    Rabindra avatar
    106 posts
    Registered:
    17 May 2009
    15 Sep 2009
    Link to this post
    No, it's not because I disabled embedded style sheets. It is because I disabled embedded scripts.

    I know you did send me the styles. The styles you sent only works when javascript is enabled. I want my menu to work when javascript is disabled. That is why I had EnableEmbeddedScripts="false".

    How come I do not see .rmExpandRight but I see others like .rmText, rmLink, rmItem and so on?

    If you want I can send you my css. Then you can disable embedded stylesheet, scripts, and skins in SiteMenu.ascx which is located at Navigation35 folder. The you will understand what I am trying to do.

    As I said earlier, I need the navigation to work without javascript enabled. So far my menu works but i only need the right arrow and I do not see .rmExpandRight.
  7. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Sep 2009
    Link to this post
    Hi Rabindra,

    Thank you for getting back to us.

    When you disable java script menu items do not expand anymore. Therefore the menu does not need expand arrows in the default scenario. This is why the particular CSS classes that I mentioned in my first post will no longer work. Since you see only first level items, or only one level to be more precise you can use the following style rule to set an arrow in the background:
    .RadMenu_[YourSkin].rmItem  
        backgroundtransparent url('http://delphi.com/images/app/productIndustry/navExpandArrow.gif'right no-repeat
        } 


    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Rabindra
    Rabindra avatar
    106 posts
    Registered:
    17 May 2009
    16 Sep 2009
    Link to this post
    Hi Radoslav,
         I think you missed my points. My menu does expand even when javascript is disabled.
    On the first post I wrote that my CSS  looks for ul and li items only.
    I have 3 level menu which is working perfectly fine with EnableEmbeddedScripts set to false.

    The first code you gave me worked fine even if I had javascript disabled but only if rmExpandRight class was listed beside rmText. I tested this by using Firebug. I added rmExpandRight and I can see right arrow.

    The second solution you gave me works too but shows arrow to all rmItem even if it doesn't have any sub menus. This is no good.

    As I showed you in my previous example and also the one below, the rmExpandRight is only created when EnableEmbeddedScripts is set to true.
    What creates rmExpandRight? Is there a way from code behind which sets rmExpandRight class? If yes can you give me an example?

    eg. EnableEmbeddedScripts="false"----------------no rmExpandRight
    <li class="rmItem"
         <class="rmLink " href="festivalsandevents.aspx"
            <span class="rmText">Festivals & Events</span> 
         </a> 
         <div class="rmSlide"

    eg. EnableEmbeddedScripts="true"----------------there is rmExpandRight
    <li class="rmItem" style="z-index: 8;"
         <class="rmLink rmExpanded" href="festivalsevents.aspx" style="width: 185px;"
             <span class="rmText rmExpandRight">Festivals & Events</span> 
         </a> 

  9. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    22 Sep 2009
    Link to this post
    Hi Rabindra,

    Thank you for getting back to me.

    I do understand what you are looking for, and having this without the embedded javascript is not so easy. Usually there are CSS classes that get applied for the the top level items (.rmRootGroup), then you have CSS classes that get applied for the rest of the levels (.rmGroup), or for each specific level (.rmLevel[n]). You would be able to write some styles using these selectors, however you will have to know at each time how many levels each of your top level items has.

    You can try to enable just a certain java script resource by following the example in this article - Disabling embedded resources. The specific script functions that are responsible for the Rad menu are Scripts/Menu/RadMenuScripts.js.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
9 posts, 0 answered