Avatar of Melody Scott
Melody Scott
Flag for United States of America asked on

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.
Web DevelopmentCSSHTML

Avatar of undefined
Last Comment
Tom Beck

8/22/2022 - Mon
lenamtl

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 Beck

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 Scott

ASKER
lenamtl, that is a good point, thanks, I'll do that.

Tom Beck, thanks very much, I'll give that a try.
Your help has saved me hundreds of hours of internet surfing.
fblack61
Melody Scott

ASKER
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 Beck

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 Scott

ASKER
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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Tom Beck

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 Scott

ASKER
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 Beck

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Melody Scott

ASKER
thanks, much appreciated.
Tom Beck

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 Beck

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Melody Scott

ASKER
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 Scott

ASKER
Sorry, that's true in firefox but in chrome it is still as it was before, the full menu.
Tom Beck

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?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Melody Scott

ASKER
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!
ASKER CERTIFIED SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Melody Scott

ASKER
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 Scott

ASKER
Fantastic, great help, thanks very much!!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Tom Beck

You're welcome. Thanks for the points.