Styling one Top Menu (RadTabStrip) differently - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Styling one Top Menu (RadTabStrip) differently

  • Styling one Top Menu (RadTabStrip) differently
  • I had to style one top navigation menu (RadTabStrip) from the navigation widget differently.

    This is how I did it. Since it took me a while to find the right way to do it I thought I share it.

    It might be a bad way (I was thinking about addCSS and style it in my theme but was lazzy so this is one way that worked.

    In my template I added the following JavaScript to be added before the closing body tag.

    $("span.rtsOut:contains('My Menu Text')").css('background-position':'100% -310px','font-size':'12px','color':'yellow');
    $("a.rtsLink:contains('My Menu Text')").css('background-position':'0 -310px');
    $("a.rtsLink.rtsSelected:contains('My Menu Text)").css('background-image':'none','background-color':'black');
    $("a.rtsLink.rtsSelected:contains('My Menu Text')").find('span').css('background-image':'none','background-color':'black');

    The fist two are for styling the menu item when not selected, the 3rd and 4th for styling the selected.

    Kind regards
  • If you want to make it run a bit faster...

    $("span.rtsOut:contains('My Menu Text')", "#PARENTCONTAINERSELECTOR")

    It'll constrain the jQuery search for the rtsOut span to the selector specified instead of parsing the entire DOM every time.
  • Dear Steve

    This was the first time I even worked with jQuery so you can imagine how hard is was for me to find the solution (fist find the right class of the menu then set the css.

    Can you provide the mentioned solution completele for my 4 lines with the css settings?

  • jQuery is awesome :)

    Ok, so you're solution isn't wrong :)  addClass is always easier to read\change, but there certainly isn't anything wrong with what you're doing.

    So what this does:
    $("span.rtsOut:contains('My Menu Text')")

    Is it looks over your entire HTML DOM and finds something that matches that depending on how large the markup is, that might take a if you RESTRICT the search to a parent div, then it will only have to find that element from that point

    So lets say your HTML is like this
    <div id="navigation">

    Then if you make your selector look like this
    $("span.rtsOut:contains('My Menu Text')", "#navigation")

    It will be much faster (re:less "popping" of DOM changes for the client)

  • Thanks for the explaination.

    I think to understand that by the way you do it you restrict jQuery only to search part of the HTML.

    Do I simply add my .css at the end of your line like

    $("span.rtsOut:contains('My Menu Text')","#navigation").css('background-position':'100% -310px','font-size':'12px','color':'yellow');


  • You got it!....everything else works as normal, it's just a little trick to squeeze a bit more performance out of a selector

    *EDIT* let me elaborate

    So jQuery works in Chaining right...each set of braces kind of becomes an object context.  So this
    $("span.rtsOut:contains('My Menu Text')","#navigation")
    becomes an object, and then the .css executes that function on that object.

    So it's EXACTLY the same as doing
    $("span.rtsOut:contains('My Menu Text')").css

    However the completion of that initial object selector just happens faster
  • Dear Steve

    I tried you solution wich worked but somehow I had the feeling it was slower. So I took the time to rewrite the whole thing and hope its faster now.

    I post it here if someone else looks for the a similar thing to do.

    What do you think?

    Regards Markus


    In my template I added the following JavaScript (to be run before closing of body). 
    'My Link' beeing the text of top Menu Item

    $(".RadTabStrip li:contains('My Link')").addClass('MMClass');

    In my TabStrip.MYSKIN.css (which i have in ~/css/ and added to my .master template)
    I added the following code at the bottom (so it will not be overwritten later in the CSS

    .MMClass .rtsLink .rtsOut,
    .MMClass .rtsLink .rtsOut:hover
    background-position:100% -310px !important;
    .MMClass .rtsLink,
    .MMClass .rtsLink:hover
        background-position:0 -310px !important;
    .MMClass  .rtsSelected .rtsOut,
    .MMClass .rtsSelected .rtsOut:hover,
    .MMClass .rtsSelected,
    .MMClass  .rtsSelected:hover
        background-image:none !important;
        background-color:Black !important;

    I addes some more designs to my TabStripStates.png of course and the css simply moves the background to that part of the sprite image. on selected I did not want any background image but once you know which css selectors to modify you could of course use the background sprite image as well.