Using Superfish with Nice Menus Module

By daniorama on 1 Oct 2008 at 01:15 UTC

Hello, I would like to implement Superfish to the dropdown menus created by Nice Menus module. I'm also using a subtheme of Zen. I've found this info: http://drupal.org/node/298964 (see post #16) but I'm not very sure how to do it or if I'm doing it right.

1-I've added this to my subtheme.info:
scripts[] = superfish.js
stylesheets[all][] = superfish.css

2-Then I've added this to the of page.tpl.php:

$(document).ready(function() { $('#superfish-inner ul').superfish(); $('#ul.nice-menu ul').superfish(); });

3-I need it to work with nice-menu so I changed in the above code:
$('#superfish-inner ul').superfish();
for
$('#ul.nice-menu ul').superfish();

I'm not sure what to do next... any help?

Comments

Not sure what you want to

Jeff Burnz commented 1 October 2008 at 01:41

Not sure what you want to do. I can't see the point in having both Nice Menus and a Superfish menu at the same time - Superfish can do 3 types of menus (drop, nav bar and vertical flyout) all depends on how you initialise it or set the defaults in the plugin.

The default CSS that comes with Superfish it wont work with Drupal menus - the modded version included in Pixture Reloaded will.

Also you need to make sure you have the actual ID selector in the containing DIV - e.g <div id="superfish-inner"> ... your menu </div>

If you are dropping the menu into the navigation bar region in Zen that'll be id="navbar-inner".

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Hello, the point was having

daniorama commented 1 October 2008 at 12:46

Hello, the point was having a system for creating menus that is integrated with Drupal, so I don't have to make the Superfish menus on my own. Nice Menus right now is the best Menu system in Drupal for Dropdown menus. Why? Just try to have OG with some Groups using different Themes and each one with its own Menu (own items and Theme). The only limitation is that Nice Menus can create just 10 different Menus, but I'm sure that can be hacked.

But, wait... I could just pass any menu to the navigation bar and change the superfish.css for each Theme... Ok, now I see I was before just talking nonsense... Sorry, you are Right. I'm in Germany and it was very late when I wrote that :D

So, could you help me to port the Superfish from Pixture Reloaded to Zen. I can handle the CSS, but I would like to know what do I really need. Suppose I'm using the navbar of zen. Could you tell me if these steps are right and which files and what should I copy or change? I'm a bit confused...

1-There is a folder in pixture_reload called sf, with some folders. I just copied the content of those into my zen subtheme:
-superfish.css
-superfish.js
-arrows-ffffff.png
-shadow.png

2-Is this superfish.css the modded one or the modifications are included on style.css of Pixture? I've just added this to my subtheme.info:
scripts[] = superfish.js
stylesheets[all][] = superfish.css

3-In the header of page.tpl.php of Pixture I just found the code below regarding to Superfish. Initialise this superfish? I have to just copy this into my page.tpl.php or do I have to change or add something else here?

$(document).ready(function() { $('#superfish-inner ul').superfish(); });

4-You said I should use the actual ID, but what I'm supposed to change? Should I just change:
-From the Step 3 Code: "$('#superfish-inner ul').superfish();" into "$('#navbar-inner ul').superfish();"
-From superfish.css: every "#superfish-inner" into "#navbar-inner"

Theoretically with just those Steps it should work, doesn't it? Thank you!

Steps 1 & 2 - yes, that's

Jeff Burnz commented 1 October 2008 at 13:40

Steps 1 & 2 - yes, that's basically it. Assuming all the paths are correct (the paths to the files, including the image paths...) and Zen is loading up the files it *should* work.

Step 3. Jquery uses the *same* ID and Class selectors to target content, just like the CSS - in your theme it will be looking for #navbar-inner ul, so you have to change the script to match your ID.

$(document).ready(function() {
$('#navbar-inner ul').superfish();
});

The superfish.css is the one modded to work with Drupal - but you are rigth, NOT ALL of the styles are in that file - some are in the main style.css file for Pixture Reloaded (because they get recoloured). Look through the style.css file - the are commented. just copy them over to superfish.css and it will work - although Pixture Reloaded superfish menus use an image for the hover background, so you will want to change that.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Thank you. I'm gonna try

daniorama commented 1 October 2008 at 13:52

Thank you. I'm gonna try this right now. Just one thing more, Do I have to change from superfish.css: every "#superfish-inner" into "#navbar-inner"? I suppose the answer is yes...

If this is working I will try to add the options in template.php and theme-settings.php...

It's working! I had some

daniorama commented 2 October 2008 at 12:58

It's working! I had some issues using the nav-bar so I just create a new superfish region. Working really nice. I'll write a how to in the zen them issues queue as soon as I have time. Thank you very much!

I just have a problem right now, when the menu was based in Nice Menus I had no problems with DHTML menu module, but now the Superfish menu is not working as supposed. I just have to disable DHTML in that menu, but I don't know how to do it. Any clues? There is an issue here http://drupal.org/node/243212 Maybe you could help.

By the way, do you know any way to center the menu? I tried this http://drupal.org/node/308523. But it's not working... :(

Sounds promising

niklp commented 2 October 2008 at 16:40

Can you please leave any details here that you have of this operation, if possible? I am looking to accomplish the same, in the near future and any information you can leave would be very helpful indeed!

Web Design & Development in Nottingham by Kineta Systems

As soon as I finish my

daniorama commented 2 October 2008 at 21:52

As soon as I finish my website I will write a clean method to achieve it and aggregate an option in Zen theme. I will try also to install SIFR Lite.

Right now I have to finish this ASAP.

If you want it already without the option in the Theme configuration you can just follow the steps 1 to 3. Then you can just include a menu in your header region or create a new region (I had problems when I tried to add it into the navbar region, so I just created the superfish region) Then change "#superfish-inner ul" in $('#superfish-inner ul').superfish(); (Step 3) to the div where you added the menu (if you had added it into header, then it should be just #header-inner, in my case it was #superfish) Later you must copy the content regarding superfish from style.css in Pixture reloaded theme into your theme css and you must change all the references there and superfish.css in Step1 from superfish-inner to the name of your menu region (in case of header, header-inner, in my case just superfinish). There is also a graphic used in the background of each active option on the menu, but you can just change the reference (is in the code copied from pixture reloaded) Sorry if my explanation is a bit confusing.

I must also say that none of this could be achieved without the previous work of the developers of pixture reloaded theme. Many thanks to them :)

Looking forward to this.

encho commented 9 October 2008 at 15:39

Looking forward to this.

As long as I have my update

daniorama commented 9 October 2008 at 20:14

As long as I have my update problem solved and website working I will write a guide to Superfish, sIFR 3 and combining both.

In my tests it was working good in Firefox, Chrome, IE and Opera.

I'd like to see this,

Jeff Burnz commented 9 October 2008 at 20:29

I'd like to see this, combining sIFR and Superfish, sounds intersting.

Need help with IE?
Learn basic XHTML and CSS first.
Get smart with web specs.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Right now the only problem

daniorama commented 9 October 2008 at 23:54

Right now the only problem I'm experiencing is that sometimes just the first level is showing the sIFR and sometimes all levels. I'm not really sure why is that happening...

PS: how could I change the title of the Forum post? Nice Menu has nothing to do with this anymore. Maybe I should just create a new Forum post, should I?