... Elxis version 2009.3 codename Aphrodite is out, download it from Elxis Download Center (EDC) ...

InMenu (module)

From Elxis Official Documentation

Jump to: navigation, search
inMenu for Elxis CMS 2008.x and 2009.x+ (module)

The inMenu (module) is a small module by Apostolos Koutsoulelos that creates a two-level, horizontal suckerfish-type menu that let you add inner subtitles or blank spaces between menu options and create more than one column inside the drop-down menu, by reading the name of the Separator / Spaceholder type.

Contents

Details

Current Version: 1.0
Author: Apostolos Koutsoulelos
License: GNU/GPL
Compatibility: Elxis CMS 2008.x and 2009.x

Usage

Creating Titles, Spaces and Columns

The inMenu module works just like the preinstalled Elxis menu module; but in the contrary to the standard module, it reads the title of the Separator/Spaceholder and when the title matches one of the reserved names, the module creates either a menu title, a blank space or a column. Therefore, the most critical part comes when you create the menu associated to inMenu module.

When creating a menu:
* to add a Title inside your menu, create a new "Separator/Spaceholder" item and insert as name your title.
* to add a Blank Space inside your menu, create a new "Separator/Spaceholder" item and name it 'spacer'.
* to add a Column inside your menu, create a new "Separator/Spaceholder" item and name it 'column'.

Please note that there is no limit to the number of titles, blank spaces or columns you can create.

Class Module Suffix

Here is an example of the CSS code that must be added to customize.css file of your template:

.moduletable_mainmenu {
  float: left;
  width: 1186px;
  padding: 0px;
  margin: 0px;
  border: 1px solid #d5d5d5;
  border-top: 0px;
  border-bottom: 5px solid #8A818A;
  background: #f2f2f2;
  margin-bottom: 10px;
}
.moduletable_mainmenu ul {
  margin: 0px;
  padding-top: 10px;
  padding-left: 2px;
  padding-right: 5px;
  overflow: hidden;
}
.moduletable_mainmenu li {
  float: left;
  margin: 0px;
  margin-right: 5px;
  padding: 0px;
}
.moduletable_mainmenu li a {
  background: url(../images/nav.png) top left scroll;
  display: block;
  text-decoration: none;
}
.moduletable_mainmenu li a span {
  background: url(../images/nav.png) top right scroll;
  color: #555555;
  display: block;
  font: 0.9em verdana;
  line-height: 30px;
  height: 30px;
  padding-left: 5px;
  padding-right: 10px;
  margin: 0px;
  margin-left: 5px;
  display: block;
}
.moduletable_mainmenu li a span img {
  position: relative;
  top: 8px;
}
.moduletable_mainmenu li a:hover {
  background: url(../images/nav_h.png) top left scroll;
}
.moduletable_mainmenu li a:hover span {
  background: url(../images/nav_h.png) top right scroll;
 color: #919191;
}
.moduletable_mainmenu li a#active_menu_mainmenu {
  background: url(../images/nav_a.png) top left scroll;
}
.moduletable_mainmenu li a#active_menu_mainmenu span {
  background: url(../images/nav_a.png) top right scroll;
  color: #ffffff;
}
.moduletable_mainmenu div.submenu {
  display: none; 
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1000;
  padding: 5px;
  border: 1px solid #8A818A;
  border-bottom: 5px solid #8A818A;
  background: #ffffff url(../images/subbg.png);
}
.moduletable_mainmenu div.submenu-column {
  float: left;
  min-width: 160px;
  min-height: 160px;
  margin: 0px;
  padding: 0px;
}
.moduletable_mainmenu div.submenu-column-sep {
  float: left;
  min-width: 160px;
  min-height: 160px;
  margin: 0px;
  padding: 0px;
  padding-left: 5px;
  background: transparent url(../images/subcol.png) no-repeat;
}
.moduletable_mainmenu div.submenu ul {
  padding: 0px;
  margin: 0px;
}
.moduletable_mainmenu div.submenu ul li {
  float: none;
  width: 150px;
  padding: 0px;
  margin: 0px;
}
.moduletable_mainmenu div.submenu ul li a {
  background: transparent url(../images/star.png) no-repeat -5px 50%;
  width: 150px;
  border: 1px solid transparent;
}
.moduletable_mainmenu div.submenu ul li a span {
  background: transparent;
  padding-left: 10px;
  width: 150px;
  letter-spacing: -1px;
}
.moduletable_mainmenu div.submenu ul li a:hover, .moduletable_mainmenu div.submenu ul li a#active_menu_mainmenu:hover {
  border: 1px solid #8A818A;
  background: #f2f2f2;
  width: 150px;
}
.moduletable_mainmenu div.submenu ul li a#active_menu_mainmenu {
  background: transparent url(../images/star.png) no-repeat -5px 50%;
  width: 150px;
  border: 1px solid transparent;
}
.moduletable_mainmenu div.submenu ul li a#active_menu_mainmenu span {
  background: transparent;
  padding-left: 10px;
  width: 150px;
  font-weight: bold;
  color: #555555;
}
.moduletable_mainmenu div.submenu ul li.submenu-spacer {
  height: 10px;
}
.moduletable_mainmenu li.submenu-title {
  margin-left: 25px;
  color: #919191;
  width: 150px;
}

Here is the visual result:

inMenu module
inMenu module

Support

The inMenu (module) is supported either at Official Elxis Forum or at the developer's official forum (BitCraft-labs.gr).

Personal tools