Hi Guys, thanks for a great module but I have one issue. How do I get the mini panel to work with the mouse click method?

The hover works fine but with the click method the mini panel pops up but then the page refreshed to the target url rendering the click method pretty much worthless. I had set the Path to "node" as per the tutorial. Have I missed something?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jgarbe’s picture

I will echo this...I understand this is porting the qtip functionality...but if every time you click a menu item to activate the mini-panel it re-directs to that page, it seems that would totally invalidate the usefulness of that functionality.

I've looked all around in the module and couldn't find anything...perhaps what you'd want is for menu items with the click-activated mini-panel attribute to set the link to just #? I can't think of a use-case where someone would need a link in there and an on-click or double-click event, but I might not be seeing the whole picture.

tyler-durden’s picture

I also want this feature. If only you could have a placeholder or be able to leave the menu target blank?

Raphael Apard’s picture

Version: 6.x-1.2 » 7.x-1.x-dev
FileSize
580 bytes

If you want a link without href for this feature, you can override theme_links.

For Drupal 7 :

function YOUR_THEME_links__system_main_menu($variables) {
  $links = $variables['links'];
  $attributes = $variables['attributes'];
  $heading = $variables['heading'];
  global $language_url;
  $output = '';

  if (count($links) > 0) {
    $output = '';

    // Treat the heading first if it is present to prepend it to the
    // list of links.
    if (!empty($heading)) {
      if (is_string($heading)) {
        // Prepare the array that will be used when the passed heading
        // is a string.
        $heading = array(
          'text' => $heading,
          // Set the default level of the heading. 
          'level' => 'h2',
        );
      }
      $output .= '<' . $heading['level'];
      if (!empty($heading['class'])) {
        $output .= drupal_attributes(array('class' => $heading['class']));
      }
      $output .= '>' . check_plain($heading['text']) . '</' . $heading['level'] . '>';
    }

    $output .= '<ul' . drupal_attributes($attributes) . '>';

    $num_links = count($links);
    $i = 1;

    foreach ($links as $key => $link) {
      $class = array($key);

      // Add first, last and active classes to the list of links to help out themers.
      if ($i == 1) {
        $class[] = 'first';
      }
      if ($i == $num_links) {
        $class[] = 'last';
      }
      if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page()))
           && (empty($link['language']) || $link['language']->language == $language_url->language)) {
        $class[] = 'active';
      }
      $output .= '<li' . drupal_attributes(array('class' => $class)) . '>';

      if (isset($link['href'])) {
        
        // Remove <front> link if menu_minipanels_hover based on click
        if($link['href'] == '<front>' && isset($link['menu_minipanels_hover']['show']['when']['event']) && $link['menu_minipanels_hover']['show']['when']['event'] == 'click') {
          $output .= '<a href="#_" class="menu-minipanel menu-minipanel-' . $link['menu_minipanels_hover']['mlid'] . '">' . $link['title'] . '</a>';
        }
        else {
          // Pass in $link as $options, they share the same keys.
          $output .= l($link['title'], $link['href'], $link); 
        }
      }
      elseif (!empty($link['title'])) {
        // Some links are actually not links, but we wrap these in <span> for adding title and class attributes.
        if (empty($link['html'])) {
          $link['title'] = check_plain($link['title']);
        }
        $span_attributes = '';
        if (isset($link['attributes'])) {
          $span_attributes = drupal_attributes($link['attributes']);
        }
        $output .= '<span' . $span_attributes . '>' . $link['title'] . '</span>';
      }

      $i++;
      $output .= "</li>\n";
    }

    $output .= '</ul>';
  }

  return $output;
}

Change :

        // Pass in $link as $options, they share the same keys.
        $output .= l($link['title'], $link['href'], $link);

by

        // Remove <front> link if menu_minipanels_hover based on click
        if($link['href'] == '<front>' && isset($link['menu_minipanels_hover']['show']['when']['event']) && $link['menu_minipanels_hover']['show']['when']['event'] == 'click') {
          $output .= '<a href="#_" class="menu-minipanel menu-minipanel-' . $link['menu_minipanels_hover']['mlid'] . '">' . $link['title'] . '</a>';
        }
        else {
          // Pass in $link as $options, they share the same keys.
          $output .= l($link['title'], $link['href'], $link); 
        }

But you will find another issue :

If qtip event for show is "click", you will have to change event for hide as "unfocus" or "click".

Here the patch to do this., this is for Drupal 7

Raphael Apard’s picture

Status: Active » Needs review
artur.martirosyan’s picture

