CodeBlog.ch

Okay, so it seems as if I am so much of a newb that it’s not working quite like it is supposed to. I have changed my theme and edited my backgrounds and such but with this theme (floating) I am able to keep the layout, see the drop down menu but it doesn’t drop down.

If I use the above code then it only displays the code jargon on the site.

Do I edit any portion of the code to point to the jquery?

I’ll keep trying.

HI
How would I include the another template almost exactly the same as the default in this script?
I guess i would have to add it somewhere in here?

setBlockCustomTemplate(false);

function callback($buffer)
{
return (str_replace(‘class=”nav”‘, ‘class=”sf-menu” id=”nav”‘, $buffer));
}

ob_start(“callback”);
include($bvt->getTemplate());
ob_end_flush();
?>

Any help would be really appriciated.

Thanks

What do you mean by “another template”? A SooperFish CSS template I assume? You only have to replace the CSS file you’ve put in the directory “css”. concrete5 automatically loads those files located in the “css” directory if their extension is “.css”!

Michelle, if you’re talking about the site you’ve entered when you wrote the ast comment, it’s not a jQuery issue in this case. However, I can’t see anything about the SooperFish template. Are you sure you’ve selected the right autonav block template after you added the autonav block?

does this display 3rd level dropdowns?

This tutorials uses SooperFish, whatever SooperFish does you can do very easily. First level on top (horizontal) and the second level (down) and a third level (to the right) is supported out of the box. Check this page to see an example http://www.sooperthemes.com/sites/default/files/SooperFish/example.html

Hi remo,

WOW, I spent almost two days trying to get this working and you make it look easy

A couple of questions, if you don’t mind.

1 How do you control the hover shading, my template keeps over-riding any sooperfish settings?

2. How would I make the menu span across the full width? When I try to use anything but display:inline it turns into a vertical list.

Thanks.

1. In the example CSS, there’s a CSS style like this:

ul#theme3 li a:hover, ul#theme3 li a:focus

Just look for :hover, usually there aren’t too many of them..

2. That’s probably a bit difficult as every element has a different width. Sooperfish would have to calculate all the items manually and as far as I know, there’s no such option. However, I just created a wrapper for it, I’m not the author of SooperFish and certainly don’t know every line of code in it. You might want to check if the actual author knows a bit more about that: http://www.sooperthemes.com/open-source/jquery/jquery-sooperfish-dropdown-menus

Thanks for this post.
subpages are appear an dropdown when hover, but it disappers when moves down,there is any solution.
Please tell me, thanks in advance.

Have you tried with different themes? There could be another CSS interfering with the menu. Does the original SooperFish menu work fine for you? http://www.sooperthemes.com/sites/default/files/SooperFish/example.html

Hi,
I am a newbie with concrete5.

Is it possible to adapt the code to redirect to an anchor inside a block title of the current page ?

ex:
Anchor:

on click on a drop down element we are redirected to the title of the block inside the current page.

block title inside the page

thanks for your blog.

Have you tried to add an external link into the sitemap? You’d have to enter the whole path to the page but isn’t perfect but I think it’s the easiest way to achieve this.

Hi,

First of all, thank you for all your tutorials!

I’ve followed this one and it works perfectly, however, I have an issue with the second tier sub menu on chrome and IE.

Here is what I’m working on..

The sub menu is only set up for Talent, under Talent there’s a submenu, and under each category is a second submenu.

Firefox displays the second menu no problem, but I can’t seem to get it to display the second level menu on Chrome, or IE. At first I thought it was due to a jquery conflict I have for the Mobile responsive version of the navigation, but after removing that jquery script, the issue is still there.

I’m at a loss, I’ve spent hours going over my css, adding margins, background colors, to figure out where the menu is, but can’t seem to find it.

Any help would be greatly appreciated.

Chris, this is probably because the third level menu is behind the second level menu. Try to add this:

