Hierarchical Menu

Hierarchical menu, based on rubytree gem. Outputs html (other formats planned) with optional JavaScript show/hide.

Example client code.

See examples/example.rb and examples/example.css in the distribution directory.

Synopsis

require 'hmenu'

root = HMenu::Node.new('ROOT')

Simple example:

root.add_path('/aaa/bbb/ccc/eee', {
  # all keys are optional
  :name         => 'test2',
  :href         => '/xxx/yyy/2.html',
  :n            => 10
  :extra_class  => 'my-css-class hmenu-selected'
})

CSS class hmenu-selected is special: it will be “opened” on startup by the “embedded” JavaScript code (see below).

The :n key will be used to sort list items.

HTML list generator:

html_ul_simple = root.to_html_ul

Customize behavior

You can add any extra/custom information:

root.add_path('/aaa/bbb/ccc/ddd', {
  :name => 'test1',
  :href => '/xxx/yyy/zzz.html',
  :custom_info => Object.new
})

And then match within a code block to “mangle” the output:

html_ul = root.to_html_ul do |node, output| # code block is optional!
  if
      node.content.respond_to? :[] and
      node.content[:custom_info].class == Object

    output[:name] += ' (extra_info is just an Object)'  # edit text
    output[:extra_class] = 'hmenu-selected'             # add a CSS class
    output[:href] = nil                                 # turn off hyperref
  end
end

Style and JavaScript to show/hide: complete HTML output

Some Style (HMenu::CSS), and some JavaScript code (HMenu::JS) to show/hide submenus:

puts "<head>\n  <script type=\"text/javascript\">\n    \#{HMenu::JS.out}\n  </script>\n  <style type=\"text/css\">\n    \#{HMenu::CSS.out} \n    \#{File.read File.join HMenu::ROOTDIR, 'examples/example.css'}\n  </style>\n</head>\n<body onload=\"reset_menus();\">\n  \#{html_ul}\n</body>\n" # you may use a template system like ERB if you wish...

Installation

gem install hierarchical_menu

Author

Copyright 2010 Guido De Rosa <[email protected]>

License

Same of RubyTree.