I'm trying to build a custom responsive navigation that changes to a 100% width pulldown menu for mobile. I have some javascript that hides any sub menu items that may be open if the window is resized to a new breakpoint (it changes at 768px). However, if I open the sub menu at the mobile size (less than 768px) and then resize the window suddenly the hover effect doesn't work and the sub menu items do not show up on the larger screen size.
Here is a JSFiddle of the stripped down version of my navigation https://jsfiddle.net/5h5bhwu4/2/
The only part that I think might be causing the problem is this javascript:
if (w > 768) {
$("#nav > li > ul").hide();
}
If click on the first menu item at low screen size, then resize the window it will not show the same sub menu when you hover over the parent item. But if you start at a larger screen size (or if you don't open the sub menu in the low screen size) it will work fine. I think the problem is in the javascript but I can't see anything that would stop this sub menu from showing.
You need to do the hover effect on JS, not on CSS.
When you see the size of the window:
if (w > 768) {
$("#nav > li > ul").hide();
// Put hover here
}
You need to force the hover, and you can't do it with the CSS
When you say .hide(), it adds inline style display:none which overwrites the style all the time. Best is to have a class and add that class.
if (w > 768) {
$("#nav > li > ul").removeAttr('style'); // this is for the style added on slideToggle
$("#nav > li > ul").addClass('hidden');
}
CSS
.hidden {
display: none;
}
Fiddle Demo
Related
I'm working on this mobile menu and need to allow scrolling of the menu when the the li's are greater than the height of the window. I was close but if you open more than one li the scrolling breaks.
View in mobile...
https://www.sailpoint.com/
$('#menu-wip-mobile').on('click', function(e){
//the li
if($('.dropdown-toggle--submenu'.hasClass('show-submenu')){
// add scroll to mobile menu if li is open
$('.navbar__menu__container ').css("overflow-y", "scroll");
} else{
// remove scroll
$('.navbar__menu__container ').css("overflow-y", "hidden");
}
}
})
Also need to disable body scrolling when the menu is open. This pretty much works when testing.
$('.dropdown-toggle--main').unbind('click').click(function(e) {
// disabling y scrolling when open
if($(this).parent().hasClass('show')){
$('body').css("overflow-y", "hidden");
} else{
$('body').css("overflow-y", "scroll");
}
});
As a simple approach to play with, you could try to set a maximum height to the LI that contains lot of items, and add inner scroll on this LI to allow user to scroll to last items.
Try:
overflow-y: scroll;
max-height: 50vh;
on your .dropdown-submenu.
Looks like this: look at the inner scrollbar in the LI
I want to create mobile menu. This same menu I want to use in desktop amd mobile screen but style is a little bit diffrent. In mobile screen menu is hide but hamburger menu is display. When user click the cross in menu, this's going to close. It's very simple. On desktop screen menu is display all the time. Code look like this:
$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});
It works correctly but css manage to visibility too. I use #media to hide and display menu
#media(min-width: 1200px){
.menu{
position: relative;
display: block;
}
}
And this is my problem. If user close the menu (click on .close, menu doesn't display after change size of browser. For example - I'm testing my website in small window and I close the menu. After I open fullsize window, the menu won't to display.
The problem is when you use fadeOut() on an element, the display of that element remains hide(look at your console and check the inline style of this element).
use $(window).resize(function() {}) to remove inline styles affected by fadeOut() in sizes that you consider as media breakpoint.
One way would be to detect when the user changes the window size, e.g.:
$(window).resize(function(d){
if (window.innerWidth > 1200) {
$('.menu').fadeIn();
}
})
So this is the problem that i have:
its mobile layout so max-width is 480px, and i am having menu which have login, register, cart where they have dropdown. Their height is dynamic so i need to get height from them and then dont allow to user to scroll below that element.
For example - .class have height 900px and i wont allow users to scroll below that 900px. So when viewport or window comes to end of that .class user cant scroll down.
Here is the code there i tried to do that with scrollTop function.
var limitScroll = false;
$(window).scroll(function() {
if(limitScroll && $(this).scrollTop() > limitScroll) {
$(this).scrollTop(limitScroll);
}
});
// Opening box-container
$('.top-menu li a.links').click(function(event){
event.preventDefault();
$('.box-container, .sub-menu').removeClass('opened');
$(this).next().addClass('opened');
var c = $(this).next();
limitScroll = c.outerHeight()-$(window).height()+c.offset().top + 20;
});
Here is preview of mobile layout and dropdowns.
A better approach would be to trigger that dropdown as a fullscreen div. So show this div on button click:
<div id="login>...</div>
styles
#login{
height:100%;
min-height:100%;
width:100%;
position:absolute;
z-index:999;
}
Now the div overlays the complete site and the user is able to close it with the "close" button. No scrolling issues ;)
EDIT:
You could also style the li of that dropdown to fill the screen size.
Ideally, I want the drop down menu to only appear when the parent button is hovered / clicked. However, the sub-menu is showing up when you hover over anywhere that the menu will appear. I put it in JSfiddle:
http://jsfiddle.net/7g67j/
Ideal outcome is the adjustment to the JS that would make it so that the drop downs appear ONLY when the button they are under is hovered...
$(document).ready(function(){
var w = $(window).width();
if(w > windowWdth) {$('#block_navigation > ul').css('display', 'block'); $('#block_navigation').css('height', '55px');
here is your updated jsfiddle. you have to add visibility:hidden in this div
#block_navigation ul ul {
z-index: 1;
opacity:0;
visibility: hidden;
}
Using this nav: http://responsivenavigation.net/examples/multi-toggle/
As you can see the sub menu drops to the edge of the bottom of the div. The problem lies in how this is handled when the page gets re-sized to a smaller width (tablet size) and the menu stacks. No matter which link you hover over, the result is that it places the sub menu below the div. Resulting in an unusable top nav. How would you go about fixing the drop down so that it can handle both lines; top and bottom?
This is happening because of a max-height being set on elements with .menu class when the .active class state is appended to it (Line 159 of the html file).
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
So the nav will not grow beyond the max-height value specified. To fix this, change the value to 100% when active.