.mainNav ul ul ul {
	margin-left: 50px ! important;
}

I won’t make the layout look nicer but I think it should show you where the menu is hidden. I’m not sure, but I think it’s a problem caused on my sooperfish css.
You might want to download the latest CSS, it might work better: http://www.sooperthemes.com/open-source/jquery/jquery-sooperfish-dropdown-menus

Thank you so much Remo, that did it!

I do plan on adding in arrows, I was just waiting until I figured out what was going on with the menu first.

Again, thank you so much for your help.

Combination of Concrete5 and superfish is absolutely unuserfriendly..I wouldn’t recomment anyone to use and waste tonse of time on how to simply edit.
Guys, there are way better options in Joomla or Drupal..

First of all, this blog post is about SooperFish and not Superfish. While both sound similar, it’s not the same.
I assume that I’ve built more projects based on concrete5 and never had any issues. Also, the concept I’m describing is aimed at developers. If you want an easier solution (maybe for you “userfriendlier”), look at stacks or global areas. I still prefer the method described in this template as I like to keep the navigation in the code but that’s just a personal taste.

You say there are better options but don’t mention anything specific. Your comment feels a bit like a personal opinion and not much more. Why don’t you state some more specific issues you’ve had with S(oo/u)perFish and concrete5?

hi there, thanks for this great tutorial

the only thing im having trouble with is that the dropdownmenu appear unaligned with the parent page.

this means for example “about>ignacio>bio>expertise>” everything beneath “about” appears moved to the right…and it even seems to be part of other menu pages…

how could I solve this?

thanks

problem solved… I just added some third level pages I was missing and that was it

Hi Remo,

thank you very much for your tutorial.

I’d like to customize it a bit. I would remove this swinging effect of the drop down lists. But I don’t know how. Is it customizable ?

Is the menu customizable via the dashboard ?

Thank you

Hi Frank! The sooperfish method used to initialize the menu has a bunch of different options. One which allows you to change the animation.
Have al look at this code and you’ll see a more advanced example: https://github.com/jjroelofs/jQuery-SooperFish/blob/master/example-advanced.html

No, this template doesn’t have any options in the dashboard, it’s not an add-on but only a block template. It would be possible to create a complete add-on, but that takes more work. My tutorial is a solution focused on developers.

Hi Remo,

thank you. Where do I have to write such an option in your files ? And which option ist it ?

Thanks
Frank

easingShow and easingHide is probably what you need. They have to be placed in view.js

Hey Remo – thanks for this, very useful – good work!

Where would be the best place to add in conditionals for page attributes – primarily I want to add in the ‘exclude from nav’, or even better, ‘exclude children from nav’ attribute.

Usually in auto nav I’d add this to the for loop, but this script is constructed a little differently right?

Hey Richard, yes it works a bit different, it basically wraps the existing template in order not to have to duplicate a lot of code.
However, you can easily make modifications if you copy /concrete/blocks/autonav/view.php and put that content in your view.php. But don’t forget to change the class “nav” to “sf-menu”.

I aded sooperfish to my website and everything is working great except the drop downs are not working on Android and Apple mobile devices. Is thee something I am missing?

No, I don’t think you’re not missing anything. I assume the SooperFish dropdown just doesn’t work with touch devices! There’s no touch device lying around right now but if you want to be sure, check if this works: http://www.sooperthemes.com/sites/default/files/SooperFish/example.html I assume it doesn’t which would confirm that it’s a problem found in SooperFish

Thanks for the reply. The drop downs on that site do work on touch devices. Any other ideas?

For those who wonder about this (I’ve sent him an e-mail): The issue occurs because the top-level pages have a link as well. If you use a touch device, it will open those links. If someone wants to use SooperFish on a touch device, the link in the top level pages has to be replaced by a “#”, but keep in mind that touch device users won’t see the content you’ve added to the top level pages!

Thanks, this worked exactly as it should, and exactly as I wanted.