Express Individual Menu Item Styling

Written by JoomlaEZ admin. Published on Wednesday, 10 June 2009 09:11 Last updated on Thursday, 11 June 2009 14:45

Express individual menu item styling is a benefit of JEZ Thema PRO edition over the free one. With express individual menu item styling feature, you can create individual styling for any menu item of any menu module anytime anywhere.

In Joomla, you can define either module or menu class suffix to apply individual styling for the whole menu module. Now, with JEZ Thema, you can apply difference styling for any individual menu item without the need of specifying module / menu class suffix.

See the menu module at the left column for express individual menu item styling demo.

When using Joomla menu module (mod_mainmenu)'s List menu style to display menu item, JEZ Thema will automatically apply a auto-generated class for each menu item. The class is generated from the menu item's title by lowercasing all alphanumeric characters then stripping out all non-alphanumeric characters with white space character replaced with - character.

For example, if the menu item's title is Buy PRO Edition: 11.92 USD then the auto-generated class attribute for menu item link will be buy-pro-edition-1192-usd. Then creating individual style for it is as simple as defining style for following CSS selectors:

ul.menu li.buy-pro-edition-1192-usd {
	/* put individual style for menu item here */
}
ul.menu a.buy-pro-edition-1192-usd,
ul.menu span.separator.buy-pro-edition-1192-usd {
	/* put individual style for menu item here */
}
ul.menu a.buy-pro-edition-1192-usd span,
ul.menu span.separator.buy-pro-edition-1192-usd span {
	/* put individual style for menu item here */
}