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
Related
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();
}
})
On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body
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.
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
I'm new to Javascript and using Jquery and I ran into a problem.
I made a scroll-to-top button which should be visible when you start scrolling down. I got it to work, when I click it I smoothly scroll to the top and when you're at the top it disappears.
Only when I first load the page it's already visible, then when I scroll down it briefly disapears untill I reach the point where the element is located and it pops up again when you scroll down even more. Here is my code:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#backTop a').fadeIn();
}
else {
$('#backTop a').fadeOut();
}
});
$('#backTop a').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
You'll also need to change the CSS of the button. By default, the element would be shown after all the elements before it in the HTML are displayed. You can change the CSS to ensure the element sticks to the bottom of the viewport always:
#backTop a{
position: fixed;
display: none;
bottom: 10px;
right: 10px;
}
Fixed positioning ensures that your div always stays at the same position. You can place the element by using the top, right, left and bottom rules. I've set the display to none because initially the back-to-top button should not be visible.