There's quick workaround, just add following line anywhere in your JS code:
$('a.menu-minipanel').click(function(e){e.preventDefault();});
this will prevent browser from following the link but popup still will be triggered

frank.schram’s picture

Hi,

I'm a bit new in this.
Could you give me an example of where to add that line in my JS code?
I tried adding this in menu_minipanels.js
but that does not seem to work.

PaperWeight’s picture

[EDIT: Sorry, this was supposed to be in reply to Frank, above]

Hey Frank, I'm sure there is a better way, but this works for me:

(assuming Drupal 7.x here)

Open your THEME.info file, which is inside your theme directory (if your theme is called FranksTheme, then this file will be called FranksTheme.info

on a new line paste:

scripts[] = js/custom.js

and save the .info file.

In your theme directory, create a directory called 'js' (without quotes) if there isnt already one.

Inside that directory, create a file called 'custom.js' (without quotes) - I personally use that file for any Javascript tweaks I might want to add site-wide.

Open custom.js in a text editor and paste in the following code:

jQuery(document).ready(function($) {
	$('a.menu-minipanel').click(function(e){e.preventDefault();});
});

The jQuery ready function is detailed here.

Clear all caches at YOURSITE.com/admin/config/development/performance

And hopefully switching the Menu Minipanel to onClick will do as desired!

Diane Bryan’s picture

PaperWeight, thank you for this beautiful step-by-step!

On my Zen subtheme the script does, indeed, allow that top-level link to be an on-click event. However, as soon as I move my mouse over the drop-down minipanel, it scrolls away. In other words, when my mouse *leaves* the menu link, its dropdown disappears.

Raphael's patch (just above PaperWeight's tutorial linked above) handles this and plays nice with PaperWeight's solution. However the line numbers have changed since that patch was offered. As of today, it should be inserted at line 431.

That leaves a missing functionality:

There needs to be the option to include a "close" link for the menu, for instances where the menu itself may be styled to sit on top of its parent item, or elsewhere on the page. I'm thinking of having the parent item display as graphical icons, which change from the menu icon (looks a little like =) to the close icon (looks a little like [x]).

I'll post here if I figure out a way to do that. Or suggestions are welcome.

last observation--a bug that I can't tell if it's related to these two patches, and don't have time to create a raw scenario to test it -- If I select "none" for the effect for the on-click event and for closing, the first time the menu opens, it wanders down from the upper-left corner of the screen. If I reduce the effect timing to zero, the minipanel stays in the upper left corner of the screen instead of wherever I've placed it, unless I resize my screen, at which point it "wanders" into place.

Since Drupalcon Portland is over, maybe development on the module can resume? It seems there are lots of nice suggestions that can be integrated.

xbrianx’s picture

I also have this issue, coincidentally, I was also using Special Menu Items Module to get around a similar problem using the superfish menu and touch screen. I needed to be able to click-not hover on the menu.

After needing more with my menu I decided to try menu minipanels, but the click does not work at all when using the <nolink> menu option from special menu items module. And the problem is if you do put a link on the item when you click it goes to the page, rendering the functionality useless.

I thought the problem might be the way the special menu item was displaying the link as it was using <spans> by defaut, but there were options to change the markup, and I tried <a> figuring something was being triggered in the javascript, but that still didn't work. Click functionality is greatly needed especially when dealing with touch screens.

steveoriol’s picture

Hello xbrianx,

using the module "Void Menu" with the default value for <void1>, it is a "#".
And the "On mouse click" will working. ;-)

jason.fisher’s picture

A close button and close-on-document-click would be useful UX features to go along with a working click. :)

hkirsman’s picture

I think there's no way of changing the menu link from module. So I'll create new patch and add code from #5

I don't use $(document).ready() as the script is in footer. It's faster that way.

I agree with jason.fisher (#11) that the menu should close from close button. Or in my opinion after hovering off the popup.

Patch is made in the latest stable version:
git clone --branch 7.x-1.x http://git.drupal.org/project/menu_minipanels.git
git reset --hard d2f2244cb5cfc7a2e01a777487c60c7b004d5f0a

DamienMcKenna’s picture

Status: Needs review » Needs work

Shouldn't this be handled via settings and a behavior?

maxplus’s picture

Hi,

I'm using Menu Minipanels v2 in combination of the Void Menu module to get my main menu link open the mini panel like described by steveoriol in #10.
=> thanks for the useful advice, I needed this for touch device functionality (iPad)

It would be great if I could also create a close button, maybe I should take a look at hkirsman #12 and make it work with Menu Minipanels v2