jQuery driven sidebar

June 10, 2007

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";
padding: 5px;
margin: 2px;
dt a:hover {
dl {
font:12px "Trebuchet MS";
dd ul li {
margin:0 0 0 15px;
dd ul li a, dd ul li a:visited {
dd ul li a:hover {

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: