Sub sub Menu

marine / 2010-08-19 10:03:32   

I have a question:
I would like make this in the main menu:


How i can do it?
I'm sorry for my english, i'm french.

Thanks you.

lemathieu A / 2010-08-19 10:12:16   

Sorry, you can't do that without a lot of coding skills.


marine / 2010-08-19 12:50:24   

Thank you for your answer.
Can you tell me how to procede in few words please...
and i will manage on my own
Please. I'm motivated
Thank you very much.

Vaska A / 2010-08-19 12:57:39   

Learn PHP. This is really not that simple...takes a good deal of skill.

marine / 2010-08-19 17:15:37   

Thanks for your quickness.

hmadrona / 2010-08-24 19:24:44   

Hi all,

I've been working on an approach to two-level menus that may suit you.

My goals were the following:

1. Generate menus with two level of depth
2. Implement expanding menus on top of it
3. Minimize the tampering with the core of indexhibit or its data model

The way you manage the nesting in the administration tool is as follows:

* Exhibits are created in the normal way, no matter the nesting level they are.
* When you need nested exhibits, you give them a "nested" name of the format <subsection title> / <exhibit title>. (Please notice the blanks before and after the slash.)
* The code provided below will do the trick:
    - It detects the nested exhibits and creates a subsection that groups all the correlative exhibits that share the same subsection title.
    - The menu displays the nested exhibits without the subsection title (i.e. <exhibit title>)
    - Macro <%title%> will still provide the full name of the slide <subsection title> / <exhibit title>

I found this approach very simple and straightforward.

Following your example:


You'll create under section Exemple the following exhibits:
* Ex1
* Ex2 / Ex2.01
* Ex2 / Ex2.02
* Ex3

Et Voilà!

  1. You will get the following HTML output:
  2. <ul class='<strong>section</strong>'>
  3. ¬†¬†<li class='<strong>section-title</strong>'><em>Exemple</em></li>
  4. ¬†¬†<li><a href='...'><em>Ex1</em></a></li>
  5. ¬†¬†<li class='<strong>subsection-title</strong>'><span><em>Ex2</em></span>
  6. ¬†¬†¬†¬†<ul class='<strong>subsection</strong>'>
  7. ¬†¬†¬†¬†¬†¬†<li><a href='...'><em>Ex2.1</em></a></li>
  8. ¬†¬†¬†¬†¬†¬†<li><a href='...'><em>Ex2.2</em></a></li>
  9.     </ul>
  10.   </li>
  11. ¬†¬†<li><a href='...'><em>Ex3</em></a></li>
  12. </ul>

As you can see, sections/subsections and titles are given appropriate classes to allow for easy styling and simple manipulation with JQuery.

In order to achive this, I made the following changes to the basic indexhibit installation:

1. Changes to /ndxz-studio/site/plugin/index.php:

