User menu

Theme switcher

BTdotorg

wiki » MenutreeTemplates

Home :: Categories :: Page index :: Search :: Help :: Log in :: Recent changes RSS

Intro

The MenuTree block is developed for a multi level menu that is easy to create
and administrate. The block is developed by Pawel (Jusuff) and the project can be found here∞ in CoZi. Version 2.x has a new and improved Admin interface that is really great. By default the block comes with a limited set of templates for a vertical and horizontal menu.

A number of additional templates and style-sheets have been created to provide an extra set of ready made (fancy) menus to choose from in MenuTree. New plugins are added to generate the menucontent for the html page in a different way then the default unordered list. Some menus use javascript for effects or browser specific code, others use only CSS (with IE specifics in there).

The menus are mostly based upon menus from dynamicdrive.com and upon the work from Stu Nichols on cssplay.co.uk. I personally prefer the menus from cssplay, because of their pure css markup, validated code and elegance. But the dynamicdrive menus are also great.
Original style sheets and javascripts have of course been modified to fit
the Zikula (and BlankTheme) framework. Some templates are still in development*, so don't be surprised if some template receives a new version (or name) along the line.
Erik Spaan and the BlankTheme team, 25.02.2008

For every menu holds that you should check out the Terms, conditions and Copyright terms on the menu original website.
Respect the copyright in the style sheets and consider making a donation if possible to the originator (and me if you like :-) )

Templates and Styles

The templates are located in pntemplates/, style sheets in pnstyle/, the plugins
in pntemplates/plugins/, javascripts in pnjavascript/ and images in pnimages/<menusubdir>/.
All menus should be cross browser compatible, minor difference in layout might be
visible.
Not all menus are infinitely multi-level, so take that into account when choosing a specific menu.
Of course a lot of the menus can be combined and extended, but this is not always trivial.
If you do extend or change a menu send me an E-Mail: erik AT erikspaan DOT nl, it might be nice to include it for others to use.

Naming convention

I've tried to get some order in the template and style sheet naming by referering to them as menutree_block_TMPLNAME.htm, the style sheets that go with it as TMPLNAME[_STYLENAME].css and the images in subdir pnimages/TMPLNAME/

Menus from cssplay.co.uk

The menus from cssplay.co.uk (Stu Nichols) are not open source and not free to use in every circumstance. Do check out the Terms, conditions and Copyright∞ terms on every menus website page. For commercial use of the menus you will have to ask Stu for permission and make a donation. For personal use retain a link to cssplay.co.uk on your site and do consider a donation to Stu Nichols. I had to adapt the menus slightly to fit into the menutree block and Zikula themes.

Horizontal 6level pure CSS dropdown menu with overlap and overrun
Menu that uses only css and no javascript, based upon http://www.cssplay.co.uk/menus/simple_vertical.html∞

Plugin: menucssplay
  • menutree_block_cssplay_simpledrop.htm (cssplay_simpledrop.css, cssplay_simpledrop_blackblue.css, cssplay_simpledrop_blackred.css, cssplay_simpledrop_blueblack.css, cssplay_simpledrop_bluered.css, cssplay_simpledrop_grayblue.css, cssplay_simpledrop_grayred.css, cssplay_simpledrop_redblack.css)

Examples:
,

Horizontal multi level CSS Pro dropdown menus
The menus are adaptations of http://www.cssplay.co.uk/menus/pro_drop8.html∞ (and prodrop2∞, prodrop3∞ and prodrop6∞. This
slightly adapted version supports 6 levels as in the simpledrop menu.

Plugin: menucssplayprodrop
  • menutree_block_cssplay_prodrop.htm (cssplay_prodrop_2.css, cssplay_prodrop_3.css, cssplay_prodrop_6.css, csspplay_prodrop_8.css))

Examples:
, , ,

Vertical 4level pure CSS flyout
Menu that uses only css and no javascript, based upon http://www.cssplay.co.uk/menus/flyout_4level.html∞ and http://www.cssplay.co.uk/menus/flyout3.html∞

