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

Forums / Designing & Styling / Styling one Top Menu (RadTabStrip) differently

Styling one Top Menu (RadTabStrip) differently

7 posts, 0 answered
  1. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    16 May 2011
    Link to this post
    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
    Markus
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    18 May 2011
    Link to this post
    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.
  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    18 May 2011
    Link to this post
    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?

    Markus
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    18 May 2011
    Link to this post
    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 selector...so depending on how large the markup is, that might take a second...so 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">
          ...[TABSTRIP]
    </div>

    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)

  5. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    18 May 2011
    Link to this post
    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'});

    Markus

  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    18 May 2011
    Link to this post
    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
  7. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    19 May 2011
    Link to this post
    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;
    font-size:12px;
    color:yellow
    }
    .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.
7 posts, 0 answered