Styling one Top Menu (RadTabStrip) differently

Posted by Community Admin on 05-Aug-2018 17:59

Styling one Top Menu (RadTabStrip) differently

All Replies

Posted by Community Admin on 16-May-2011 00:00
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
Posted by Community Admin on 18-May-2011 00:00
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.
Posted by Community Admin on 18-May-2011 00:00
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
Posted by Community Admin on 18-May-2011 00:00
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)

Posted by Community Admin on 18-May-2011 00:00
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

Posted by Community Admin on 18-May-2011 00:00
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
Posted by Community Admin on 19-May-2011 00:00
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.
This thread is closed