Modify function sectional() in order to render menus with the structure described above.
Note: The variable $separator (see line highlighted in bold below) defines the string used as "nesting separator". The value can be customized of course as needed. It is " / " by default. (Please notice the blanks before and after the slash.)

  1. // sections navigation
  2. function sectional()
  3. {
  4.   $OBJ =& get_instance();
  5.   global $rs, $default;
  7.   $pages = $OBJ->db->fetchArray("SELECT id, title, url, 
  8.     section, sec_desc, sec_disp, year, secid    
  9.     FROM ".PX."objects, ".PX."sections 
  10.     WHERE status = '1' 
  11.     AND hidden != '1' 
  12.     AND section_id = secid  
  13.     ORDER BY sec_ord ASC, ord ASC");
  15.   if (!$pages) return 'Error with pages query';
  17.   foreach($pages as $reord)
  18.   {
  19.     $order[$reord['sec_desc']][] = array(
  20.       'id' => $reord['id'],
  21.       'title' => $reord['title'],
  22.       'url' => $reord['url'],
  23.       'year' => $reord['year'],
  24.       'secid' => $reord['secid'],
  25.       'disp' => $reord['sec_disp']);
  26.   }
  28.   $s = '';
  29. <strong>¬†¬†$separator¬†=¬†'¬†/¬†';¬†¬†¬†// Nesting Separator</strong>
  30.   $len_separator = strlen( $separator );
  32.   foreach($order as $key => $out)
  33.   {
  34.     $s .= "<ul class='section'>n";
  36.     if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>n";
  38.     $nested = "";
  39.     $nesting = false;
  41.     foreach($out as $page)
  42.     {
  43.       $active = ($rs['id'] == $page['id']) ? " class='active'" : '';
  45.       // -- Compute if nested or not
  46.       $title = $page['title'];
  47.       $pos = strpos( $title, $separator );
  49.       if ( $pos === false )
  50.       {
  51.         $new_nested = "";
  52.       }
  53.       else
  54.       {
  55.         $new_nested = substr( $title, 0, $pos );
  56.         $title = substr( $title, $pos + $len_separator );
  57.       }
  59.       $close_nesting = $nesting && ( ( $new_nested == "" ) || ( $new_nested != $nested ) );
  61.       if ( $close_nesting )
  62.       {
  63.         $nesting = false;
  64.         $nested = "";
  65.         $s .= "</ul></li>n";
  66.       }
  68.       $open_nesting = !$nesting && ( $new_nested != "" );
  70.       if ( $open_nesting )
  71.       {
  72.         $nesting = true;
  73.         $nested = $new_nested;
  75.         $s .= "<li class='subsection-title'><span>" . $nested . "</span>n";
  76.         $s .= "<ul class='subsection'>n";
  77.       }
  79.       // Regular menu entry
  80.       $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick="do_click();">" . $title . "</a></li>n";
  81.     }
  83.     if ( $nesting ) 
  84.     {
  85.       // Closes last open nesting, if any  
  86.       $s .= "</ul></li>n";
  87.     }
  89.     $s .= "</ul>nn";
  90.   }
  92.   return $s;
  93. }

2. Changes to /ndxz-studio/site/<your-theme>/index.php:

  1. Include a new javascript file to manage menu expansion and the initialization code for the menus (marked in bold within existing code in the following excerpt):
  2. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
  3. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
  4. <strong><script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingTwoLevelMenus.js'></script></strong>
  5. <plug:front_lib_js />
  6. <script type='text/javascript'>
  7. path = '<%baseurl%>/files/gimgs/';
  9. var old_click;
  11. $(document).ready(function()
  12. {
  13.   setTimeout('move_up()', 1);
  15. <strong>  initializeAllMenus();</strong>
  16. }

3. Create javascript file /ndxz-studio/site/js/expandingTwoLevelMenus.js:

  1. /*  Expanding Two-Level Menus for Indexhibit
  2.  *    uses jquery
  3.  *
  4.  *  Created by H. Madrona  Aug 2010
  5.  *
  6.  *  Based on expandingMenu.js by Ross Cairns  Mar 2008
  7. */
  9. var _ItemsToCollapse = [];
  11. function initializeAllMenus()
  12. {
  13.   /* Initialize menus */
  14.   $("#menu ul.section").each( function (index) { expandingMenu( index ); } );
  16.   /* Initialize submenus */
  17.   $("#menu li.subsection-title").each( function (index) { expandingSubmenu( index ); } );
  18. }
  20. function expandingMenu(num) 
  21. {
  22.   var speed = 250;
  24.   var menu = $("#menu ul.section").eq(num);
  25.   var item_title = menu.children(":first");
  26.   var items = menu.children( ":not(:first)" );
  28.   _ItemsToCollapse.push( items );
  30.   /* hide items if not active */
  31.   if ( (".active") == false  ) && ( items.children( "ul.subsection" ).find( ".active" ).length <= 0 ) ) {
  32.       items.hide();
  33.   }
  36.   /* add click functions + pointer to title */
  37.   item_title.css({cursor:"pointer"}).click(
  38.     function () {
  39.       if ( ":hidden" ) )
  40.       {
  42.         for ( var i = 0; i < _ItemsToCollapse.length; i++ )
  43.         {
  44.           if ( i != num ) _ItemsToCollapse[i].hide(speed);
  45.         }
  46.       }
  47.       else
  48.       {
  49.         items.hide(speed);
  50.       }
  51.     }
  52.   );
  53. }
  55. var _SubitemsToCollapse = [];
  57. function expandingSubmenu(num) 
  58. {
  59.   var speed = 250;
  61.   var menu = $("#menu li.subsection-title").eq(num);
  62.   var item_title = menu.children( "span" );
  63.   var items = menu.find( "ul li" );
  65.   _SubitemsToCollapse.push( items );
  67.   /* hide items if not active */
  68.   if (".active") == false ) {
  69.       items.hide();
  70.   }
  72.   /* add click functions + pointer to title */
  73.   item_title.css({cursor:"pointer"}).click(
  74.     function () {
  75.       if ( ":hidden" ) )
  76.       {
  78.         for ( var i = 0; i < _SubitemsToCollapse.length; i++ )
  79.         {
  80.           if ( i != num ) _SubitemsToCollapse[i].hide(speed);
  81.         }
  82.       }
  83.       else
  84.       {
  85.         items.hide(speed);
  86.       }
  87.     }
  88.   );
  90. }

