The menu that I have to work with is a 2-tier menu. When rolling over the primary level items, I need to see the secondary level. Then when rolling over the secondary level, I need to see a mini panel.

I tried to create a mini panel that holds a menu and then load that in when rolling over the primary menu item. Of course, that works just fine. Then I instructed an item in the loaded mini panel to load yet another mini panel. That did NOT work. Any idea of how to achieve this?

Comments

damienmckenna’s picture

damienmckenna
Location TN, USA
commented
Status: Active » Closed (won't fix)

While we're not going to support nested minipanels, I think you should be able to get it to work by adding the minipanels to the secondary menu items and just use Drupal's existing architecture to display them.

capellic’s picture

capellic
he/him/his
Location Austin, Texas
commented

@DamienMcKenna, thanks for your prompt attention and suggestion.

Your advice is headed, but the trick now is now to get the secondary menu items to appear on hover of the primary -- unless Nice Menu or something else could be employed.

Another approach I tried was to abandon the idea of a secondary menu and instead add a bunch of mini panels into a mini panel for the primary link. Each of the nested mini panels would be displayed using the Panels Tabs module. Alas, that didn't work. The only that appeared was something that looked like a tear drop.

capellic’s picture

capellic
he/him/his
Location Austin, Texas
commented

I tried to use this technique (http://thedrupalblog.com/suckerfish-css-drop-down-menus-drupal-made-simple) for showing the secondary level of the menu. That went well. Then I attached a panel to the secondary level and got a JavaScript error. I replaced the mini version with the full version of qTip and got this:

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.fillStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://www.my4-h.org:3444/sites/all/modules/menu_minipanels/js/lib/jque... :: drawBorder :: line 1269" data: no]

This involves the following function, line 1269 being "context.fillStyle = color;". If I comment that line out, the bubble appears, but it doesn't have to have any content in it.

   // Border canvas draw method
   function drawBorder(canvas, coordinates, radius, color)
   {
      // Create corner
      var context = canvas.get(0).getContext('2d');
      context.fillStyle = color;
      context.beginPath();
      context.arc(coordinates[0], coordinates[1], radius, 0, Math.PI * 2, false);
      context.fill();
   };

Still sleuthing, but I thought I'd update the issue.

damienmckenna’s picture

damienmckenna
Location TN, USA
commented
Status: Closed (won't fix) » Postponed

Leaving it postponed.

erok415’s picture

erok415 commented

Hi,
@capellic, I'm trying to achieve the same goal using D7. I have tried to add a quicktab into a menu minipanel. Unfortunately when i click on a tab the whole page reloads. That shouldn't happen because quicktabs using jquery to hide the other tab content. See my issue documented here: http://drupal.org/node/1281862

I wonder how to achieve what @DamienMcKenna said in post #1. Will investigate more. I have a very cumbersome navigation to build and I need to have a second level nav then display the menu minipanel when hovering over a second level nav item.

Please document how you achieved your goal when you get a chance.
E.

damienmckenna’s picture

damienmckenna
Location TN, USA
commented

You might want to try looking into the qTip callbacks - see the API.txt file and the qTip documentation for more details.

erok415’s picture

erok415 commented

Thanks. I would like to use the QuickTab inside the Menu MiniPanel but I couldn't get it to work. And I'm not sure where to start with the API.

I have moved from trying this method to now using Nice Menu as my horizontal second level and loading mini-panels from those nav items. The only issue now is that it will take a bunch more styling to get the nice menu to use absolute > #navigation alignment. That doesn't work so each second level nav needs to be adjusted using left:-[# of Pixels];.

erok415’s picture

erok415 commented

I was able to nest.

Goal:
Using Nice Menus, create a nested menu system using only 1st and 2nd level navigation. The 2nd level navigation when hovered over will display the MiniPanel.

1. Install Nice Menu module
2. Open ~/sites/all/module/nice_menus/nice_menus_default.css and save it as nice_menus_custom.css (exact name doesn't matter) to the current custom theme directory.
3. Upload the new css file that creates horizontal menu links.
4. Go to Drupal site and go to ~/admin/appearance/settings/global and enter "sites/all/themes/framework/nice_menus_custom.css" (sans quotes) into the Path to custom Nice menus CSS file.
5. Customize your new custom css file created in step 2.
6. Create a mini-panel with your content included and styled.
7. Make sure you have created secondary links to your main link. Example: Home Row = Home, About, Contact; Secondary Row from About > Mission, Goal, Staff. Mission, Goal and Staff are the secondary links to About.
8. Edit Mission to display a mini-panel created in step 6.

Now when hovering over About you should see a horizontal list of links. And when hovering over About > Mission, you should see the mini-panel created in step 6.

damienmckenna’s picture

damienmckenna
Location TN, USA
commented
Component: Miscellaneous » Documentation
Status: Postponed » Active

This needs to be added to a HowTo document.