Need help with superfish mobile responsive menu

valarcher · June 22, 2015, 2:11pm

Hi – please can someone help me to get superfish to work here at http://dev.greensmoothie.com/?

How do I center the tabs?
I’m trying to change the background & text colors, but whatever color I change has no effect.
The superfish page here shows arrows when there’s a dropdown. I copied their html + css exactly but mine has no arrows. How do I get the arrows to display? I’d also like the arrows to change color as at Paul’s example page here.
How can I get it to switch to a hamburger symbol with just the word “Menu” when it flows into 2 lines? (which it does at 740px). Is there some std css for displaying hamburger?
Even when the 1st level doesn’t break, I still can’t read the 3rd level items in the last tab on right, e.g. in Small tablet landscape (800x600) and Tablet portrait (768x1024). It’s ok at Tablet landscape (1024x768) which is the same as my own computer monitor. Does that mean I need to show the hamburger at 800px?

Or shall I just post a job listing asking for a programmer to do it? Is it too difficult for me?

thanks, Val

RyanReese · June 22, 2015, 2:32pm

“.sf-menu” needs display:table and to not be floated. Then, “.sf-menu > li” needs display:table-cell; and you need to unfloat that.
What have you tried? “.sf-menu li” holds the background color (the light blue).
You copied this rule? You added the class to the anchor in the HTML? (Answer: No )

.sf-arrows .sf-with-ul::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -3px;
    height: 0px;
    width: 0px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.5) transparent transparent;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}

Google “hamburger menu css”. You’ll find hundreds of examples to follow .
You tell me .

valarcher · June 23, 2015, 12:03pm

Hi Ryan - many thanks for replying. I gave up and will post a job listing!

(2) I still couldn’t change the colors. Changing background color # has no effect in any browser. I checked at http://hex.colorrrs.com/ that my hex # is correct.

(3) I did copy the rule – only difference is you have “.sf-with-ul::after” and they have “.sf-with-ul:after” – but adding the extra colon doesn’t display the arrow.

I didn’t add any class to html because only class SF has is <li class="current"> but there’s no class of “.current” in the css so I left that out. If I add it, the arrow still doesn’t display.

(4) Thank you! I found this:
http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/

I tried it but still couldn’t get anything to work. It displays the hamburger first and only a menu when you click the icon. I need it the other way round. And even the menu didn’t display correctly.

So hopefully someone will respond to the job listing I can see this is way beyond my limited knowledge.

thanks! - Val

RyanReese · June 23, 2015, 12:22pm

Is the background color attempt online?
But does the HTML have those classes? Does your HTML match theirs?
Let’s leave hamburger alone until we get these other issues sorted.

valarcher · June 23, 2015, 2:13pm

It’s on localhost. I realized something must be over-riding my css. So went looking for it and saw that the header calls up superfish.css, looked into that & saw it’s the exact duplicate of the css I’d copied into my own css. So it was over-riding my own! Once I deleted that <link rel="stylesheet" type="text/css" href="1nav/superfish.css"> it’s working fine. I can change colors now.
The only other class I can see in their css (besides sf-menu) is “sf-arrows”. I tried adding that to li - <li class="sf-arrows"> but arrows still don’t display

