I need the submenu to collapse here, not sure how to even begin

http://dev2.magickitchen.com/menu/main_courses.html

I would like to see this on mobile:

Click on HomeStyle Menu and see:

Gifts>
Meal Bundles>
Main Courses>

And they open to the deeper menu when you click on them.

Currently, when I click on HomeStyle menu, I see:
Gifts> then it lists all the gifts
Meal Bundles> then it lists all the Meal Bundles
Main Courses> then it lists all the Main Courses

Is this something you experts can help with? Thanks in advance.
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi,
the navigation is confusing, some menu with arrow are opening with sub item and some other are not
like Learn about this menu so maybe just remove the arrow for Learn about this menu .
Tom BeckCommented:
When you go to mobile, the hover action does not exist so you have to expand the submenu with a tap. However, you have an anchor in the top level so clicking causes the page to navigate away. The jsfiddle below attempts to get around that problem by copying the top level menu item to the submenu for screens smaller than 768px wide, the width at which you menu converts to mobile. The script then removes the link url from the top menu item.

http://jsfiddle.net/6xoeLnjd/

What's missing in the fiddle is a way to restore the menu when the browser is stretched back to 768px or greater on desktop. Still, it should give you some ideas for fixing the issue.
Melody ScottAuthor Commented:
lenamtl, that is a good point, thanks, I'll do that.

Tom Beck, thanks very much, I'll give that a try.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Melody ScottAuthor Commented:
Hi, it looks as though I'll need more help with this. I added:
<script>if ($(window).width() < 768) {
    $('ul.menu li').has('ul.menu').each(function () {
        var lnkTxt = $(this).children('a').text();
        var lnk = $(this).children('a').attr('href');
        $(this).children('ul.menu').prepend("<li><a href='" + lnk + "'>" + lnkTxt + " Page</a></li>");
        $(this).children('a').attr('href', '#');
    });
    $('ul.menu li').has('ul.menu').on('click', function (e) {
        if ($(this).find('ul.menu li').is(':visible')) {
            $('ul.menu li ul.menu li').css('display', 'none');
        } else {
            $('ul.menu li ul.menu li').css('display', 'none');
            $(this).find('ul.menu li').css('display', 'block');
        }
    });
}</script>

and the css  @media screen and (max-width:768px) {
    ul.menu li ul.menu li {
        display:none
    }
}

to http://dev2.magickitchen.com/about.html, and it doesn't seem to be doing what we want it to on mobile. I am hampered by only having emulators to work with, I apologize for that.
Tom BeckCommented:
You added the script to the beginning of the body. You are trying to access elements in the script that are not yet registered on the page. Try moving the script to the bottom of the page.

Understand that my script was more a demonstration that is was possible to fix your current page to make it work the way you wanted on mobile. Not a complete solution.

As far as having mobile emulators, I don't think that is necessary in this case. Just reduce your browser size to less than 768px to test.
Melody ScottAuthor Commented:
Hi, I moved it to the bottom of the page, now the HomeStyle Meals, MKMeals Menu, Discount Center(the upper level dropdowns) won't open at all.

I wonder if I could somehow take away that anchor in the top level only for smaller screens? Would that work?
Tom BeckCommented:
I see it at the bottom of the page but it is still above the jQuery library include which you are loading twice at the very bottom.

<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

The script would need to come after the jQuery library (which only needs to be loaded one time).
Melody ScottAuthor Commented:
Apologies for that! I have moved it, and am seeing the same problem, that the top menu won't open on click. ( HomeStyle Meals, MKMeals Menu, Discount Center).
Tom BeckCommented:
I don't see my script on the page at all now. It's just as well. Adding my script to the page will just create a bigger mess on top of the mess of scripts you already have inside app.js at the bottom of the page.

My script starts with this conditional.

if ($(window).width() < 768) {
...
}

You already have that conditional repeated no less than five times in app.js. It only needs to be written once for the entire page with all of the changes you want to make when that condition is met should be inside of it.

If your goal is to not have the submenus opened when the page is less than 768px wide then this piece of script or the markup it affects needs to be changed because this script is causing ALL submenus to open.
if($(window).width() < 768){
	$('.menuWrapper').each(function(){
		$(this).find('h2.menuHeadding').click(function(){
			$(this).parent().find('ul.menu').toggleClass('open');
		});
	});
	}

Open in new window

Putting my script on top of that to close the submenus just creates a bigger mess.

