I'm learning jQuery and need advice/help on the creation of a drop down menu. So far I have it set up where I scroll down and the links disappear and a link called "menu" appears.
I would like to know how to have the links slide down when I click on the menu.. I'm not too sure how to go about doing this.
Here's what I have so far
html
<div class="container">
<header>
<nav>
<a href="#">
<span class="menu">Menu</span>
</a>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</header>
<div class="blueDiv">
</div>
<div class="redDiv">
</div>
<div class="greenDiv">
</div>
</div>
Javascript
$(window).scroll(function(){
var topScroll = $(this).scrollTop();
if (topScroll >= 3) {
$(".menu").show();
$("ul").hide();
} else{
$("span").hide();
$("ul").show();
}
})
$("a").click(function(){
$("nav.ul").slideToggle();
})
I don't mind list of easy to use plug-ins as well.
You're on the right track, here's a JS Fiddle that expands on the example you provided from CodePen.
All you needed to add was:
$(document).scroll(function(){
$('.navigation').hide();
})
So now your script hides the menu when the page loads:
$(document).ready(function(){
$('.navigation').hide();
Then toggles it on or off when the user clicks it.
$('.box').click(function(){
$('.navigation').toggle();
});
});
Lastly, it hides the menu when the user scrolls.
$(document).scroll(function(){
$('.navigation').hide();
})
If you want to snaz it up a bit, you could use slideToggle instead of toggle to hide and reveal the menu :)
Related
(First I'd like to apologize if my English is bad sometimes, I'm French, so it's kinda difficult to explain everything in details )
I'm working on a personal website, but i got a problem with my responsive navigation.
I made a media query for screen size under 1024px.
When I'm above 1024px, I have my regular navigation bar made with a list.
When I'm under 1024px, I got the small menu logo that appears, and a click event on it makes the whole menu appear and disappear.
But the problem is that if my menu is closed and I expand my window above 1024 pixels, the list isn't visible, and I don't know how to deal with that problem.
Here is my code :
<nav class="fixed_nav">
<div id="nav_left">
<img id="logo_nav" src="img/mini_trombi.png" alt="logo"/>
<p id="txt_nav">123</p>
</div>
<ul class="topnav">
<div id="show_n_hide_nav" class="responsive_link_bg">
<li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li>
<hr class="responsive_separator">
<li><a class="nav_links" href="#">ITEM 2</a></li>
<hr class="responsive_separator">
<li><a class="nav_links" href="#">ITEM 3</a></li>
</div>
<li class="icon">
<a div id="button_nav" class="menu_icon" href="javascript:void(0);">☰</a>
</li>
</ul>
</nav>
Jquery for the click:
$(function(){
$("#button_nav").click(function () {
if(!$("#show_n_hide_nav").is(":visible")){
$("#show_n_hide_nav").slideDown("slow");
} else {
$("#show_n_hide_nav").slideUp("slow");
}
});
});
In my css, I hide the original list under 1024 pixels, and show it with the help of jquery when the users clicks on the menu logo.
Again, sorry if it's hard to understand.
After you solve the invalid HTML, you can try this:
The problem is the slideUp/Down function from Jquery sets inline the display property to the element itself, then when you slideUp and resize the browser the element is still hidden with inline style:
<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;">
You can solve it adding this mediaquerie to force the element be block over 1024:
#media (min-width:1025px) {
#show_n_hide_nav {
display: block !important;
}
}
Check this example Fiddle
You better toggle class and add css transitions to do slide effect and if you're above 1024, just ignore the show class.
$("#button_nav").click(function () {
$("#show_n_hide_nav").toggleClass("show");
});
If you still want to use slideDown()/slideUp(), you have to bind $(window).resize() event and check whether the window is above/under 1024px.
$(function(){
$("#button_nav").click(function () {
if(!$("#show_n_hide_nav").is(":visible")){
$("#show_n_hide_nav").slideDown("slow");
} else {
$("#show_n_hide_nav").slideUp("slow");
}
});
});
$(window).resize(function(){
if($(window).width() > 1024){
$("#show_n_hide_nav").show();
}
});
On window resize you have to check window size and show nav.
So I'm trying to make my navigation bar toggle using JQuery however when I click on the span button, nothing is happening.
HTML
<div id="navbar">
<span class="navbar-btn"></span>
<ul>
<li class="currentpage">Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
JQuery
<script>
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
</script>
Live Version can be found at http://joshscottonthe.net/Unit20/Photographer - Just rescale your browser less than 960 pixels and you should see the button
You need to include your script after the document is loaded.
$(function() {
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
})
Or you can include it in the same way you did, just make sure that the <script> tag is placed after that <span class='navbar-button'>.
I think this should solve the problem:
$(document).ready(function(){
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
});
I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});
I want my dropdown menu header to both open the related menu and show directly the content of the first element of the submenu which is actually an anchor link in the page.
Here is the HTML code of the Dropdown Menu:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
Menu
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</div>
This is the HTML code of the anchored link:
<div id="myNavbar" class="tab-content">
<div class="tab-pane fade" id="submenu1">
<p>submenu1</p>
</div>
</div>
And this is the JS code I'm trying to use with no success. It works if I write a whole URL like "www.google.com" but not with "#submenu1".
$(document).ready(function() {
$('.dropdown').on('click', function () {
window.location="#submenu1";
});
});
you can try with
location.hash=anchorname
location.hash = "Submenu15";
var x = "The anchor " + location.hash;
document.getElementById("demo").innerHTML = x;
fiddle link http://jsfiddle.net/420rL0h2/
Try using the window.location.hash instead?
window.location.hash=anchorname;
Edit
You're using Twitter bootstrap right? The tabs won't be visible until the active class is added, and since you have a fade class too, I think you'll also need the 'in' class... Try this JS:
$('.dropdown').on('click', function () {
// Remove any active classes from the tabs
$('.tab-pane').removeClass('active in');
// Set the specific #submenu1 to be active
$('#submenu1').addClass('active in');
// Scroll the window down to the tabs that are now visible
window.location.href="#submenu1";
});
I'm not entirely sure what you're trying to achieve though, the links in the dropdown should do the displaying for you... but if you're just trying to force a specific tab to be open when you first click the nav dropdown, then this should do the trick.
I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.
The transition should work in IE10+, anything below it's fine if it doesnt have a transition
http://jsfiddle.net/AV22p/
Below is the structure of my HTML
<section id="modalwindow">
<div id="foodlist">
<div class="links">
<h1>Div 1</h1>
<ul>
<li>Example1 </li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
</ul>
</div>
</div>
</section>
<section id="modalwindow">
<div id="food_details">
<div class="details">
<h1>Recipe</h1>
<ul>
<li>test </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</section>
Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.
divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.
$('.links ul li a').click(function(){
var divWidth = '-'+$('#modalwindow').width();
$('#food_details').parent().animate({left: divWidth});
});
http://jsfiddle.net/AV22p/3/
Also note that your first example link has a different/invalid markup than the rest.