To start I'm absolutely no hero with javascript.
I implemented a responsive topnav example from W3Schools on a website I'm building right now, but would love to know how to hide it after clicking on one of the menu items (as most will link to items on the same page, so no refresh there).
P.S. I've looked through a lot of other questions, but I just think this particular question probably has a very simple solution which would also be really usefull to be added on W3Schools.
This will close your nav after clicking a link.
var topNav = document.querySelector('#myTopnav');
topNav.addEventListener('click', function(e) {
if (e.target.tagName === 'A') {
topNav.classList.remove('responsive');
}
});
The other issue where only one menu item fills the entire list height is a CSS problem. You need to remove height: 100% when viewing the navigation in small screen dimenstions.
.navbar a {
height: 100%;
}
After I commented that line out, things look fine.
Related
hoping you could help. So, Im using xtheme, and wordpress. And I have code to make my mobile menu a fixed top menu, so its always visible. I also have JavaScript to make it retract upon clicking a menu item so the menu doesn't cover the screen.
css to make it fixed:
#media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed!important;
}
}
Javascript:
jQuery(document).ready(function($){
$('.x-navbar .mobile .x-nav >').on('click touchend', function(e) {
document.getElementsByClassName("x-btn-navbar")[0].click()
});
});
This works to a point, however, if you go to this page: https://foresthillcentre.com/mental-health-services/
And try the menu on all of the submenu items (setup to scroll to section on same page) The menu retracts before you can click on anything, and you have to re-click the hamburger to bring up the submenus. You will see what I mean on use...
Any suggestions to fix this?
Thank you.
thanks for looking into my issue
I am creating a website: http://testgod0312.000webhostapp.com/ , all the css are separate by blocks so that it is easier for you to potentially help me (in assets folder).
when you go to map and click on a button, a pop up shows up, but you can keep on scrolling. The button is only coded in css (no js), everything in the map.css file - any idea how to disable overflow without resorting to js? if using js, what would you do as there is no function capturing the opening / closing of the box?
I have a menu (click top right corner), works fine on laptop but on mobile, it shows only 50% of it. The code is in nav.css; with the responsive at the bottom. Any idea on how to display it all?
thanks in advance!!
fafa
#1 can't be solved without javascript as long as browsers are not supporting css:has(). So the only way is to apply a class or a style="overflow: none;" to the body as soon as a popup gets opened and remove it after it was closed. The very same happens already if the menu is opened/closed.
A very small code snippet would be enough:
window.addEventListener("hashchange",
() => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);
and CSS
body.popup-open {
overflow: none;
}
About #2 inside the nav.css the values applied before the media query (#media all and (max-width: 767px) {) cause the issue.
The menu__right changes from flex to none on small screens. And menu__left still has the right 50% value applied for bigger screens, So adjusting this value inside the media query to 0% solves it.
.menu__left {
right: 0%;
width: 100%;
}
I have looked all over online trying to solve this problem. I am in the process of making a desktop website responsive for mobile and have run into issues with the Navigation menu. I have set it to display:none for the mobile version but I want to make it so it can be seen by clicking on either an image or text. The solution that I have found elsewhere have all only worked with a div menu that only has UL and LI elements in it. Mine has H2 tags for each "section", etc. I just would rather have a button click and bam the whole DIV shows up just on a mobile query without messing with any of my HTML code, etc.
I have found this jquery code that seems close, however it seems to hide the nav div on desktop. I need it to work with display:none only set in the media query via CSS.
$("#preview").toggle(function() {
$("#navi").hide();
}, function() {
$("#navi").show();
});
});
It gets called by just clicking on the text such as "Click here for menu"...Would also prefer that to be a button or a link.
Try $.toggleClass() instead of using $.hide(). This way the media query css will have more control. The following is an example that a button that hides a div only in screen smaller than 700px.
JS:
$("#preview").toggleClass('hideInMobile');
Css:
#media (max-width: 700px){
.hideInMobile
{
display:none
}
}
demo:http://jsfiddle.net/HZDCW/2/
Hope it helps.
Here's my website:
violetoeuvre.com
What I'd like to do is have multiple veritcal and horizontal scrolls on the page. I think I should do this with Jquery.
Vertical:
Writing link at the top would scroll down when clicked so that the writing section on the side bar is at the top of the page.
Contact link at the top – same thing
(When I get the hang of this, I’m going to add up and down arrows on either side of the elements in the sidebar to scroll up and down to next / previous element. )
Horizontal:
In the writing section on the sidebar, I’d like the deadspin, gawker, and the awl links to scroll to content within the writing box when those buttons are clicked. I imagine this would have an overflow:hidden element somewhere? If vertical scrolling within this box would be easier, that’s ok too.
I found this excellent site which I think will be helpful:
http://demos.flesler.com/jquery/scrollTo/
relative position and relative selector look promising.
I'm guessing that I make each button a link that will be able to scroll to another part of the page.
So I would this class selector (the contact nav bar at the top), for example:
.nav_box_r {
display: block;
float:left;
width:219px;
text-align: left;
padding-right: 40px;
padding-top: 169px;
margin-top: 0;
}
as a link to scroll to the bottom of the page to the contact info, like
$(...).scrollTo( 0, 800, {queue:true} );
(Secondary question: Should I redo all the statis elements to have fixed positions?)
I'm new to this so would appreciate specificity. (Does the script go in the head, are the scrollUp / down to relative or fixed positions, etc.)
Thank you!
Hopefully this helps, you can use a href to jump to divs within your website.
Link
There is also this page that can help you as well.
How can I scroll to a specific location on the page using jquery?
Try this code
$(".yourclass").click(function() {
$(this).animate({ scrollTop: $('#title1').offset().top }, 1000);
});
Have a look at Balupton's ScrollTo plugin, it might be easier for you + there's a demo in there that shows you how to set it up.
Download zip at Github
Is there a way to make it so that when the navigation shrinks down all or any of the drop down menus are expanded? thus when the user touches the navigation and it drops down all the drop down navigation items are already fully expanded?
I assumed this was a default behaviour but this seems to not be the case for me.
Instead my navigation looks as such:
I had to hover over Menu item to get that secondary menu. Is there a way to have this and all other drop down menus already expanded?
It was only starting in version 2.2 that the behavior you want was replaced by the current behavior of having dropdowns be collapsed/collapsible in a collapsible navbar.
I threw together the following workaround, which seems to do the trick:
$('.nav-collapse').on('show', function (e) {
var $dropdowns = $(this).find('.dropdown');
setTimeout(function () {
$dropdowns.addClass('open')
});
});
The reason for the setTimeout is because otherwise the original click event which triggered opening the navbar will end up closing the dropdowns again when it propagates up to the <html> element.
The correct answer to fix this is to do the following: Which is seen here.
#media (max-width: 980px) {
.dropdown ul.dropdown-menu {
display: block;
}
}
This is for version 2.2.2