Hope this helps.


Vaska A / 2010-08-24 19:32:09   

Can you show us this in action? A link?

hmadrona / 2010-08-24 19:32:29   


Some of the <code> tags considered the previous line as code since there was no blank line in between.

hmadrona / 2010-08-24 19:36:44   

Hi Vaska!

Great job. Have a look at it here. I use another separator.

Blancahelga (test)

You can see nested options in sections "ilustraci√≥n" and "** test **"

hmadrona / 2010-08-24 20:23:11   

Hi Vaska!

I just realized the code I posted is missing the backslashes in the "\n" chars and that the <strong> tags I inserted in the code sections have been escaped and displayed as text.

I made the following substitutions to the code before posting:
" " ==> &nbsp;
">" ==> &gt;
"<" ==> &lt;

What are the escaping rules applied to the code by default? What is really needed to be taken care of and what is done automatically?

I'll re-post the code with the appropiate corrections.

Thanks in advance.

arsondpi / 2010-08-24 21:11:50   

I usually encode all entities and post the code without code tags...
Or -even better - put everything in a zip or text file, upload it in a dropbox acount and post the link here...

PS- Thanks for sharing!!!

Vaska A / 2010-08-24 21:30:23   

Ok, I see it now...

Vaska A / 2010-08-24 22:41:50   

I think people will be interested in this. It's hard for me to review all this code (at this point) but I see nothing dangerous (and hm clearly knows what he/she is doing) I give it up a thumbs up.


hmadrona / 2010-08-24 22:44:58   

I'm glad you liked it. The idea behind it is very simple indeed.

thingsthings / 2010-08-31 18:07:41   

@hmadrona Thank you it works great. I do have one question/request for you.

Is there a way to make the 'subsection title' a link to 'subsection title' page?


* Ex1
* Ex2 / Ex2.01
* Ex2 / Ex2.02
* Ex3

i.e. Make Ex2 a link to Ex2 page rather than just toggle for sub-sub menu drop down

Any help would be appreciated. What you've done so far is fantastic.

brunogiliberto / 2010-09-01 14:24:46   

it's somebody testing this?, the link posted before doesn't work for me.

thingsthings / 2010-09-01 15:07:53   

@bruno... i am using it on my site and it works. which link are you referring to? check out @hmadrona's 'download' link

brunogiliberto / 2010-09-01 15:19:32   

sorry, now works fine.


