irislines web design
irislines web design

Adjacent selectors to hide certain Joomla! menu items

Actually, this solution was first used to tame a “Custom Properties” Tag Cloud.

The site was for negreenhouseupdate.info and we wanted to display the topical tags but not the month and year tags. First I sorted the months and years to the end of the list by adding x or y to the tag name (The tag cloud sorts alphabetically.) Then I added a css rule to hide them:

ul.cpcloud li+li+li+li+li a {display:none;}

The number of “li”s was one more than the number of topical tags in use.

On another site for UMass, Beth wanted to hide a couple of links in a Jooma sub-menu (because they would appear in separate modules, but needed to be part of the sub menu so that the rest of the sub menu would still display.) We sorted the two links to the TOP of the menu. Assigned a class to the menu and then hid all li’s and then displayed all but the first two:

ul.class li {display:none;}
ul.class li+li+li {display:block;}

In the first case, if IE6 doesn’t support the adjacent selector, the worst that will happen will be that IE6 users will see the extra tags listed.

In the second case, the entire menu would remain hidden, so we’ll need an IE6 only rule to display all of the links.

A good idea!

Working with Beth Armour this morning, we laughed at how often we figure out a solution and then forget it.   The same or similar problem comes up again and we have the niggling feeling that we’ve solved this before…. but don’t quite remember what the deal was.

“We should have a blog to record these things….”

We work in html, css, Joomla!, Word Press and various programs and languages to support web development.  While the blog title is “Joomla Solutions”  it may include other kinds of solutions as well,  but no “red wine out of the carpet” tips…  promise!

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391

info@irislines.com