I can try to find some time today to re-write app.js to get you what you need.
Melody ScottAuthor Commented:
thanks, much appreciated.
Tom BeckCommented:
Here's my attempt at re-writing the app.js file. Try replacing the existing (back up first) and see if it gets you what you're after.
$(window).on('resize load', function(e) {
	var w = $(window).width();
	$('.menuWrapper').each(function(){
		$(this).find('span.txss').css({'margin-top':($(this).find('h2.menuHeadding').height() - $(this).find('span.txss').height()) / 2});
	});
	$('ul.menu li').each(function(){
		$(this).find('ul').css({'left':$(this).width(), 'min-width':'250px'});	
	});
	//wait for user to stop resizing before adjusting anything
	var timer = setInterval(function(){ 
		var newW = $(window).width();
		if (w == newW){
			clearInterval(timer);
			if (w < 768) {
				$('ul.menu li').has('ul.menu').each(function () {
					var lnkTxt = $(this).children('a').text();
					var lnk = $(this).children('a').attr('href');
					$(this).children('ul.menu').prepend("<li class='sm-lnk'><a href='" + lnk + "'>" + lnkTxt + " Page</a></li>");
					$(this).children('a').attr('href', '#');
				});
				$('.rightSidebar, aside').css({'min-height':'inherit'});
				$('ul.menu li').each(function(){
					$(this).find('a').click(function(){
						$(this).parent().find('ul').toggleClass('blck');	
					});
				});
				$('.menuWrapper').each(function(){
					$(this).find('h2.menuHeadding').click(function(){
						$(this).siblings('ul.menu').toggleClass('open');
						$(this).find('.rghtarrw').toggleClass('fa-angle-down');
					});
					$(this).find('h2.menuHeadding').siblings('ul.menu li').click(function(){
						$(this).children('ul.menu').toggleClass('open');
					});
				});
			} else {
				$('.rightSidebar, aside').css({'min-height':$('.mainContentArea').height()});
				$('ul.menu li ul').removeClass('blck');
				$('ul.menu li').has('ul.menu').each(function () {
					if ($(this).find('li:first-child').hasClass('sm-lnk')) {
						var lnk = $(this).find('li.sm-lnk a').clone();
						var lnkTxt = $(lnk).attr('href');
					    $(this).find('a').eq(0).attr('href', lnkTxt);
					}
					$(this).find('li.sm-lnk').remove();
				});
			}
		}
	}, 300);//Check every 300ms to see if the window width has stopped changing.
	        //This saves on a lot of rapid-fire jQuery function calls
});

Open in new window

Tom BeckCommented:
By the way, on your latest page you are loading the jQuery library three times at the bottom of
http://dev2.magickitchen.com/menu/main_courses.html
(for example).

You have versions 1.7, 1.9 and 1.11 all loading. Bad practice as there may be conflicts between the various versions.
Melody ScottAuthor Commented:
Hi, OK, I took your code and replaced everything that was in the app.js file (after backing up), and uploaded it. Now if I resize the window to small, and click on the main menu (Homestyle Menu >), it doesn't do anything, doesn't open up at all.

Thanks for the note about the jquery, I'll check for that.
Melody ScottAuthor Commented:
Sorry, that's true in firefox but in chrome it is still as it was before, the full menu.
Tom BeckCommented:
It works fine in Chrome.

If you are testing in Chrome and it's not working, right-click on the page and click View Source. On the page that opens, scroll to the bottom and click on the app.js link. Is the code in the app.js file the old code or the new code?
Melody ScottAuthor Commented:
You're right, it was the old code. Works great on chrome! What I see on firefox and IE is still that the top menu won't open. What do you see?  Thanks so much for all the work you are doing on my behalf!
Tom BeckCommented:
Thought you said before that it worked in Firefox but not in Chrome.

Are we talking about the same menu? When you say "top menu" you mean the Homestyle Menu, correct?

On my system it tested fine in Firefox, Chrome, Safari, IE 9 and IE 11. Also works in mobile Safari on my iPhone. I did not use any obscure javascript. It should work on any modern browser. There is a slight delay before you can interact with the menus, I put that in to make it more efficient, but it's hardly noticable.

B.T.W. you're still loading three different versions of jQuery. Not good.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
I'm working on the jquery right at this moment, thanks.  I do mean homestyle menu.. I wonder why it's not working for me...

I'll check with a few other people, see how it's working for them. Thanks again!
Melody ScottAuthor Commented:
Fantastic, great help, thanks very much!!
Tom BeckCommented:
You're welcome. Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.