Hello

Is it possible to use Superfish for the secondary links can have a second level as for primary links?

Thank you in advance.

Comments

Clément’s picture

Clément commented

Test without much success :

I got this code (in template.php of fusion):

<?php
  // Generate links tree & add Superfish class if dropdown enabled, else make standard primary links
  $vars['primary_links_tree'] = '';
  if ($vars['primary_links']) {
    if (theme_get_setting('primary_menu_dropdown') == 1) {
      $vars['primary_links_tree'] = menu_tree(variable_get('menu_primary_links_source', 'primary-links'));
      $vars['primary_links_tree'] = preg_replace('/<ul class="menu/i', '<ul class="menu sf-menu', $vars['primary_links_tree'], 1);
    }
    else {
      $vars['primary_links_tree'] = theme('links', $vars['primary_links'], array('class' => 'menu'));
    }
  }
?>

And I added by :

<?php
  $vars['secondary_links_tree'] = '';
  if ($vars['secondary_links']) {
    $vars['secondary_links_tree'] = menu_tree(variable_get('menu_secondary_links_source', 'secondary-links'));
    $vars['secondary_links_tree'] = preg_replace('/<ul class="menu/i', '<ul class="menu sf-menu', $vars['secondary_links_tree'], 1);
  }
?>

I got this code (in page.tpl.php of acquia_marina):
<?php print theme('grid_block', $primary_links_tree, 'primary-menu'); ?>

And I added by :
<?php print theme('grid_block', $secondary_links_tree, 'primary-menu'); ?>

The secondary menu works well with Superfish but I change #primary-menu by #secondary-menu.

If I put this code, the menu does not work anymore:
<?php print theme('grid_block', $secondary_links_tree, 'secondary-menu'); ?>

Which page do I need to change to get there? Thank you very much for your help!

jeremycaldwell’s picture

jeremycaldwell commented

I got this working today with the Acquia Marina theme and you were very close with the process. This was the first time I've attempted this so thankfully I got it working. Here are the changes I made:

Template.php:

/**
 * Page preprocessing
 */
function acquia_marina_preprocess_page(&$vars) {
  // Generate links tree & add Superfish class for secondary links
  $vars['secondary_links_tree'] = '';
  $vars['secondary_links_tree'] = menu_tree(variable_get('menu_secondary_links_source', 'secondary-links'));
  $vars['secondary_links_tree'] = preg_replace('/<ul class="menu/i', '<ul class="menu sf-menu', $vars['secondary_links_tree'], 1);
}

Then in the page.tpl.php, change the secondary menu code to this: 

<?php print theme('grid_block', $secondary_links_tree, 'secondary-menu'); ?>

Be sure to clear your site cache so it reloads the updated theme files and you should be all set. There isn't any CSS styling in place for these dropdown menus and the "overflow: hidden;" on the .row and .block will cut off the dropdown menu and stop it from showing correctly. So you can do a bit of jQuery to fix that like below or add this to your local.css.

.row,
.block {
  overflow: none;
}

And if you go the jQuery method add this to your script file for the theme.

Drupal.behaviors.acquia_marinaSecondaryMenu = function (context) {
  // Sets the .row class to have "overflow: visible" if secondary menu is present
  $("#secondary-menu").parents('.row').css("overflow", "visible")
};

Hope that helps!

Clément’s picture

Clément commented

Hello

Thank you very much for your reply, I did not uh time before to test your solution.

So I added the template.php page with the code that you gave me, I changed the page.tpl.php page and added to the Acquia-marina-script.js page script that you gave me given. I also cleared all my cache.

Here is the code I found :

<ul class="menu" style="display: none; visibility: hidden;"><li class="leaf first"><a title="" href="/node/add/forum">Ajouter un sujet sur le forum</a></li>
<li class="leaf"><a title="" href="/node/add/modele-2r">Ajouter un modèle 2R</a></li>
<li class="leaf"><a title="" href="/node/add/marque-2r">Ajouter une marque de 2R</a></li>
<li class="leaf last"><a title="" href="/node/add/annuaire">Ajouter un dans l'annuaire</a></li>
</ul>

Now if I put my cursor on the menu the menu is closed. Would you have a solution to this problem? Thank you.

jeremycaldwell’s picture

jeremycaldwell commented

Did you set your Secondary menu items to "expanded" for those that had child menu items on them? If not give that a try first. Just need to make sure they are set to expanded so they display all the time in your dropdown. And of course clear your site cache on your Performance page when you make these changes to your theme files so it reloads them.

Clément’s picture

Clément commented

Yes, of course, I am satisfied for having enabled the menu expanded. I also emptied the cache.

