superfish menu

[snark]

Is there anyone who can explaine  a bit more about implementing jquery plugins,

I need to use the superfish menu but I do not see how I can make this visible?

[crnogorac081]

Hi,

You can take a look a code of SF menu: http://users.tpg.com.au/j_birch/plugins/superfish/#sample1

Then it will be easy for you to implement it..

cheers

[BlackBird]

If you're using jQueryAdmin

* just install the plugin (download at http://www.websitebakers.com/pages/libs/jqueryadmin/jquery-library.php)
* add it to the default.jquery preset;
* include the droplet [[jQueryInclude]] in your page footer;
* make sure that your menu is created using an unordered list markup (<ul>)
* add class="sf-menu" to the <ul>

That's it.

[crnogorac081]

Oh cool, I didnt noticed that there is a SF menu in JQ Admin lib...

[snark]

okay, so far it works, jqueryadmin seems to be very interesting...

question: how do I get the superfish menu to be displayed as nav-bar style?

[snark]

okay, I got that working, (the navbarstyle..)

with a bit of puzzling I managed to get the third level also in the navbar style

when I click on a subpage ( either second or third level) I want the menu to maintain the collapsed state so that the path to the page is shown in the menu ...

now it rolls back in as soon as the page is clicked

is it possible to leave it visible

( I atrached a screenshot of what I like it to look)

[BlackBird]

If you're using SM2 to create the menu, just add

pathClass:  'menu-current'

to the superfish options.

See here for details: http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

[BlackBird]

"snoork" asked me for some more info.

So let's assume you have a template using show_menu2() to create the menu and jQueryAdmin installed.

The menu call looks like this:

Code:

<?php
              show_menu2(
                  0,
                  SM2_ROOT,
                  SM2_ALL,
                  SM2_ALL|SM2_PRETTY,
                  false,
                  false,
                  '<ul class="sf-menu sf-navbar">',
                  false,
                  false,
                  false
              );
?>

The important part is the '<ul class="sf-menu sf-navbar">'.

Okay, next, go to the Backend -> Admin-Tools -> jQueryAdmin and click on the "plus" icon next to the "Plugins" header. You'll get an upload window on top of the page. Upload the Superfish plugin you can download at AMASP.

After uploading, click on the "gear" icon next to the "default.jquery" preset and mark "Superfish" in the Plugins row. Save the changes.

You should now see your Superfish enhanced menu in the frontend, but there's a detail missing: you wish to keep the submenu open for the current root page.

This can be done by adding

pathClass: "menu-parent"

to the Superfish call. (Sorry, it's not menu-current as mentioned above.)

To add this, klick on the "Notepad" icon next to the "default.jquery" preset in the jQueryAdmin Tool and change the "pathClass" to "menu-parent".

Now, after clicking on a root menu entry that has children, the submenu should stay open.

[snark]

and pathlevels to 2

wonderful so far but ...

now the class menu-current does not work anymore, any way to solve this?

[Roych]

Hello,

Don't know if this is the right place for this but anyway.
I have a problem viewing superfish menu with internet explorer. In FF and Chrome everything is working fine but in IE there are no hover submenus.

already tried the:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

any idea?

here is the test page!

http://www.feel-fun.com/wb

thank you!

[mjm4842]

I am using IE8 and everything seem to work except the sub-menu for Domov.

I have used Superfish in my templates with excellent success (so-so on mobile phones). When it fails, it's usually because of something in my own styles.

Looking at the source code, I notice the sub-menu code is actually but just not showing up. This leads me to believe that the problem is directly related to your own styles.

With best regards,

Mcihael

[Roych]

Oh yes today everything is working fine  only submenu for First menu doesent. But this one is going to be HOME button so it doesent need one really.

thx.

[Roych]

Hello now I have a nother question.

How do i put a litlle arrow like this  ( » ) in submenu who has sub sub menu?

my code now is:

Code:

<?php
              show_menu2(
                  0,
                  SM2_ROOT,
                  SM2_ALL,
                  SM2_ALL|SM2_PRETTY,
                  false,
                  false,
                  '<ul class="hover">',
                  false,
                  false,
                  false
              );
?>

Thank you!

[mjm4842]

Hi Roych,

Thank you for your question. Here is the lines of code I use to make SuperFish work with my templates:

In the <head> section:

Code:

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo TEMPLATE_DIR; ?>/sf/superfish.css" />
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/sf/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/sf/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/sf/superfish.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $('ul.sf-menu').superfish({
          delay:       0,                 // one second delay on mouseout
          animation:   {opacity:'show'},  // fade-in and slide-down animation
          speed:       'fast',            // faster animation speed
          autoArrows:  true,              // false to disable generation of arrow mark-up
          dropShadows: true               // false to disable drop shadows
      });
  });