hmadrona / 2010-09-03 13:41:55   

@thingsthings It is certainly doable. Let me have some spare time to work on it. I'm glad you liked it too... It was a recurring topic in the Forum and I think this is an simple approach for everyone.

hmadrona / 2010-09-08 21:42:16   

@thingsthings Please download and check the following version.

Now if you want a subsection with a proper page (not just a open/close option), you just have to create an exhibit with the name of the nested section preceding the nested exhibits:

Following your example, but giving Ex2 an exhibit:


You'll create under section Exemple the following exhibits:
* Ex1
* Ex2
* Ex2 / Ex2.01
* Ex2 / Ex2.02
* Ex3

If exhibit Ex2 is not created, the nesting mechanism will work as in the initial version.

You can play with a working sample in Blanca Helga (test). Go to section "** test **" and check option "ventanas".

rickykappa / 2010-09-13 07:49:32   

thanks a lot! :-)

hwm187 / 2010-10-20 18:31:07   

sorry for the formatting problem - let me try again -

couple of questions, here is my Link

1. I have a "#menu ul a" giving an active highlight. When clicking on a section that contains sub-sections, the highlight shows up on both main section and subsections, and doesn't change until you click on an actual subsection. How can i give a more specific active behavior, which only focuses initially on one sub section? (look at CURRENT>Tit For Twat)

2. Expanding menu issue - there is one section (ABOUT>New & Press), which contains no subsections, but when you click it, it closes the expanded menu. I thought it had to do with the "&" in my section name, but removing or renaming doesn't seem to change anything. Is it because it is called "News"??

Appreciate the help MUCHO.

Vaska A / 2010-10-20 18:34:27   

I honestly don't know much about this particular piece of code. It's a contributed piece of's a little difficult for us to support everything that people post here (and in some cases they aren't either finished or even quality pieces of code).

Hopefully, somebody will turn up with some insight on things. ;)

hwm187 / 2010-10-21 17:19:23   

Found the fix to the first problem i stated above. By changing the main section page to "unpublished", while keeping the subsections "published" the active state works properly.

Still having a strange quirk with the expanding menu close on the "news and press" section. Will try my luck in a discussion more focused on expanding menu solely.

DOD / 2010-11-02 19:44:05   

Hello people. First of all thanks for sharing would be lost without you. 2nd, I 'm still trying to get this to work but am feeling very clueless right now. i have downloaded all the files and put them in the right folders ( 'Your Theme' folder into ndxz-studio/site.'Expandingtwolevelsmenues.js' into ndxz-studio/site/js and 'Index.php' from plugin folder to replace the index.php file in my original ftp plugin folder at ndxz-studio/site/plugin ).

I've refreshed and in my admin area of indexhibit i have created some exhibts under my 'Archive' section which i'm trying to get to drop down from the 'Archive' section title into one sub menu title then from that the exhibit but nothing is happening. is the way i'm naming the exhibits wrong (date / society) or should it be / . sorry for the dumb question but i've thought of everything else and i dont know what else it can be now, i'm going loopy loopy crazy crazy. please help :/

basthies / 2010-11-09 16:21:33   

Hi Folks,
I don´t know what to do..
The expandingTwoLevelsMenu was working fine.. until I changed something.

I did all work before in the sample theme folder but my system was still in eatock theme. So I switched it and nothing is working anymore.
After trying thousand of time to get things right I deleted everything - even the SQL part of my server and createt a new database and startet working in a new folder setting upe everything new.
Now I am at the same part and it is not working again?
I am going nuts!!

Has anybody any idea what to do?
I had a look for a couple of threads about the id.. but now I´ve got a totaly new database.

thanks for you help


The Reisen Part for Example
When it was working it has been
0- Reisen
1- Spanien
2- Andalusien

0- Reisen
1- Indien
2- Amritsar

basthies / 2010-11-09 16:23:32   

sorry for three postings - I got the massage page not found...

