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 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.

Tags: , ,

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391