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.
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.
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 .
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 .
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.
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.
lenamtl, that is a good point, thanks, I'll do that.
Tom Beck, thanks very much, I'll give that a try.
Tom Beck, thanks very much, I'll give that a try.
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(f
var lnkTxt = $(this).children('a').text
var lnk = $(this).children('a').attr
$(this).children('ul.menu'
$(this).children('a').attr
});
$('ul.menu li').has('ul.menu').on('cl
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.
<script>if ($(window).width() < 768) {
$('ul.menu li').has('ul.menu').each(f
var lnkTxt = $(this).children('a').text
var lnk = $(this).children('a').attr
$(this).children('ul.menu'
$(this).children('a').attr
});
$('ul.menu li').has('ul.menu').on('cl
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.
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.
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.
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?
I wonder if I could somehow take away that anchor in the top level only for smaller screens? Would that work?
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"></s
<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).
<script src="js/jquery.min.js"></s
<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).
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).
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.
I can try to find some time today to re-write app.js to get you what you need.
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');
});
});
}
I can try to find some time today to re-write app.js to get you what you need.
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
});
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.
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.
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.
Thanks for the note about the jquery, I'll check for that.
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?
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?
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!
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Gain unlimited access to on-demand training courses with an Experts Exchange subscription.
Get AccessWhy 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
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
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.