artishard116 / 2010-11-09 22:43:06   

Hi, I'm wondering if anyone can help me tweak this a little. I'm trying to make the first level of menus be expanded all the time (Exemple). Then clicking a sub menu would expand that as usual. Also is there a way to indent the sub-sub-menu expanded links a little to differentiate them from the other sub-menus? Thanks in advance.

artishard116 / 2010-12-01 15:51:16   

I figured the above questions out. One more:

It seems this procedure is screwing up my urls... for example where i used to have:

I now have:

(where misc is the category)
Is there any way around that?

atelierguevara / 2010-12-25 20:10:09   

Hi there!

First of all, thanks hmadrona for sharing! Great job! I've also seen other great examples by BrunoGiliberto, hwm187, basthies...

I'm trying to get the expandable menu working, but I can't and it's driving me crazy! This is my site, and I'm trying to create 4 sub-menus under the section "Projects". The exhibits are created, but I can't get the expandable menu work. The sub-sections and exhibits are shown in the same level and they're as stuck as I am.
Any clues?

Thanks in advance & merry christmas!

atelierguevara / 2011-01-10 04:25:49   

I still can't find where the problem is...

Is this a problem in my theme's index.php file? In that case I guess it has something to do with the next phrases:

  1. <plug:front_lib_css />
  2. <plug:front_dyn_css />
  3. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
  4. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
  5. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingMenus.js'></script>
  6. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingTwoLevelMenus.js'></script>
  7. <plug:front_lib_js />
  8. <script type='text/javascript'>
  9. path = '<%baseurl%>/files/gimgs/';

    setTimeout('move_up()', 1);

Thanks a lot!

interr0bangr / 2011-02-02 11:56:55   

This doesn't work anymore, does it?

I've tried installing the custom code about 10 times and have had zero luck.

It appears to be working on the author's site though (**test** section):

bmpitts / 2011-02-18 13:52:13   

first things first,
my site:

i am using hmadrona's script, but can't figure a few things out. any help would be greatly appreciated...

1) how can i get the "Projects" menu to stay open all the time?

2) on my site, if you notice, there are two exhibitions named "SingularOscillations". one has a submenu titled "EvenHorizons" the other not. i would like this to work like the "BlindSpots" exhibition that displays info when you click it as well as displaying the submenu "#3". any tips as to why "SingularOscillations" is working differently?

3) is there a way to eliminate the gap below exhibitions with submenus, for example "BlindSpots"?

4) i would like to be able to have exhibitions with two words. for example "Blind Spots" instead of "BlinSpots". doing this seems to break the submenu script though. is there a fix?

5) and a non-submenu question... can the site title (in my case "B R A D L E Y P I T T S") serve as a link to bring viewers back to the home page?

thanks in advance. apologies for noob questions....

bmpitts / 2011-02-18 13:54:55   

sorry for the triple post! typical noob mistake, i hope!
(fyi- the forum displays an error message when i post)

bmpitts / 2011-02-18 13:58:04   

@interr0bangr - seems to be working for me. maybe if you post more info about what how your uploading the files (which folders etc.), i could try to help....

bmpitts / 2011-02-19 14:39:27   

in case anyone else is interested, i figured out the answer to my question #2 above:

in the Exhibits:Main screen of your ndxz-studio/ your exhibits and sub-exhibits have to be ordered such that sub-exhibits are directly below their respective exhibits.

still searching for answers to the rest of my questions, in case anyone has tips...

bmpitts / 2011-02-19 16:21:10   

ignore my question #3 above, for some reason it only happens in the indexhibit preview, but not in a browser.

chipping away....

behem0t / 2011-02-27 13:55:52   

i've applied this script successfully to a site (not live yet).

Does anyone noticed some flickering sometimes, like the menu takes time to initialize ?

I've seen it a few times in safari and firefox on MacOsX.

In chrome in MacOSX it's even worst: in every click the menu appears full opened and then slowly gets back in to place.