How do I center the tabs inside #menu? I tried margin:0 auto; & text-align:center; but neither work. So I added a <div class="tr"> and tried margin & text-align on that .tr but it also doesn’t work. See:
[http://dev.greensmoothie.com/][1]

Also I’ve lost the way it was flowing into 2 to 4 rows on “view responsive layout”. Now it triggers a horizontal scroll bar.

thank you!
[1]: http://dev.greensmoothie.com/

PaulOB · June 23, 2015, 3:53pm

You haven’t initialised the plugin so all you have at the moment is a css menu. You need to call your menu by name and not use the defaults from the documentaion.

<script>
	(function($){ //create closure so we can safely use $ as alias for jQuery
		$(document).ready(function(){
			// initialise plugin
			var example = $('#menu').superfish({
			//add options here if required
			});
		});
	})(jQuery);
</script>

The arrows will now display and the menu will now be controlled by js with fade, delay and keyboard actions added.

If you want the items to wrap then you will need to lose the display:table-cell and use float instead. (Although a wrapping drop down menu is a usability and accessibility nightmare.)

valarcher · June 24, 2015, 6:49am

Hi Paul - thank you! The arrows are working now! I’ll ignore the wrapping dropdown.

But now I don’t want the arrows. I deleted <li class="sf-arrows"> - made it just <li> - but they still show. Is it one of these scripts doing it? They’re all in <head>.

hoverIntent.js (4.8 KB) superfish.js (7.1 KB) jquery.js (90.9 KB)

I don’t know what all those scripts are doing! Can I delete (or shorten) any of them? I would like the minimal js possible because js scripts always end up conflicting with each other (e.g. it may conflict with a testimonials or subscribe script) or the browser complains it’s not loading.

At the least, I need to delete the arrows. They trigger horizontal scroll bar in 1024. I need to set the @media at 1024.

Am I right in placing all those scripts in <head>? Or is there a script that’s meant to be last before </body>?

Am I doing the right thing wrapping the SF menu in your #menu from http://www.pmob.co.uk/temp/mobile-nav-example-v2/index.htm? I read somewhere that “you just need one div-container that wraps everything you want to show/hide” so that’s why I copied #menu from you and placed <ul class="sf-menu"> inside it.

I copied it verbatim, except I left out text-align:left and box-shadow. Is there a reason you’ve got text-align in there? I’m over-riding it by placing margin: 0 auto; on sf-menu, aren’t I? That’s how I finally got the tabs to center.

thank you! - Val – http://dev.greensmoothie.com/

valarcher · June 24, 2015, 7:48am

I need to add an @media that shows a hamburger at 1024px. I like the simplicity of this page:
/*

http://www.internetkultur.at/hamburger-drop-with-css-javascript-multi-level-menus/

this has the menu-item styles, the hamburger icon, and most important the “.expand” class.
the initial state of the “responsive-menu” is “display:block;”.
you just need one div-container that wraps everything you want to show/hide. Hamburger Icon is created just with CSS, so we do not have to use any image file.
*/

But the problem there is the hamburger shows first, and the menu only after you click it. Can you perhaps see what I should change in this css + html for the menu to show first and the hamburger to show only if the screen narrows to less than 1024px?

css:

.menu-btn div {
    position: absolute;
    left: 100%;
    top: 64%;
    padding-right: 8px;
    margin-top: -0.50em;
    line-height: 1.2;
    font-size: 18px;
    font-weight: 200;
    vertical-align: middle;
    z-index: 99;
}
.menu-btn span {
    display: block;
    width: 19px;
    height: 3px;
    margin: 4px 0;
    background: rgb(0,0,0);
    z-index: 99;
}
.responsive-menu{display: none;}
.expand {display: block !important; }
.open-menu-link{
    display: none;
    position: absolute;
    right: 15px;
    top:0;
    line-height: 55px;
    font-size: 30px;
    cursor: pointer;
}
li .sub-menu{display: none;}
.visible {display: block !important;}

html:

<div class="mobile-nav">
    <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
     </div>

     <div class="responsive-menu">
        <ul>
            <li>
                <a href="#link">Parent 1</a>
            </li>
            <li class="menu-item-has-children">
                <a href="#link">Parent 2</a>
                <ul class="sub-menu">
                    <li>
                        <a href="#link">Child 1</a>
                    </li>
                    <li>
                        <a href="#link">Child 2</a>
                    </li>
                    <li>
                        <a href="#link">Child 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#link">Parent 3</a>
            </li>
        </ul>
    </div>
</div>

Here’s their two scripts:
jqueryhamburger.js (1.0 KB) menu-hamburger.js (1.0 KB)

And how do I stop those 2 scripts from interfering with the 4 superfish scripts (hoverintent, superfish, jquery & SF’s initialize script in <head>?

When the hamburger is open (that is, showing the menu items in a mobile) then I need it to change into an “X” so a person can X out of the menu, but their css doesn’t do that, does it?

thank you! - Val

PaulOB · June 24, 2015, 9:57am

The arrows are added by javascript and you control whether they are displayed or not by using a js initialisation file or editing the main js file (not recommended).

e.g. autoArrows: false

<script>

	jQuery(document).ready(function() {
		jQuery('ul.sf-menu').superfish({
			delay:       1000,                            // one second delay on mouseout
			animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
			speed:       'fast',                          // faster animation speed
			autoArrows:  false                            // disable generation of arrow mark-up
		});
	});

</script>

Read the documentation for more examples.

No don’t delete any of them apart from jquery which you are already including. Don’t include jquery twice and make sure the link to jquery is before the link to any other js files that need jquery otherwise they won’t work. It’s best practice to put all the js files at the bottom of the html before the closing body tag.

The hover intent is a great accessibility aid and determines if the user meant to hover on the item or was just passing by and stops the menu from always activating if there was no ‘intent’ to use the menu.

That’s much more complicated than my example which uses one element for the hamburger. My hamburger uses css for animation so you get the open and close effect and uses a simple toggle for the menu.

jQuery(document).ready(function() {
		$("#header").on( "click", ".mobile-menu", function() {
	 		var myNav = $('#navwrap');
				myNav.fadeToggle().toggleClass('navon');
		});
});

The css and media queries do the rest. There are no other scripts to interfere.

The normal menu is hidden with css and the hamburger shown instead. When the hamburger is clicked the menu is made visible and works like before except that you now should heave re-styled it for mobile use. Refer to my original example for full details. It does what you want except that I am using superclick instead of superfish (note that as I have already stated mobiles don’t do hover so your hover menu will not be as good as mine on mobiles anyway).

I am busy today but will try and look at your specific code later. Meanwhile you would be better off just trying out the menus on a stand alone page so that you can practice and see how things work. The superfish page has full working examples so you can just copy all of their code if need be.

valarcher · June 24, 2015, 3:26pm

Hi Paul - many thanks for that link to documentation, and where to place js files.

will try and look at your specific code later

oh please don’t bother with all that hamburger code since you’ve just told me yours is simpler. I don’t understand js so that’s why I’m groping in the dark. I just look at the length of the css and theirs was lots of lines shorter than yours

Because my basic menu is so wide, I actually don’t want hover at anything less than 1024. So if @media shows the screen is below 1024 (which is computer or tablet portrait) then I want them to click/touch a hamburger, and click/touch every menu item, parent & children.

My core problem is how do I take your code and change your clicks at 1024 into hover? In other words, instead of clicking on a tab to make it dropdown, I want it to dropdown when I hover over it, but only at 1024.

I’ve got to figure out which parts of your css I must replace with superfish’s hover! And also you call an outside script on another server which I’m trying to avoid. And I need to figure how to combine your scripts and superfish’s so it works the way I need it!

And I don’t understand any of that para above, that’s why I feel I should chicken out and place a job listing.

PaulOB · June 24, 2015, 8:59pm

That’s just the link to jquery and you can copy that locally although I doubt your server will be half as fast as the hosted ones and you also miss out on the fact that users may already have this file cached.

You need to stick with one thing or the other and that is the reason that I directed you towards a click menu to start with.

The problem is that you can’t suddenly make a hover menu stop working on hover and then start working on click without a lot of extra javascript detecting window size and initialising the click menu at smaller widths and then removing it at larger widths. There is also the issue of cancelling the hover so you have to add some js to add a class at large widths and use that class to control the hover and then at smaller widths the js removes the class and the hover stops and then you initialise the click menu.

You can’t have hover and click actions at the same time working on the menu because there will be conflicts.

The path of least resistance is always best and simply reverting to a click menu solves all the problems. I believe that superfish does work on mobile even though its a hover menu but I haven’t fully tested it but you will still have the issue of how to handle the menu items at smaller widths and that can’t easily be achieved with hover.

I’ve run out of time today but I will try and see if I can cobble up a demo tomorrow but you may want to follow this tutorial which has a walk through of most of what I mentioned above.

valarcher · June 25, 2015, 8:08am

Hi Paul - this page does exactly what I need:

http://www.incrediblesmoothies.com/

On my computer, it displays dropdown on hover. And I love the way that dropdown looks!

On my iphone, it displays hamburger icon with the word “Menu” across my whole screen, and when I touch anywhere on that line, it displays the full menu. Then the content displays below that full menu.

1st level (iphone) displays in CAPS, and children display with Initial Caps and “-” so it looks like this:

GREEN SMOOTHIE BASICS

How to Make the Perfect Green Smoothie
The Best Beginner Recipe
etc children
RECIPES
Green Smoothie Recipe
etc

Actually that caps, initial caps is the same on computer hover, so all they’ve added to iphone is the "- " to make it clearer it’s a child. But for me I need different font etc on iphone.

So, eg, on computer, I need for parent initial caps in comic sans, and for parent on iphone I need all caps in Ariel/sans serif. But I’m sure that’s easy in the css.

That’s the menu I need exactly! She seems to be using:
http://cobaltapps.com/downloads/dynamik-website-builder/

Then you’ll see just before <body> it calls up a load of superfish scripts.

I’m guessing I can copy the html & css, but what scripts does it use, and where do I get them from? Or do I post a job listing asking someone to write them for me?

I’m beginning to think (though I know nothing about js so my thoughts may be totally off-the-wall) that I need two scripts, one in <head> that initializes the js menu, and one last before </body> that is called up from elsewhere on my server (e.g. from /js) or from another server, which does everything else needed for the menu to work. Is that right?

So that’s my problem – how do I get the menu at:
http://www.incrediblesmoothies.com/
to work at http://dev.greensmoothie.com/

thanks! - Val

PaulOB · June 25, 2015, 1:26pm

The problem with that is that on mobile you get 20 items down the screen meaning that the user has to continually scroll through all the items. On your site it would be worse have you have over 50 menu items!!

You will still need to collapse the submenus to make it in any way useful. The menu on that site s a bit buggy anyway and flies all over the place at times.

I’ve created a demo with all the things you need and all you need to do is apply your individual styling.

http://www.pmob.co.uk/superfish/val-menu.html

The menu will wrap at wider widths although I have not centred it as I didn’t want to complicate the code.

At 794px the media query kicks in and displays the hamburger menu (you can of course change this as required).

When the media query kicks in the nav is hidden and will open when the hamburger icon or bar is clicked (and close when the same menu item is clicked). The main menu items will then open allowing you to click the items to open the sub menus.

There is a zip attached which contains all the files you need. The css is in the head of the page is the main over-rides to the superfish css (which you shouldn’t touch unless you know what you are doing).

The mobile view is styled inside the appropriate media query and the normal view can be changed as required at the top of the css.

The menu works as a clock menu when the hamburger menu is active and as a hover menu at wide screens.

superfish.zip (39.9 KB)

PaulOB · June 25, 2015, 3:18pm

Here’s another (better) version that self closes open menus at the smaller screen widths.

http://www.pmob.co.uk/superfish/val-menu2.html

It does use another linked js file (velocity.js) though to get the smoother slide.

There’s probably the odd bug as I have done this quickly.

valarcher · June 26, 2015, 6:49am

Hi Paul - apologies for not replying yy. It was my 67th birthday so I was out partying

This is incredible! Please can you message me your paypal email so I can give you the $50 that I wanted to place a job listing for?

The only thing I’d like to change – is it possible on mobile when they click a parent, the other parent that was open will close? So there’s only one parent open at any one time?

Otherwise when they click a parent lower down, all the ones they clicked above are still open, and they have to scroll down to find the parent where they were when they clicked. It’s a little confusing to click Juicing (4th parent) and to find yourself back at Eating (1st parent)

thank you! Val

valarcher · June 26, 2015, 8:14am

menu2 works great thank you! - does that closure I was looking for. Now to go play with it! Please im your paypal email…

PaulOB · June 26, 2015, 9:33pm

Happy Birthday:) (I’m 63 in August so I’m not that far behind ;))

