I've been asked to make an update to the left side nav menu on our website whesearchreporting.com (you can enter anything for the username & password, if you'd like to access the site. Site's still in test mode). Currently, the nav menu is visible on full width screens, but if you reduce your screen width to around 900px), the menu disappears but can be expanded via a menu toggle icon in the top left. They would now however, like to change this logic to the following, which I'm having problems figuring out how to fix:
On a full screen, there is no menu toggle button visible in the top left. The menu always stays open
On a small or mobile screen, the menu toggle button becomes visible.
So basically, I need to find the code that handles making the left nav menu disappear when the screen size is reduced to around 950px & apply that same logic to the top left menu toggle icon. Is this something handled in bootstrap?
If it helps, here's some of the code that handles making my nav menu smaller or larger (although I don't think it has much to do with making the menu disappear on smaller screens):
$(function () {
$('#sidebar-menu li ul').slideUp();
$('#sidebar-menu li').removeClass('active');
$('#sidebar-menu li').on('click touchstart', function() {
var link = $('a', this).attr('href');
if(link) {
window.location.href = link;
} else {
if ($(this).is('.active')) {
$(this).removeClass('active');
$('ul', this).slideUp();
} else {
$('#sidebar-menu li').removeClass('active');
$('#sidebar-menu li ul').slideUp();
$(this).addClass('active');
$('ul', this).slideDown();
}
}
});
$('#menu_toggle').click(function () {
if ($('body').hasClass('nav-md')) {
$('body').removeClass('nav-md').addClass('nav-sm');
$('.left_col').removeClass('scroll-view').removeAttr('style');
$('.sidebar-footer').hide();
if ($('#sidebar-menu li').hasClass('active')) {
$('#sidebar-menu li.active').addClass('active-sm').removeClass('active');
}
} else {
$('body').removeClass('nav-sm').addClass('nav-md');
$('.sidebar-footer').show();
if ($('#sidebar-menu li').hasClass('active-sm')) {
$('#sidebar-menu li.active-sm').addClass('active').removeClass('active-sm');
}
}
});
});
And here's the html for that code section:
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
Any idea where I should be looking to find the code that handles making that menu disappear on smaller screens?
Thanks
You should search for #media queries in your Content/css/custom.css file
Related
What I am trying to do is grab the height of the dropdown menu from the off-canvas menu and set it to the UL so it covers the height from where the menu is currently sitting. So If the dropdown menu is long in height, the div it's in should expand and the border-bottom should always be visible.
If you click on Corporate a few times, then click on SME and then back to Corporate, the corporate dropdown menu is sitting on top and of the DIV and the height is not being reset. I'm quite bad when it comes to explaining stuff, so take a look at the site here: Site URL
Here is the jQuery
// SLIDE OUT MENU
$(".menu-blue-bar button").on("click", function(e) {
$(".menu-blue-bar").toggleClass("menu-slide");
$(".menu-blue-bar button").toggleClass("is-active");
$(".menu-blue-bar .fade-in-menu .row").toggleClass("in-view");
e.preventDefault();
});
jQuery(
"<li class='back-button'><i class='icon icon-carousel-left-arrow'></i></li>"
).insertBefore(
".menu-blue-bar .main-menu-links .dropdown-menu li:first-child"
);
jQuery("li.back-button").on("click", function() {
jQuery(".menu-blue-bar ul.dropdown-menu").removeClass("show");
jQuery("ul.navbar-nav").css("height", "");
console.log("clicked back arrow");
});
jQuery(".menu-blue-bar .navbar-nav > li.dropdown").on("click", function() {
if (!$(".menu-blue-bar ul.dropdown-menu").hasClass("show")) {
$(".main-menu-links ul.navbar-nav").css({
height:
$(this)
.find("ul.dropdown-menu")
.height() + "px"
});
}
});
Screenshot: screenshot link
You're not providing a value when you "reset" the height
jQuery("ul.navbar-nav").css("height", "");
Isn't a valid unit size in CSS.
Instead, try either setting the height to 0 or initial
jQuery("ul.navbar-nav").css("height", "initial");
Also the word height should be a string (add quote marks).
This
$(".main-menu-links ul.navbar-nav").css({
height:
$(this)
.find("ul.dropdown-menu")
.height() + "px"
});
Should be
$(".main-menu-links ul.navbar-nav").css({
"height":
$(this)
.find("ul.dropdown-menu")
.height() + "px"
});
There might be more but start with that.
I'm attempting to animate my subnav using JavaScript. I want to reveal all subnavs, similar to a 'mega menu' type nav. Right now, it fades in, but from the subnav that's furthest right, causing a gradation effect. I want them all to start at the same time.
How can I make them all animate at the same time?
See Codepen for HTML and CSS
Here's the JS block:
nav.forEach(elem => {
elem.addEventListener('mouseenter', () => {
const subnav = document.querySelectorAll('.subnav-block');
subnav.forEach(sub => {
sub.classList.add('display-block');
setTimeout(() => {
sub.style.opacity = 1;
}, 100);
});
});
elem.addEventListener('mouseleave', () => {
const subnav = document.querySelectorAll('.subnav-block');
subnav.forEach(sub => {
sub.classList.remove('display-block');
sub.style.opacity = 0;
});
});
});
There's no problem with your JavaScript. All the subnavs are all animating at the same time: the issue is that they're overlapping. With your CSS as it is right now, your the first subnav is behind the other two, and the second is behind the third, like this:
[ subnav 1 [subnav 2 [subnav 3]]]
You can verify by using your browser's inspect element option.
When the second and third subnavs become transparent, you can see the first subnav behind them, so they appear darker. You need to change your CSS so that they're not overlapping.
Try changing your hover selector as
.nav > li > a:hover {
color: yellow;
}
What this will do is to only apply hover effect on anchor tags which are direct children of li, which are direct children of element having nav class.
I have an overlay menu (Wordpress betheme)
After I click on a menu item it doesn't close automatically.
Can anybody help to close the menu after the click?
/* ---------------------------------------------------------------------------
* Menu | Overlay
* --------------------------------------------------------------------------- */
$('.overlay-menu-toggle').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Overlay').stop(true, true).fadeToggle(500);
var menuH = $('#Overlay nav').height() / 2;
$('#Overlay nav').css('margin-top', '-' + menuH + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Overlay">
<nav id="overlay-menu">
<ul id="menu-felso-menu" class="menu overlay-menu">
<li id="menu-item-112" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-112">Miért mi?</li>
</ul>
</nav>
</div><a class="overlay-menu-toggle" href="#"><i class="open icon-menu-fine"></i>TOGGLE</a>
this worked for me with the Side Slide menu. Just put the code in the JS window in the "Theme Options" and adapt the menu IDs to your code. Betheme does nothing else than slide in and out the mobile menu (e.g. right: -250px;), slide the whole body to the left (e.g. left: -125px;) and display a dark "body_overlay" when the menu is active. I have links with #anker and links for normal subpages so I addressed each #anker separately (#menu-item-155).
The class .icon-menu-fine is from the burger menu to get things working again after closing the menu through JS.
jQuery( document ).ready( function( $ ) {
$('#menu-item-155 a').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Side_slide').stop(true, true).fadeToggle(500);
$('#Side_slide').css('right', '-250px');
$('body').css('left', '0px');
$('#body_overlay').css('display', 'none');
});
$('.icon-menu-fine').click(function(e) {
e.preventDefault();
$('#Side_slide').css('right', '0px');
$('body').css('left', '-125px');
$('#body_overlay').css('display', 'block');
$('#Side_slide').css('display', 'block');
});
});
I've just copied part of BeTheme code, that closes menu with a little modifications.
Just put this code in the JS window in the "Theme Options" > "Custom CSS & JS":
jQuery(document).ready(function($) {
/* Close Side Menu on item click */
$('#Side_slide .menu-item a').click(function(e) {
e.preventDefault()
/* globals jQuery, mfn */
var mobileInitW = (mfn.mobileInit) ? mfn.mobileInit : 1240
var slide = $('#Side_slide')
var overlay = $('#body_overlay')
var ssMobileInitW = mobileInitW
var pos = slide.hasClass('left') ? 'left' : 'right'
var shiftSlide = -slide.data('width')
var shiftBody = shiftSlide / 2
var duration = 300
if (pos === 'left') {
slide.animate({ 'left': shiftSlide }, duration)
$('body').animate({ 'right': 0 }, duration)
} else {
slide.animate({ 'right': shiftSlide }, duration)
$('body').animate({ 'left': 0 }, duration)
}
overlay.fadeOut(300)
// if page contains revolution slider, trigger resize
if ($('.rev_slider').length) {
setTimeout(function() {
$(window).trigger('resize')
}, 300)
}
})
})
This is what worked for me. It seems the action button that is used will go to the set anchor on the page but wouldn't close the slide menu. Really weird behavior. Not sure ever why you would like that effect, especially when a dark overlay is placed over the page.
It seemed for in my case I needed to remove all the dollar signs. Manuel had the solution just had to change things because of the $'s
Of course, you will see I had to adjust the initial tag that I wanted to be detected for the closing of the slider.
jQuery(document).ready(function()
{
jQuery('a.action_button.scroll').click(function(e) /* Change this line with the ones below for different menu behaviours*/
{
e.preventDefault();
jQuery(this).toggleClass('focus');
jQuery('#Side_slide').stop(true, true).fadeToggle(500);
jQuery('#Side_slide').css('right', '-250px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'none');
});
jQuery('.icon-menu-fine').click(function(e)
{
e.preventDefault();
jQuery('#Side_slide').css('right', '0px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'block');
jQuery('#Side_slide').css('display', 'block');
});
});
Really sweet stuff. It was super sweet seeing the menu close finally on click.
Of course, I have since adjusted it so that if any menu element is clicked/touched on then the slide menu will disappear with the below adjustment to the above code.
jQuery('ul#menu-main-menu-1').click(function(e)
I found the most pleasing behavior was to use this one though as it will trap any click on the menu and close it.
jQuery('div#Side_slide').click(function(e)
btw: this code is inserted into the "Theme Options --> Custom CSS & JS --> JS
I am working on a slide menu,
Please have a look at the demo site:
kotechweb.com/new_focus/
At left side there is a main menu , when toggle , the words right now is squeeze and hide, here is how I implement:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("width", "75%");
} else {
$(".nav_bar ul").css("width", "0");
}
is_closed = !is_closed;
});
CSS:
transition: all 1s;
So the logic is using transition to implement the slide animation, however, this approach the text is squeeze when the width is smaller.
How to make the text slide left as well?
You can create a "mask" using
#menu_right{
overflow:hidden;
...
}
and move your menu in this way:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("margin-left", "-100%");
} else {
$(".nav_bar ul").css("margin-left", "-0%");
}
is_closed = !is_closed;
});
I think this works like espected
First of all, instead of using CSS transitions use animate in JQuery as it allows for more functionality.
What I actually do for my slide menus is adding overflow-x: hidden to my body tag. I then position the menu outside of the page, so I give it the CSS value of right: 0 to position it just outside the left hand side of the page.
What this allows me to do is that when the user clicks the menu button you can animate the menu to slide out by simply changing the right value, so your final code would look something like this
$("#menu_btn").on("click", function () {
if (is_closed) {
$("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000);
} else {
$("#slideoutMenu").animate({right:"0"}, 1000);
}
is_closed = !is_closed;
});
Use just jquery and jquery ui : Here
At the top reference the bellowed code.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
And at script only add this :
$(".nav_bar ul").toggle( "slide");
Or also can use with customized time delay ms unit.
$( ".nav_bar ul" ).toggle( "slide",2000 );
Maybe you should .hide() the text when the sidebar collapses. Hope this helps.
I need to remove a certain css class from .nav, so that it comes up properly. Right now its behaviour is unexpected based on different screen sizes.
Fiddle example
Demo View
You will notice that the drop-down sub-menus don't show up properly. I want the dropdown to show on right side of dropdown, when it has enough space on the right, and on the left side of dropdown, when it has less space based on the <div class="main-wrapper"> width, which is 1000px wide.
I tried to fix it with following code but it is not working properly:
$(document).ready(function(){
$(".nav").on("mouseenter", " > li", function(){
/*if dropdown is likely to go out of parent nav then right align it :) */
if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) {
$(this).find(".dropdown").addClass("dropdown-last");
}
if($(this).hasClass("has-panel")){
// $(this).find(".dropdown").removeClass("dropdown-last");
//alert('has class');
}
else
{
//alert('has no class');
}
});
/* if dropdnw*/
$(".dropdown").each(function(){
var $this = $(this);
if($this.find(".dd-panel").length > 0){
$this.addClass('has-panel');
}
if($this.find(".dd-panel").length = 1){
$(".dropdown").css( "min-height", "80px" );
}
});
});
On debug, it shows the following as a div class dropdown has-panel dropdown-last if it div with has class has-panel and one which doesnt have mega menu for it show class as dropdown dropdown-last. I was trying to check using jQuery, to see if the element has the class or not. If it has the class has-panel, then do nothing and if it doesn't have the class has-panel, then I need to remove the class dropdown-last from the same element which is not working with following code:
if($(this).hasClass("has-panel")){
// $(this).find(".dropdown").removeClass("dropdown-last");
alert('has class');
}
else
{
//alert('has no class');
}
remove $(window).load(function(){} and it will work
Solved using code
if( $(this).find(".dropdown").hasClass("has-panel")){
// $(this).find(".dropdown").removeClass("dropdown-last");
//alert('has class');
}
else
{
//alert('has no class');
$(this).find(".dropdown").removeClass("dropdown-last");
}