I think it has something to do how the browsers take care of the jquery $(document).ready

Any ideas how to fix this?

cchou / 2011-03-28 18:12:12   

Hi I tried using the script above, but for some reason I think /site/plugin/index.php file may be giving me a problem?

  1. In functional sectional(), where in line 184
  2. $s .= "< ul class='section'>n";
  3. is showing up as simply as < ul > instead of < ul class='section' >

Any ideas on how to fix this?

atelierguevara / 2011-06-13 18:00:54   


This thread has been dead for a couple months and still can't get the sub menus to work.
Here's the link to my site, where I'm trying to make submenus work under the section "Projects". The exhibits are created, and sub-sections seem to be there, but I can't get the expandable menu to work: menus are static. Sub-sections and exhibits are shown in the same level, so it's quite difficult to understand what's going on.

Thanks to hmadrona I could see some great examples of this code working at her site, and also some other great examples by BrunoGiliberto, hwm187, basthies...
Could any of these please help?

Thanks in advance!

panton / 2011-06-16 03:59:34   

same problem here. As cchou wrote before it seems to have something to do with the /site/plugin/index.php because when you look in your html-dokument you’ll find < ul > instead of < ul class='section' >.

Any help would be great!

johnplawlor / 2011-09-11 10:31:26   

Hey guys,

Any answers with how to keep the submenu's open until clicked again?

egotrip / 2011-12-06 07:07:03   


I have a real problem with my 2ble sub expanding menu.

the first section of my menu close down after a half second when I click on it. Then I can't access to the content of this section. And it happen how ever the section I put first.
it only happen on firefox 8.0

my site

I have just discover this problem with the update of FF.

thank you.

egotrip / 2011-12-06 07:46:48   

for the moment, the only parade I have found is to create a section "home" and to put it at first. I have chosen Off for "Display section Title". ana a page in it called also "home"

then you do not see these "home" on firefox, but you see it on safari.

it drive me crazy.


benhorinb / 2012-02-06 02:37:50   


would like to implement this, but the zip files containing the code (earlier in the thread) are no longer working. any chance someone can post them?


pauceav / 2012-02-22 06:16:52   

I would like to see the code too, please any chance someone can post them?

thanks very much!

egotrip / 2012-03-08 03:45:48   


I wonder why people visit my site worldwide. I just realize that it is not because they love my work, but just because they want to see my two level expanding menu...

I receive also mails to know How I have done my menus. It is a bit long time ago, then I do not remember exactly. but I have followed this thread.

You will find under this Link the js to put there : /ndxz-studio/site/plugin/

I hope it will help you.

But do not forget what I have written above. there is a damned bug with the first section.
I have found a parade (also above) but it is not perfect.
If somebody fix it, let me know


rickykappa / 2012-03-08 15:51:15   

bravo clement! ;-)

flowkr / 2012-03-13 03:40:15   


First, I'd like to thank Vaska and all the guys who posted to help others here.

I was struggling with sub_sub_menu and I got desperate because I couldn't find source files anywhere. Instead of posting for help and waiting, I e-mailed to egotrip asking for help.

He was very kind enough to share his files with me and my site is working properly.

I didn't finish my site yet, but soon, all the menu will have lookbook by year.

Thanks million, Clement

blu / 2012-03-19 06:41:01   

thanks flowkr!
I was struggling with subsubmenu too, but I'm still struggling...
I did what "hmadrona" write at the beginning of this thread, I used the expandingTwoLevelMenus.js, the one you linked (thanks a lot!)...but it doesn't work!
I mean the subsubmenu didn't work but it upset all my site: the exhibitions, the slideshow in homepage, the visual index were upsetted.

could I ask you to post the file in ndxz-studio/site/plugin/index.php?
and the ndxz-studio/site/your-theme/index.php?

thank you so much!

my site is but for the moment I don't set the subsubmenu...

This thread has been closed, thank you.