I have a navigation bar that changes into a button with a slidetoggle function after a certain breakpoint and I've got this bit of jquery that handles it. In that mobile layout, it also makes the toggled navigation slide back up after an item was clicked.
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
if (document.documentElement.clientWidth < 860) {
$(".navitem").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
} });
The problem is, that my .nav hides after being clicked all the way up to width of 876. I suspect that this is due to the scrollbar, but I have no clue how to fix it. The site has a single-page layout so it's kind of important that the navbar stays there.
Any ideas?
Try this: http://jsfiddle.net/0bbjn46g/ although it doesn't replicate the problem. What happens in chrome (and all webkit browsers I assume) is that .nav disappears after clicking on one of the items while width is 861-876.
I'm just going to take a stab at your problem throw my dart blindly but:
Your issue (from what I understand) is that your nav items disappear at a certain point. I'm assuming that they disappear when you shrink your window down to the mobile button menu and you click on it to hide the menu then resize the window, the navigation items are gone.
An easy solution to that is to force your nav menu to be display: block !important; when the browser size is bigger than the mobile: http://jsfiddle.net/0bbjn46g/6/
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon"><a><img id="navicon" src="img/navicon.svg"></a></div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
if (document.documentElement.clientWidth < 860) {
$(".navitem").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
}
});
#media screen and (min-width: 861px) {
#menu-icon {
display: none;
}
.nav {
display: inline;
}
.nav {
display: block !important; /** note: when window is bigger than 861, force nav to show **/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="menu-icon"><a>menu</a></div>
<div class="nav" id="home">
<ul>
<li><a class="navitem" href="#">item 1</a></li>
<li><a class="navitem" href="#">item 2</a></li>
<li><a class="navitem" href="#">item 3</a></li>
<li><a class="navitem" href="#">item 4</a></li>
</ul>
</div>
</body>
Related
When I load my page when it is over 860px wide the script works the way I want it to. It does not have the .open class on the child ul tag of li.parent class. It also adds that class when I make the page smaller.
However, I noticed when I go from the page being smaller to larger, the .open class still hangs around. And if I click on the li.parent, it throws off the script and it no longer works when the page is smaller.
Here is my script.
$(window).resize(function (){
if ( $(window).width() < 860 ) {
$(document).ready(function(){
$('li.parent').click(function(){
$(this).find('ul').toggleClass('open');
});
});
}
else {
$('ul#primary-nav').removeAttr('style');
$('li.parent').find('ul').removeClass('open');
}
});
Other scripts in the same document. Maybe they are causing a conflict?
// Mobile Menu Slide Toggle
jQuery(document).ready(function() {
jQuery('.show_nav').click(function(e) {
e.preventDefault();
jQuery('#primary-nav').slideToggle();
});
});
// For Menu Caret
jQuery(document).ready(function() {
jQuery('ul#primary-nav li').has('ul').addClass('parent');
});
Some of the CSS
ul#primary-nav li.parent ul {display: none;}
ul#primary-nav li.parent ul.open {display: block;}
Some of the HTML
<img src="images/hamburger-lines-white.svg" alt="Menu" width="25" height="25">
<ul id="primary-nav">
<li>About
<ul>
<li>History</li>
<li>Facilities</li>
</ul>
</li>
<li>Tennis</li>
<li>Classes</li>
<li>Calendar</li>
<li>Newsletter</li>
<li>Home Owners
<ul>
<li>Board of Directors</li>
<li>Architectural Committee</li>
<li>Documents and Forms</li>
</ul>
</li>
<li>Contact</li>
</ul>
Been trying to figure this out for a while and looked all over this site. Could really use some help.
Forget the jQuery and use a media query.
ul#primary-nav li.parent ul {display: none;}
#media only screen and (min-width: 860px) {
ul#primary-nav li.parent ul {display: block;}
}
I'm trying to change the sub-menu behavior of a site. The original sub-menu appears as a drop-down, and instead I'd like it to appear in a separate full horizontal div.
So far I've done this:
jQuery(document).ready(function( $ ){
$(".header").append("<div class='subber'><div class='sub-menu'></div></div>");
$(".main-navigation ul li.menu-item-has-children").mouseover( function() {
var a = $(this).find(".sub-menu").html();
$(".subber .sub-menu").html(a);
});
});
... with some css, and it works well. the original sub-menu HTML is copied to the subber sub-menu.
I'd like each subber sub-menu to be positioned relatively to the original menu item, even though they occur in separate areas of the HTML. Can I somehow bind the two?
My HTML code:
<div class="header">
<div id="navigation">
<div class="site-navigation">
<nav class="main-navigation">
<ul class="menu-main-menu">
<li class="menu-item">
some text
</li>
<li class="menu-item menu-item-has-children">
some text
<ul class="sub-menu">
<li class="menu=item">
sub item text
</li>
</ul>
</li>
<li class="menu-item">
some text
</li>
</ul>
</nav>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
</div>
Since there's no actual parent-child relationship in the HTML structure, there's no CSS-way of positioning your new sub-menu relative to a top-level menu item.
Instead, you'll have to manually position the new sub-menu with JS, using the coordinates of the original menu item.
Keep in mind this basic positioning won't create a "stickyness" between the two, so if your main menu moves (e.g. a sliding menu bar with up/down toggle states), you'll have to trigger an update to the sub-menu positioning using a listener and function.
Codepen
$("#menuItem1").mouseover( function() {
/* get original menu */
var origMenu = $(this);
/* grab content out of original sub-menu */
var myContent = origMenu.find(".sub-menu").html();
/* copy content over to new sub-menu outside of navigation */
$(".subber .sub-menu").html(myContent);
/* get the coordinates of the original menu item */
var subberLeftOffset = origMenu.offset().left;
var subberTopOffset = origMenu.offset().top + origMenu.innerHeight(true);
/* re-position the new sub-menu so it appears below the original menu */
$(".subber").offset({top: subberTopOffset, left: subberLeftOffset});;
});
#origNavigation .sub-menu {
visibility: hidden;
height: 0px;
}
#menuItem1 {
margin-top: 8em;
margin-left: 8em;
padding: 1em;
width: 200px;
border: 1px solid black;
}
<div id="origNavigation">
<div id="menuItem1">
Hello
<div class="sub-menu">Sub-menu</div>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
I have an issue and really don't know how to solve this.. I have an sticky footer like this:
<!-- FOOTER ICON TABS -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="footer" data-role="navbar">
<ul>
<li>
<a href="#dashboard" data-icon="dashboard" class="ui-btn-active" id="icon-dashboard">
<span class="navbar-text">Dashboard</span>
</a>
</li>
<li>
<a href="#" data-icon="progress" id="icon-progress">
<span class="navbar-text">Voortgang</span>
</a>
</li>
<li>
<a href="#map" data-icon="security" id="icon-security">
<span class="navbar-text">Plattegrond</span>
</a>
</li>
<li>
<a href="#" data-icon="security" id="icon-security">
<span class="navbar-text">Securitycheck</span>
</a>
</li>
</ul>
</div>
</div>
Thereby I set this styling:
.ui-footer, .footer, .footer li, .footer a, .footer a:after {
background-color: transparent !important;
border-color: transparent !important;
height: 70px;
}
But It is annoying because my content is behind the icons and it is not nice. It looks like this:
I allready have changed the heights of the white blocks, but the blocks are not having a hard height. This ecause the notification block is dynamic and the content vary from length. Thereby the second block has an collapsable block where Boardingpass is writen.
How it has to look:
Here is a FIDDLE which recreates the problem. I hope someone could help me out on this :)
You could just set the bottom margin:
#flight-info-block {
margin-bottom: 80px !important;
}
also in code, use the third parametef of the slideToggle function to achieve the same effect at the end of the animation:
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle("slow", "swing", function() {
$("#flight-info-block").css("margin-bottom", "80px");
$("#flight-info-block").trigger("updatelayout");
});
BTW: i also dislike the transparent background, then i added following rule at the bottom of your CSS:
.footer {
background-color: #00a0e5 !important;
}
and removed also your -350 offset in scrollTop:
$('html, body').animate({
scrollTop: $header.offset().top
}, 1000);
Your updated Fiddle: http://jsfiddle.net/yTt9b/1787/
I would like to create a menu like the screenshot
the red arrow means when I click on the button it will either show /
hide the menu
the orange arrow means when menu is hide the box should increase the
width, and vice versa
So far I have created the html, the problem is
1) the sliding effect seems not exactly what I expected, it slide after the content is show , but what I would like to achieve is hide and slide at same time
$("#menu_btn").on("click", function () {
var menu = $("#left_menu #btn");
if (menu.css('display') !== "none") {
$("#left_menu #btn").hide("slide", {direction: "left"}, 1000);
} else {
$("#left_menu #btn").show("slide", {direction: "right"}, 1000);
}
});
2) how to combine the code to extend / decrease width after the slide effect, and the box is absolute in the container , can I keep the same top after the content expend / reduce?
$(".content #bg").css("width","600");
$(".content #bg").css("width","1000");
Thanks for helping.
Something like this may work:
https://jsfiddle.net/7k4kdmxu/4/
CSS:
.container{width:100%; margin:0 auto;}
nav{
width:20%;
float:left;
background:#efefef;
}
.openNav{ width:20%;}
#content.openNavContainer{ width:80%!important;}
.closeNav{width:10%;}
#content.closeNavContainer{ width:90%!important;}
#content{
width:80%;
float:right;
background:#e9e9e9;
}
nav ul {list-style:none;}
nav ul li{list-style:none; display:block;}
HTML
<div class="container">
<nav>
Open ->
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>OUT VALUE</li>
<li>SEASONAL</li>
<li>CONTACT</li>
</ul>
<- Close
</nav>
<div id="content"><p>Body Content Can Go Here</p></div>
</div>
JS/JQ
$(function(){
$("#open").click(function(){
$("nav").addClass("openNav");
$("nav").removeClass("closeNav");
$("#content").addClass("openNavContainer");
$("#content").removeClass("closeNavContainer");
});
$("#close").click(function(){
$("nav").addClass("closeNav");
$("nav").removeClass("openNav");
$("#content").addClass("closeNavContainer");
$("#content").removeClass("openNavContainer");
});
});
I want to activate the menu item when I get to it's corresponding section. I got inspired by this previous SO question: Change Active Menu Item on Page Scroll? .
but the difference is that in my menu I have a little image over each menu item, that shows only if I hover the menu item, and hides when don't.
HTML
<nav>
<ul id="pics">
<li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li>
<li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li>
<li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li>
<li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li>
</ul>
</nav>
CSS
.vishid{
visibility: hidden;
}
.visvis{
visibility:visible;
}
JAVASCRIPT (to show and hide images when hovering items)
$(document).ready(function(){
$("#text-what").hover(function(){
$("#pic-what").addClass('visvis');
},function(){
$("#pic-what").removeClass('visvis');
});
$("#text-training").hover(function(){
$("#pic-training").addClass('visvis');
},function(){
$("#pic-training").removeClass('visvis');
});
$("#text-testi").hover(function(){
$("#pic-testi").addClass('visvis');
},function(){
$("#pic-testi").removeClass('visvis');
});
$("#text-contact").hover(function(){
$("#pic-contact").addClass('visvis');
},function(){
$("#pic-contact").removeClass('visvis');
});
});
I want to show the image when I am at it's corresponding section. How can I do that with javascript?
There is a lot going on here. Your HTML should technically be corrected. href's should not encapsulte LI's. Instead your href should be set to block - width and height 100% - within the LI. Let's also move the class of .vishid to the parent LI. That way if you want it to effect anything else - besides just the images - in the future, it would be easy to add. So that would look like:
<nav>
<ul id="pics">
<li id="text-what" class="vishid"><img src="images/what.png" id="pic-what"><p>item1</p></li>
<li id="text-training" class="vishid"><img src="images/training.png" id="pic-training"><p>item2</p></li>
<li id="text-testi" class="vishid"><img src="images/trait.png" id="pic-testi"><p>item3</p></li>
<li id="text-contact" class="vishid"><img src="images/contact.gif" id="pic-contact"><p>item4</p></li><
</ul>
</nav>
Then you need to adjust your CSS to correct for the "non-block" level href.
#pics li a {
display: block;
width: 100%;
height: 100%;
}
.vishid img {
visibility: hidden;
}
.visvis img {
visibility: visible;
}
Finally, I am going to assume that you are using "articles" in your HTML for the sections. Doesn't have to be, but that is what my example will assume.
var clickScroll = false,
triggerHighlight = 80; // distance from the top to trigger action
$(window).scroll(function () {
var y = $(this).scrollTop(),
yCatch = y + triggerHighlight;
// Let's wrap in a variable check. Set this to tru is clicking on navigation
// false if simply scrolling
if (!clickScroll) {
$('article').each(function (i) {
var whichArticle = $(this).attr('id');
if ($(this).position().top < yCatch) {
var currentArticle = "#" + whichArticle;
adjustSubNav(currentArticle);
}
});
}
});
function adjustSubNav(l) {
$('#pics a').each(function (i) {
if ($(this).attr('href') == l) { // Add active class to the corresponding menu item
$(this).parent('li').removeClass('vishid').addClass('visvis');
} else {
$(this).parent('li').removeClass('visvis').addClass('vishid');
}
});
}