Menu Styling

The menu css in v4-on is rather different from earlier releases, so some adjustment may be needed when upgrading a site. The most important change is that both top dropdown and side expanding menus use a large amount of common styling. This avoids the need to style each separately, saving a great deal of webmaster time. Some aspects are necessarily different, for example the topmost links in a dropdown menu list are inline page elements so that they display in a row, whereas all links in a side menu and those in the dropdown body itself are block elements, so they display as a column.

The system.css provides basic failsafe menu styling so that menus should work even with no frame stylesheet. Any site-specific menu styling should be added to the frame.css file in the active frame, and not to the system stylesheet. A typical frame stylesheet menu might contain these sections:


.sidemenu{
/*Determines overall styling of sidebar menu*/
}

.topmenu {
 /*Determines overall styling of top dropdown menu*/
}

.menutree a {
 /*Determines overall styling of links in both menus*/
}

.menutree a:hover {
 /* As above, for mouseover */
}

.topmenu a.menu_dropdown, .topmenu a.menu_single {
 /* Properties of the top line of items in dropdown menu 
    which might be dropdowns, or single links. */
}

.topmenu a.menu_dropdown:hover, .topmenu a.menu_single:hover {
 /* mouseover */
}

.menutree div{
  /* This typically contains only a margin value,
  which sets the indent depth for top & side submenus. */
  margin-left:8px;
}

.menutree div.menu_dropdown {
 /* Appearance of the dropdown boxes on the top menu
 (does not affect side menus) */
 }

.menutree a.menu_closed {
 /* Appearance of closed menu subsections 
 (applies to cascading sections only, not to page links) */
}

.menutree a.menu_open {
 /* Likewise open cascading sections */
}

.menutree a.menu_selected {
 /* Appearance of 'live' link to page being viewed */ 
}

.menutree a[href^=http]{
  /* Default appearance of offsite links 
  (note that this only works in recent browsers)  */
}

.topmenu a[href^=http]{
 /* Any differences required in topmenu offsite links */
}

.menutree a[href$='.pdf']{
 /* Likewise for Adobe documents */
}

.topmenu a[href$='.pdf']{
 /* and for top */
}

/* Unlikely these last two will be customised.. */
.menutree div.menu_closed {
  display:none;
}

.menutree div.menu_open {
  display:block;
}


The classes sidemenu and topmenu refer to respective menus only, whilst menutree refers to the lists of links in both.

At first sight this css probably looks a bit daunting, but you won't need to adjust every section on a typical site. It's actually a very logical system and once you get the feel of how it works you can turn-out a whole range of very different-looking menus with only this css. For some idea of what works well in each section, take a look at the frame.css for the example frames.

Mostly you can style things any way you like, however there are a few instances where altering attributes can lead to menus not working. For guidance on this, refer to the defaults in system.css:


.topmenu {
  float:left;
}

.menutree a {
  display:block;
 }

.menutree a.menu_dropdown, .topmenu a.menu_single {
  display:inline;
 }

.menutree div.menu_dropdown {
  display:none;
  position:absolute;
  z-index:999;
 }

.menutree a.menu_closed {
  display:block;
}

.menutree a.menu_open {
  display:block;
}

.menutree div.menu_closed {
  display:none;
}

.menutree div.menu_open {
  display:block;
}

The above system-default properties should not be over-ridden by settings in your frame unless you are very familiar with menu css and know exactly what you are trying to achieve. Other than that, feel free to get creative.


 

 

Powered by Hyperframe