The sub-menu appears when I analyze the html code (see the code given above) but if I pass the mouse over the menu, it does not open (as if the java code does not work). Is there a file to edit in the theme fusion_core? Thank you for your help!

jeremycaldwell’s picture

jeremycaldwell commented

Well the code above shows one level of menu items not two. So seems you still need to get the Secondary menu to print two level menu items rather than just the top level. You have one (ul) and that is one unordered list (top level menu) and there aren't any other (ul) within the (li) so that means it's just printing one level of the menus and not any sub menus. Once you get the menu to print correctly it should show the sub menu items on hover but keep checking your source code to make sure it prints the menu correctly with all it's levels.

Clément’s picture

Clément commented

Incorrect, if the code above shows just the second level. Here is the entire code of the menu as it appears :

<div id="secondary-menu" class="secondary-menu block">
  <div id="secondary-menu-inner" class="secondary-menu-inner inner clearfix">
    <ul class="menu sf-menu">
      <li class="expanded first"><a href="/contribution-permissions" title="">Ajouter du contenu</a>
      <ul class="menu">
        <li class="leaf first"><a href="/node/add/forum" title="">Ajouter un sujet sur le forum</a></li>
        <li class="leaf"><a href="/node/add/modele-2r" title="">Ajouter un modèle 2R</a></li>
        <li class="leaf"><a href="/node/add/marque-2r" title="">Ajouter une marque de 2R</a></li>
        <li class="leaf last"><a href="/node/add/annuaire" title="">Ajouter un dans l&#039;annuaire</a></li>
      </ul></li>
      <li class="leaf"><a href="/contribution-permissions" title="">Gestion du contenu</a></li>
      <li class="leaf"><a href="/contribution-permissions" title="">Contribution / Permissions</a></li>
      <li class="leaf"><a href="/user" title="">Profil</a></li>
      <li class="leaf"><a href="/logout" title="">Déconnexion</a></li>
      <li class="leaf last"><a href="/user" title="">Connexion</a></li>
    </ul>
  </div><!-- /secondary-menu-inner -->
</div><!-- /secondary-menu -->

The second level is very present but it does not open, it remains hidden when the cursor passes over.

jeremycaldwell’s picture

jeremycaldwell commented

Excellent, thanks for posting the entire snippet of code for the secondary menu. Now try adding this bit of CSS to your local.css file to see if you get a dropdown menu from the Secondary menu. 

.row,
.block {
  overflow: visible;
}

That might work, and if it does there is a better way to do that but this is for testing to see if it does the trick as it might affect other aspects of your site.

Clément’s picture

Clément commented

I added the CSS in local.css now it works, I'm really happy!

If I understood your message #2 (because I do not understand English very well) you give me the solution with CSS OR jQuery. I tested CSS without success (maybe I forgot to empty the cache) and how jQuery does not work.

Thank you very much for helping me and also for your patience ;)

Greetings.
Clément

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

Glad we got this working :)

I think my CSS was incorrect in the first example a few responses up as it should have been "overflow: visible;" instead which is what is working for you. Now the preferred method would be to undo the CSS I just had you test with and add the jQuery to the script that comes with the theme so you set it's parent div to have the "overflow: visible;" and removes the hidden that you are seeing by default.

So both methods work, just the jQuery one is more specific and a better approach in this situation. You can also target the secondary menu wrapping div for the .block and .row and set them to "overflow: visible;" too as another method.

Marking this as fixed as we got this working and have a few different solutions for it now.

Clément’s picture

Clément commented

Thank you for this clarification.

I just passed to operate the menu with your first method (jQuery):

Code:

Drupal.behaviors.acquia_marinaSecondaryMenu = function (context) {
  // Sets the .row class to have "overflow: visible" if secondary menu is present
  $("#secondary-menu").parents('.row').css("overflow", "visible")
};

Replaced by:

Drupal.behaviors.acquia_marinaSecondaryMenu = function (context) {
  // Sets the .row class to have "overflow: visible" if secondary menu is present
  $("#secondary-menu").css("overflow", "visible")
};

That, I think this issue will surely be useful to other people. Maybe one day there will be this option automatically in theme acquia_marina ...

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

plousia’s picture

plousia commented
Status: Closed (fixed) » Active

How would this work if I'm printing the secondary (or primary for that matter) menu as a block, rather than using the theme default? Thanks!

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

@plousia, if you are printing it as a block there isn't much you can do to get it to display with dropdowns. The theme doesn't support dropdown menus like this through blocks so you are out of luck in this instance of than using the Skinr style "Vertical menu (for sidebar blocks)".

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.