Cannot Get Horizontal Submen Display - Please Help

You can load Superfish specific changes to the javascript in the /js folder.

For example this is how you add arrows back to the dropdown menus.

Drupal.behaviors.fusionSuperfish = function (context) {
  $("#primary-menu ul.sf-menu").superfish({
    hoverClass: 'sfHover',
    delay: 250,
    animation: {opacity:'show',height:'show'},
    speed: 'fast',
    autoArrows: true,
    dropShadows: false,
    disableHI: true
  }).supposition();
};

That bit of code would go in a .js file you create and add to your /js folder. Load that .js file in your theme's .info file and you should be all set.

And to change your Superfish menu to be horizontal on the dropdown add this bit of code to your theme's template.php file.

<?php
// $Id$

function THEMNAME_preprocess_page(&$vars) {
  // Add Superfish navbar class if dropdown enabled
  if ($vars['primary_links'] && theme_get_setting('primary_menu_dropdown') == 1) {
      $vars['primary_links_tree'] = preg_replace('/<ul class="menu sf-menu/i', '<ul class="menu sf-menu sf-navbar', $vars['primary_links_tree'], 1);
  }
}

Replace THEMNAME with your theme's folder name and it should load horizontally. So what we are doing there is just overriding the output of the theme's Superfish menu to achieve a different layout. Hope that helps!

Hi Alan,

One more option would be this http://drupal.org/node/708862 :)

It'll be available very soon.

HI!
sorry to re-open.
I did not quite understood if it is possible to apply a horizontal superfish behavior to ANY menu, not just to the primary_links.
For example, I would like to apply it to the navigation menu in order to have a horizontal "create content" -> dropdown.
Is this possible without refactoring the css/js by hand?

Thanks in advance!

@bohz, I think it would be possible to do that. Try the above code but change every instance of "primary_links" to your theme's machine name and see how that goes. You would need to write your own CSS styles for it of course since that's a custom menu on your site.

Hi,

using fusion and skinr, (and you do), you just have a few lines to verify / modify :

your fusion_core.info should look like that (appropriate superfish section, near line 215) :

; Superfish menu styles
skinr[fusion-superfish][title] = Superfish menu styles
skinr[fusion-superfish][type] = radios
skinr[fusion-superfish][description] = Superfish dropdown menus (must also set menu items to Expanded)
skinr[fusion-superfish][features][] = block
skinr[fusion-superfish][options][1][label] = Standard horizontal menu with dropdowns
skinr[fusion-superfish][options][1][class] = superfish
skinr[fusion-superfish][options][2][label] = <span class="preview-text">Vertical menu (for sidebar blocks) <span class="preview-icon" id="fusion-superfish-superfish-vertical"></span></span>
skinr[fusion-superfish][options][2][class] = superfish superfish-vertical

clear / rebuild your theme's cache and now you should see the "horizontal menu" option for any block you want!

Thanks for pointing that out piaweb, that's another method that is built in but not totally supported. Works great though and is a starting point for getting the functionality you need in place and then you can begin adding the styling. You can also make the change in your sub theme as long as it has the same class names through Skinr.

I notice with the above code add-ons, the suckerfish background color turns blue color and I can't seem to find a way to change it. Any suggestions ?

I kind of wish I didn't have to have my own js/ and template.php, the less files we have to deal with the better.

Thank you piaweb! that was very helpful!

I have spent hours trying to get this to work and make the primary menu dropdowns appear in a horizontal format with no success. I have created a template.php file in the fusion subtheme directory with the recommended code above and made certain that superfish-navbar.css is loading right after superfish.css.

Clearing drupal and browser cache as well as opening both the Fusion Core and Subtheme and and have forced a theme rebuild - all to no avail. The dropdowns still appear in a vertical mode.

I have tried this with new, unmodified versions of Acquia Prosper and Acquia Marina.

Can someone please give me some advice on how to make this happen?

Thanks . . . Mike

Just a quick one...have you made sure you have styled the containing div and ul to be wide enough for the menu items? If the containing div is only set to say 125px, I believe the menu items will stack because they are floated.

Yes - after your post I spent about 3 hours on that to no avail.

I am concerned that the post by eternalistic containing the php code to implement horizontal submenus is either incorrect or incomplete. As I indicated I tried it with basic, vanilla installations of Acquia Marina and Acquia Prosper and they still rendered as vertical menus. I could find no issues with div or ul widths.

I am wondering if there is additional CSS code that needs to be implemented for the subitems that is not discussed in eteralistic's post. Also, I am wondering if superfish-navbar.css should be placed after superfish-vertical.css or if superfish-vertical.css should be commented out in the .info file.

I would really appreciate any assistance or advice from someone who has made this work and am willing to pay a fair price to get it fixed.

Mike

Mike,

1) This is the code I put in my template.php file on a very recent project. I wish I had added a comment as to where I got it, but I know it works.

function themename_preprocess_page(&$vars) {
  // Add Superfish navbar class if dropdown enabled
  if ($vars['primary_links'] && theme_get_setting('primary_menu_dropdown') == 1) {
    	$vars['primary_links_tree'] = preg_replace('/<ul class="menu sf-menu/i', '<ul class="menu sf-menu sf-navbar', $vars['primary_links_tree'], 1);
  }
}

Remember to sub in your theme name for the "themename" in the first line.

2) Make sure your template.php file is actually being loaded. I do this inserting a syntax error in the template.php file. If its loading, you will get an error message.

3) Make sure you have the horizontal menus checkbox checked. Its on the Fusion theme settings page under "Theme-Specific Settings->Fusion Theme Settings->Navigation->Primary Menu".

Hope one of these helps solve the mystery.

Gary

Thanks guys, piawebs customization works great. one issue with my site, the horizontal drop down menu only lists 1st 3 sub menus (others get cut off), how do i fix that?? i'm using menu at preface top region, acquia_prosper theme. thanks for your help.

@ ecsmike = my advice would be not to use any template.php code, but only the fusion-core.info trick which works out of the box;

@ gary.betz
1) This is the code I put in my template.php file on a very recent project. I wish I had added a comment as to where I got it, but I know it works.

function themename_preprocess_page(&$vars) {
// Add Superfish navbar class if dropdown enabled
if ($vars['primary_links'] && theme_get_setting('primary_menu_dropdown') == 1) {
$vars['primary_links_tree'] = preg_replace('/

Please note that this code ONLY WORKS for primary links if set active in template settings.
What if you want to use superfish for other menus ? (secondary, custom menu...)

Once again my advice (and my method) is to disable all things except logo in theme administration page.
Then place your menu block in the appropriate area through the blocks configuration page.
Configure this block as superfish horizontal menu with dropdowns.

After that the only things to modifiy for your suits are css files :
(sample)

#block-menu-primary-links {
background:transparent;
width: 100%;
margin-bottom:4px;
}

#block-menu-primary-links .content {
padding:0;
}

#block-menu-primary-links ul {
    list-style: none outside none;
   background:#0a0a0a;
margin:0;
 width: 100%;
    text-align: center;
    padding:0;
}


#block-menu-primary-links li {
    background: transparent;
    float: left;
    padding: 0 8px 0 10px;

}

#block-menu-primary-links li a {
    background: transparent;
    color: #fff;
    display: block;
    font-size: 14px;
padding-left:40px;
padding-right:10px;
    text-decoration: none;
    text-transform: uppercase;
}

#block-menu-primary-links li a:hover {
color:#f5b800;
}

+1 to commit the #9 to fusion core...

thanks!

Closing as won't fix since the D6 version is not getting any new development.