iris lines designs

802 257 7391
info@irislines.com

JoomlaSolutions - and other discoveries

A place to keep track of and share CMS and CSS solutions

May 13
2009

Adjacent selectors to hide certain Joomla! menu items

Posted by: barb

Tagged in: menus , Joomla , css

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.


irislines.com ©2010 photo by Rich Kaszeta