</script>

The arrows are enabled by setting the autoArrows line above to true.

In the <body> section, I use the following command to generate the menu:

show_menu2(
  0,
  SM2_ROOT,
  SM2_ALL,
  SM2_ALL,
  '<li>[a][menu_title]</a>',
  '</li>',
  '<ul class="sf-menu">',
  '</ul>'
);

When I started working with SuperFish, it just would no work properly until I stopped trying to adapt SuperFish to my my styles and simply adapted my template to SuperFish's styles styles instead. Then things became much easier.

I Never touch any of the SuperFish code or styles and simply override it's style settings in my own CSS file.

Hope this helps!

With warmest regards,

Michael Milette

[Roych]

Hi,

Sorry for the delay.

I'we tried this but somehow doesn't work right for me. It shows me arrow only the first time when I move mouse over it, the second time menu doesent even (slide) hover out.

And the arrow was not pointing right but down.

any idea?

Thank you

[mjm4842]

Hi Roych,

I really your frustration. Those inconsistent bugs are a pain to deal with. As CSS is layered, it could be that they are there and just not appearing in the right order. Do you play around with z-order in your CSS? Does it have the same behaviour in other web browsers?

Sometimes when I have a CSS issue, it manifests itself differently in different browsers. How it appears in a different browser can often be key to identifying the real issue. If it works fine in one browser and not in another, that is a hint that your issue might be browser specific which is helpful because the Web has lots of information related to CSS and browser specific issues.

One tool that might help you is a plug-in for Firefox and Chrome is the "Web Developer v1.1.8" extension by Chris Pederick. It adds a toolbar to your browser full of troubleshooting tools. One of my favourite tools is in the Display Element Information option in the Information menu. When enabled, clicking on any element in your page will reveal the attributes, position, style ancestors and other useful information to help you figure out where a particular problem might be coming from. You can download it from http://chrispederick.com/work/web-developer/ or from the Firefox Add-on library at https://addons.mozilla.org if you are using Firefox. Sorry, it's not available for Internet Explorer. Another very popular Firefox add-on for web development is Firebug. I think it's just a matter of preference. Each of the two tools has it's own strength and weaknesses.

As for the arrows pointing down instead of right, there is no magic here. You will have to edit the graphic image and rotate the arrow. The default graphic that comes with SuperFish points down.

Don't give up! It would be a shame for you to quit not realizng just how close you are to actually succeeding.

With best regards,

Michael

[Roych]

Hello


I searched the forum but didn't find this so...

I'm using superfish menu almost the same as in AMASP and would like the current menu to be exatcly as in amasp.
So if you clik one of the submenues the root and the submenue would stay underlined or background colored just like in AMASP. How do I do that.

I tried the:

Code:

.menu-current {

text-decoration: underline;

}

But only the sub stays underlined


My SM2 code:

Code:

<?php show_menu2(0, SM2_ROOT+1, SM2_ALL, SM2_ALL|SM2_CURRTREE, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?>

Thank you in advanced

R.

[Roych]

Anyone?