All work in the forums is voluntary and free. (Paid work should not be handled on the forums or in public view anyway ;).

valarcher · June 28, 2015, 8:30am

wow 63! somehow I thought you were a techno whiz in his 30’s… our generation didn’t even have computers at school.

Thanks million for your free help. I’m so grateful. Must still go play with colors-fonts but it’s so beautiful and such a huge relief to see something working just the way I needed.

valarcher · June 29, 2015, 12:30pm

Hi Paul - a few problems:

I’m missing velocity.min.js. I looked here but couldn’t find it:
http://users.tpg.com.au/j_birch/plugins/superfish/download/
Hamburger doesn’t respond when I click it – is that because of missing velocity.min.js?
My menu’s now trapped inside #container – hamburger isn’t trapped, just #menu. I tried to paste the html here but it’s not working.
I can’t get rid of arrows! I toggled it to “autoArrows: false” in my script in footer
I changed the @media min-width to 1000px and max-width to 999px. Is that okay?
> "The menu will wrap at wider widths although I have not centred it as I didn't want to complicate the code."

I like the wrap but could I add text-align to sf-menu ul?

.sf-menu ul {text-align:center;
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}

I couldn’t test centering because on my 1024 screen with the sf-arrows it’s wrapping

I’d like to move the superfish.css into style.css and delete in <head>:

stylesheet" href=“1nav/superfish.css”

But when I do that, it doesn’t display correctly. Is there something in one of the js files that’s referencing superfish.css and I could tell it to reference style.css instead?

thank you! - Val – http://dev.greensmoothie.com/

PaulOB · June 29, 2015, 3:20pm

You can [find it here.][1]

[1]: http://www.pmob.co.uk/superfish/js/velocity.min.js. Just copy and paste and save with the correct name.

If you view source on my page you can then just click the link to the file and it will load in the browser.

Yes you need velocity.

Capital F

autoArrows:  False

The superfish.css should be the first css in the file and come before your main.css because there are over-rides on the main css.

You can add it to the same file just have the superfish at the top of the css file.

You can center the menu if you remove the float and do this.

.sf-menu{float:none;display:inline-block}
#menu{text-align:center;}

That will of course need to go after the original rule for that element but before any media queries that modify them.