Menu

For creating submenus, see the leftmenu for Sub menus

 

Print screen without additional CSS

 

Menu

 

Structure with Classes and ID's

 

div.moduletable_mainmenu
	h3
	ul.menu
		li#item-001.current.active a (Joomla 1.6)
		li#item-002 a (Joomla 1.6)
		li.item-001 .current.active a (Joomla 1.7 / 2.5)
		li.item-002 a (Joomla 1.7 / 2.5)

 001, 002 etc = ID number of the menu-item

 

In the example structure "_mainmenu" de module class suffix.

For Joomla 1.6 the specific menu list-item is an id (li#item-xxx).

For Joomla 1.7 and 2.5 this is a class (li.item-xxx).

 

 

CSS

 

/* ------------------------------------------------------------
   mainmenu * moduleclass suffix = _mainmenu, Menu tag ID = nav
--------------------------------------------------------------- */ 
div.moduletable_mainmenu {
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
	border-bottom: 1px #999 solid;
}

div.moduletable_mainmenu h3 {
	display: block;
	padding: 2px 5px 2px 5px;
	background-color: #ff0000;
	color: #fff;
}

div.moduletable_mainmenu ul {
	list-style: none;
	padding: 0;
}

div.moduletable_mainmenu ul li {
	list-style: none;
	padding: 0;
	margin: 2px 0 0 0;
}

div.moduletable_mainmenu ul li a {
	display: block;
	background-color: #e5e5e5;
	padding: 2px 5px 2px 5px;
	text-decoration: none;
}

div.moduletable_mainmenu ul li a:hover,
div.moduletable_mainmenu ul li.active a {
	display: block;
	background-color: #ccc;
	padding: 2px 5px 2px 5px;
	text-decoration: none;
}

 

 

Print screen after applying CSS

 

Menu

Comments (0)
Post a commment or ask a question!
Your Contact Details:
Comment:
Security
Please input the anti-spam code that you can read in the image.