Menu

  • Print

If you want to create a dropdown / fly-out menu's, see "Submenus".

 

In a default installation, without sample content, there is one menu item "Home" already active. It is recommended not to use the legacy configuration in the module settings. For the example site we have created the menu-items below.

 

Print screen without any additional CSS

 

Hoofdmenu ongestijld

 

 

Structure with classes and id's


div.moduletable_hoofdmenu
h3 Hoofdmenu
ul.menu_hoofdmenu
li.active.item1#current a
li.item2 a
li.item3 a
li.item4 Etc.

 

CSS

Menu with background colours.

 

div.moduletable_hoofdmenu h3 {
   margin: 5px 16px 0 0;
   padding: 3px 0 3px 3px;
   color: #ffffff;
   background-color: #ff2700;
}

div.moduletable_hoofdmenu ul.menu_hoofdmenu {
   list-style: none;
   margin: 0 16px 10px 0;
   padding: 0;
}

div.moduletable_hoofdmenu ul.menu_hoofdmenu li a, 
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:visited  {
   display: block;
   margin: 1px 0 1px 0;
   padding: 3px 4px 3px 4px;
   color: #ffffff;
   text-decoration: none;
   background-color: #ff2700;
}

div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:hover, 
div.moduletable_hoofdmenu ul.menu_hoofdmenu li.active a  {
   display: block;
   margin: 1px 0 1px 0;
   padding: 3px 4px 3px 4px;
   color: #ffffff;
   text-decoration: none;
   background-color: #8a0f00;
}

 

Print screen after applying CSS

 

Hoofdmenu met achtergrondkleuren

 

You can also use background images to style the menu.

 

hoofdmenu (a, a:visited) en hoofdmenu_hover (a:hover)

 

 

div.moduletable_hoofdmenu h3 {
   margin: 5px 16px 0 0;
   padding: 3px 0 3px 3px;
   color: #ffffff;
   background-color: #333333;
   border: 1px #660000 dotted;
}

div.moduletable_hoofdmenu ul.menu_hoofdmenu {
   list-style: none;
   margin: 0 16px 10px 0;
   padding: 0;
}

div.moduletable_hoofdmenu ul.menu_hoofdmenu li a, 
div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:visited  {
   display: block;
   padding: 2px 0 7px 4px;
   color: #660000;
   text-decoration: none;
   background-image: url(../images/hoofdmenu.gif);
   background-position: top left;
   background-repeat:repeat-x;
}

div.moduletable_hoofdmenu ul.menu_hoofdmenu li a:hover, 
div.moduletable_hoofdmenu ul.menu_hoofdmenu li.active a  {
   display: block;
   padding: 2px 0 7px 4px;
   color: #660000;
   text-decoration: none;
   background-image: url(../images/hoofdmenu_hover.gif);
   background-position: top left;
   background-repeat:repeat-x;	
}

 

Print screen after applying CSS

 

Hoofdmenu met achtergrond afbeeldingen

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.