dhtml-menu functionality w/o the menu module

So why would you want to take advantage of dhtml-menu functionality w/o using the built in Drupal menu module?
In this case we want to use the nested menus style for the content while employing consistent show-hide functionality. Here’s the catch: The content isn’t a list of links it’s paragraphs where each section heading collapses and expands the sub-content.
I’ve used a simple 3 line javascript function to show/hide sub content in the past but here again we’re trying to keep it consistent.

This problem may have a better solution but the hang up is that dhtml-menus don’t have an option to include a body of text in place of a link, it only tolerates a single line of text (maxed at 250 chars?). You can add your content as the description of the link but it only shows up in the link title and while you can display that with some css or javascript tricks. It’s not entirely cross-browser friendly and not the intended behavior of the dhtml-menu or the built in menu module. The main problem there is that formatting is stripped out of the title and the ability to show/hide it’s own description is very different concept from how the menu’s work now.

In testing, I created a menu where each item had a sub menu item and said sub menu item had a description aka link title.
But how to hide the submenu link name but show the content?

/*hack to show link title as sub text*?
.content-body li.expanded > ul li a {color:white;}
.content-body li.expanded > ul li a.active:before {color:black; vertical-align:text-top; display:block; margin:6px; content:"  " attr(title) "";}


content:"  " attr(title) "";

are the key components here.
You’ll also see the color:white… That’s a cheap way to hide the link while showing the title.
Mashed Jobs uses a nice jQuery / javascipt that removes the link titles and put them into a styled popup attached to the mouse when you hover over the link. So there are tools out there that play nice with link titles but that’s taking it too far perhaps.

I also investigated duplicating dhtml-menu and adding in the new functionality but I’m new to Drupal and I got pretty far down the rabbit hole when I decided that I may not be able to use it on specific page and I wasn’t able to narrow down where the functionality is that builds the link. Digging through the root menu module was helpful but not fruitful.

So I decided to use the built-in html and css for the menu list structure and capitalize on the existing code to make the menu work.

<div class="inlineDropDown">
  <div class="block block-menu">
    <h2 class="title">ODT Strategic Framework (Vision, Mission, Goals, Values)</h2>
    <div class="content">
      <ul class="menu">
        <li class="expanded dhtml-menu collapsed start-collapsed first"><a href="/homepage">ODT Vision</a>
          <ul class="menu">
            <li class="leaf last dhtml-menu">Be a leader in the field of organizational development and training, modeling strategic leadership that shapes avenues of opportunity for optimal individual and organizational success, while enhancing equality of opportunity and pluralism through the understanding and respecting of differences. </li>
        <li class="expanded dhtml-menu collapsed start-collapsed"><a href="/homepage">ODT Mission</a>
          <ul class="menu">
            <li class="leaf last dhtml-menu">Using proven organizational development and training strategies Organizational Development and Training makes available appropriate professional and organizational development programs and opportunities that assist employees, and the institution, in acquiring, developing, and maintaining the knowledge, skills, and competencies necessary for fulfilling employee and institutional roles and responsibilities. </li>

So there it is, a hand coded version of the menu structure with collapsible sections. Nested sections work too.
CSS and javascript do the rest.

If you want all the sections expanded removed, “expanded” is already in there, and remove “start-collapsed.”
That’s it.
I also added one more piece of css for removing the bullet on that descriptive text:

.homepage li.leaf { list-style:none;}
Leave a Reply to Vid