Saturday, June 9, 2007

jQuery driven sidebar

The collapsible sidebar requires html tags dl, dt and dd. In full dl stands for Definition Listing, dt is Definition Term and dd is Definition Description. These tags must be nested in the right order for this jQuery driven collapsible menu sidebar to work.

If you have a traditional sidebar listing using ul and li tags it's just a matter of adding dl, dt and dd tags to them to make it work. Alternatively you could style these tags to suit. I was using a class id as "leftbar" to style sidebar listings, now I could style as example below instead.


dt {
background: #E5E5FF;
font-size: 15px;
}
dt a {
color: #0000ff;
font:13px "Trebuchet MS";
display:block;
padding: 5px;
margin: 2px;
text-decoration:none;
}
dt a:hover {
color:#fff;
background-color:#7F80FF;
}
dl {
font:12px "Trebuchet MS";
float:left;
width:200px;
padding-left:0px;
}
dd ul li {
margin:0 0 0 15px;
}
dd ul li a, dd ul li a:visited {
color:blue;
text-decoration:none;
}
dd ul li a:hover {
color:#00BEFF;
}


Habari won't load jQuery script file until user has logged in. In my case jQuery used up 411 msec out of a total of 1.24 seconds to load this site. This looks a fair % due to this light weight theme so if you have a lot to show on the sidebar I guess this is still worth the time, I think.

Another trick you could play would be restricting certain menu group or links by taking out a 'dt' tag. See below example.

[?php if (...check user login...) { _e('[dt]'); } else { _e("Login to expand "); } ?][a href="#"]Spare[/a][/dt]


Without the opening 'dt' tag this group is not expandable until admin or someone is logged in. You know of course content is only hidden but viewable under "view source" unless you made them conditional in the script above.

No comments:

Post a Comment