We help IT Professionals succeed at work.

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

Melody Scott
Melody Scott asked
on
51 Views
Last Modified: 2015-10-09
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.
Comment
Watch Question

CERTIFIED EXPERT

Commented:
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 .
CERTIFIED EXPERT
Top Expert 2015

Commented:
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.

Author

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

Tom Beck, thanks very much, I'll give that a try.

Author

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.
CERTIFIED EXPERT
Top Expert 2015

Commented:
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.

Author

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?
CERTIFIED EXPERT
Top Expert 2015

Commented:
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).

Author

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).
CERTIFIED EXPERT
Top Expert 2015

Commented:
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.

Author

Commented:
thanks, much appreciated.
CERTIFIED EXPERT
Top Expert 2015

Commented:
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

CERTIFIED EXPERT
Top Expert 2015

Commented:
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.

Author

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.

Author

Commented:
Sorry, that's true in firefox but in chrome it is still as it was before, the full menu.
CERTIFIED EXPERT
Top Expert 2015

Commented:
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?

Author

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!
CERTIFIED EXPERT
Top Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

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!

Author

Commented:
Fantastic, great help, thanks very much!!
CERTIFIED EXPERT
Top Expert 2015

Commented:
You're welcome. Thanks for the points.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.