Plugin: menucssplay
  • menutree_block_cssplay_flyout.htm (cssplay_flyout_ltr.css, cssplay_flyout_rtl.css)

Examples:
,

Menus from dynamicdrive.com

Horizontal 2level dropdown tabs
Menu based upon http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm∞
The solidblock is an expanded drop down version of the
http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/∞ on dynamic drive.
All Horizontal 1level CSS menus listed in the CSS library of dynamic drive
( http://www.dynamicdrive.com/style/csslibrary/category/C1/∞ ) could be expanded
into drop down menus. Check out the solidblock style sheet on how to do it.

Javascript: dropdowntabs.js
Plugin: menudiv
  • menutree_block_ddtabs_blue.htm (ddtabs_blue.css)
  • menutree_block_ddtabs_blackpurple.htm (ddtabs_blackpurple.css)
  • menutree_block_ddtabs_glowing.htm (ddtabs_glowing.css)
  • menutree_block_ddtabs_halfmoon.htm (ddtabs_halfmoon.css)
  • menutree_block_ddtabs_slidingdoor.htm (ddtabs_slidingdoor_brown.css, ddtabs_slidingdoor_gray.css)
  • menutree_block_ddtabs_solidblock.htm (ddtabs_solidblock_blackblue.css, ddtabs_solidblock_blackred.css, ddtabs_solidblock_blueblack.css, ddtabs_solidblock_bluered.css, ddtabs_solidblock_grayred.css, ddtabs_solidblock_redblack.css)

Horizontal 2level chrome style dropdown
Based upon http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm∞ the following template is available.

Javascript: chromedropdown.js
Plugin: menudiv
  • menutree_block_chromestyle.htm (chromestyle_grayblue.css, chromestyle_pink.css, chromestyle_blue.css, chromestyle_green.css)

Horizontal multi level suckertree dropdown
This menu uses the techniques from the suckerfish menus∞ and uses javascript to overcome browser specifics. Another variation is the Son of Suckerfish Dropdowns∞.
This menu is based upon http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/∞

Javascript: suckertreehoriz.js
Plugin: menutree
  • menutree_block_suckertree_horizontal.htm (suckertree_horizontal_blue.css, suckertree_horizontal_red.css)

Vertical multi level suckertree flyout
This menu uses the techniques from the suckerfish menus∞ and uses javascript to overcome browser specifics. It is based upon http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/∞

Javascript: suckertreevert.js
Plugin: menutree
  • menutree_block_suckertree_vertical.htm (suckertree_vertical_blue.css, suckertree_vertical_red.css)

Plugins

function.menucssplay.php

This plugin will parse the structured tree array to a div with a multi level unordered lists for display with a pure css method. Several conditional statements are generated for IE browsers to make them also robust for the pure css menu. Check the code for a description of parameters.
Parameters: data, assign, ulclass, dropclass, flyclass, currentclass, iehacks

function.menucssplayprodrop.php

This plugin will parse the structured tree array to a div with a multi level unordered lists for display with a pure css method. Several conditional statements are generated for IE browsers to make them also robust for the pure css menu. Check the code for a description of parameters.
Parameters: data, assign, ulclass, currentclass, span, iehacks, iframe

function.menudiv.php

This plugin will parse the structured tree array for the 1st level menu in an div with unordered list and 2nd (and beyond) level drop down menus are put in a seperate div after the 1st level unordered list is closed.
The 1st level links use the rel attribute in the anchor link to refer to the correct submenu.
Check the code for a description of parameters.
Parameters: data, assign id, class, subclass, span

Extensions, plans & future

Several new templates and styles are in the planning or would be nice to have.
Page history :: 2009-11-29 21:54:25 Revisions of "MenutreeTemplates" Feed :: Owner: nestormateo ::

Comments

Only logged in users are allowed to comment. register/log in