... Elxis version 2009.2 codename Electra is out, download it from Elxis Download Center (EDC) ...
Menus
From Elxis Official Documentation
Contents |
What is a menu?
A menu is a special Elxis module for displaying site links. Elxis by default has one such module and this is the mod_mainmenu module. You can create new instances of this module to create additional menus and set the display parameters independently to each instance. Such pre-defined instances are the mainmenu, topmenu, othermenu and systemmenu.
Control menu appearance
To control the menu appearance open the corresponding module for edit and set the menu style to Vertical, Horizontal or to Flat list. As Elxis 2008.x/2009.x generate table-less (X)HTML the output of the module in 2008.x/2009.x is different than the one in the Elxis 2006.x. Take a look to the following comparison table to see the differences.
| Menu style | Elxis 2006.x | Elxis 2008.x/2009.x |
|---|---|---|
| Vertical | The menu appears as a vertical table | The menu appears as set of links put side by side separated with <span> |
| Horizontal | The menu appears as an horizontal table | The menu appears as set of links put side by side separated with <span> |
| Flat List | The menu appears as a flat <ul> CSS list | The menu appears as a flat <ul> |
| Vertical and Horizontal styles have the same html output in Elxis 2008! The final display as well as the menu orientation is controlled only by CSS. Elxis Team recommends the usage of the Flat List style for any menu and the usage of css suffixes to distinguish various menus appearance. An other important notice is that in Elxis 2008.x you can not be based on the menu ID for your CSS as this ID changes randomly in order not to exist 2 menu items with the same ID (XHTML invalid). You should be based only on the module and the menu CSS classes (moduletable + suffix and mainlevel + suffix). |
Here is a sample menu output for style Flat List:
<div class="moduletable"> <h3>Menu title</h3> <ul id="mainlevel-nav805" class="mainlevel-nav"> <li><a href="http://www.elxis.org/extensions/" title="Extensions" class="mainlevel-nav">Extensions</a></li> <li><a href="http://www.elxis.org/blog/support/" title="Support" class="mainlevel-nav">Support</a></li> <li><a href="http://www.elxis.org/blog/contribute/" title="Contribute" class="mainlevel-nav">Contribute</a></li> <li><a href="http://www.elxis.org/blog/news/" title="News" class="mainlevel-nav">News</a></li> </ul> </div>
You can easily adopt Flat List CSS based menus published in various web sites to Elxis CMS. A sample site having such free menus is Listamatic
Create your first menu
When trying to get a particular menu to work create a default Elxis installation and then look at the code that is the topmenu or the othermenu. Copy and paste this code into an HTML editor like Dreamweaver, Frontpage or Nvu. Replace all the links by "#" and then you can add CSS rules until the effect you want is achieved. You can alternatively use directly the HTML code bellow (in a more compact way):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Menu</title> <style type="text/css"> <!-- .thisisyourCSS { /* put a rule here*/ } --> </style> </head> <body> <div class="moduletable"> <h3>My Menu</h3> <ul id="mainlevel198" class="mainlevel"> <li><a href="#" class="mainlevel" id="active_menu">Home</a></li> <li><a href="#" class="mainlevel">Discover Elxis</a></li> <li><a href="#" class="mainlevel">FAQs</a></li> <li><a href="#" class="mainlevel">The Elxis license</a></li> <li><a href="#" class="mainlevel">Elxis.org</a></li> <li><a href="#" class="mainlevel">Newsfeeds</a></li> </ul> </div> </body> </html>
Note the CSS is embedded rather than linked to make editing easier. When finish just copy the CSS used to your template's CSS file (If you used images don't forget to change their paths).
Additional help
Read also Navigation and menus
