We Keep Coding

jQuery slideDown snap after page reload

I have already asked this question but didn't get any answers so I'll try once again.
I have built a navigation menu on WordPress using jQuery to have a slide down/up animation on the submenus. I am using flexbox on the submenus which is what seems to cause the problems. When I change it to block it works fine but the design is not what I am looking for.
The problem and how to recreate it: The first time you refresh the page (or run the code on jsfiddle) and hover over the menu, the submenu will slide down over the height it should stop at and snap back after that. After that all the other submenus work fine. It's just I would like to fix that snap back since it does not look that good.
Does anyone have an idea why this is happening and/or how to fix it?
Link for the jsfiddle where you can test the problem yourself: https://jsfiddle.net/u2zs38oL/
And the code for the jsfiddle below:
HTML:
<header>
<nav class="main-navigation" id="desktop-navigation">
<div class="container-fluid">
<div class="menu-menu-1-container">
<ul id="menu-menu-2" class="d-flex justify-content-center">
<li
class="has-mega-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-92">
Test
<ul class="sub-menu">
<li
class="mega-menu-column menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-93">
Test
<ul class="sub-menu">
<li
class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-94">
Test</li>
</ul>
</li>
<li
class="mega-menu-column menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
Test
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150">
Test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
CSS:
header .main-navigation {
display: block;
margin-left: 1rem!important;
margin-right: 1rem!important;
text-transform: uppercase;
}
header .main-navigation > div {
background: #000;
position: relative;
}
header .menu-menu-1-container {
height: 50px;
white-space: initial;
}
header #menu-menu-2 {
list-style: none;
margin: 0;
flex-direction: row;
}
header #menu-menu-2 > .menu-item {
padding: 0 20px;
height: 50px;
border-bottom: 3px solid;
border-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
header #menu-menu-2 .menu-item:hover {
border-color: red;
transition: 0.1s ease-in-out;
}
header #menu-menu-2 > li:hover > a {
color: red;
}
header .has-mega-menu > .sub-menu {
position: absolute;
background: #fff;
top: 50px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
header #menu-menu-2 li, header #menu-menu-2 ul {
list-style: none;
padding: 0;
}
header #menu-menu-2 li a {
text-decoration: none;
}
header #menu-menu-2 > li > a {
color: #fff;
}
header .has-mega-menu a {
color: #000;
}
header .mega-menu-column {
margin-left: 10px;
margin-top: 25px;
margin-bottom: 25px;
padding: 0 15px!important;
}
header .mega-menu-column > a {
position: relative;
font-weight: 600;
letter-spacing: 1px;
padding-bottom: 10px;
pointer-events: none;
}
header .mega-menu-column > a::before {
content: "";
position: absolute;
height: 1px;
width: 14px;
bottom: 0;
background-color: #000;
opacity: 0.2;
}
header .mega-menu-column ul {
margin-top: 20px;
}
header .mega-menu-column ul li {
padding: 5px 0!important;
}
header .mega-menu-column ul a {
color: grey;
font-weight: 400;
line-height: 25px;
transition: all 0.3s ease-in-out;
text-transform: capitalize;
display: block;
}
header .mega-menu-column ul li a:hover {
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-ms-transition: -ms-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-ms-transform: translateX(5px);
-o-transform: translateX(5px);
transform: translateX(5px);
color: #000;
border-bottom: 1px solid red;
}
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
jQuery:
jQuery(document).ready(function() {
jQuery('.main-navigation .has-mega-menu').hover(function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown({start: function() {
jQuery(this).css('display', 'flex');
}, duration: 250
});
jQuery(this).children('.sub-menu').css('z-index', '3')
}, function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
jQuery(this).children('.sub-menu').css('z-index', '2')
});
});

I found a way around this problem (at least for my case). So I found if on page reload, the submenu that is hidden and shown, has display flex instead of none then there seems to be no problems with the snapping. But obviously I do not want to start with the menu opened.
So what I did was set the submenu to flex and hid the menu with z-index until the jQuery has loaded and then hid (set display none) the submenu with jQuery. Then when hovering over the menu item toggled the slideDown and added higher z-index to that object.
Fiddle can be found here: https://jsfiddle.net/e319ydkm/
Changes I made to the original code:
header .has-mega-menu > .sub-menu {
display: none -> flex;
z-index: -1;
}
.hide-under {
background: #fff;
z-index: 1;
height: 1000px;
}
jQuery('.main-navigation .has-mega-menu > .sub-menu').hide();
This of course is not a perfect solution and I couldn't really figure out what is causing it other than that it is caused by flexbox (probably). I will not mark this reply as an answer since this isn't really the solution.

Submenu disconnect on mouseover and cant navigate to submenu as well

I am trying to create a submenu, but had to keep the submenu HTML out of the main menu, and on mouseover it will show hide, but its not working as expected, I think I am not trying with a good approach, can someone look in to this and suggest.
Here is the JSfiddle demo
Notes
1. Problem is, when you mouseover on "Shop" and try to enter submenu, its hiding.
2. I had to keep the submenu html out of the main navigation as submenu has to be in full width.
3. I am also looking to add some transition effects, I know using display none/block, transition will not work but can somebody please suggest?
$('.shop').mouseenter(function(){
$('.primary-subnav').show()
}).mouseleave(function(){
$('.primary-subnav').hide()
});
.nav{float:left; width:100%;}
.primarynav {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
text-align: right;
}
.primarynav > li {
list-style: none;
display: inline;
}
.primarynav > li > a {
display: inline-block;
text-decoration: none;
color: #333;
padding: 0 15px;
height: 67px;
line-height: 67px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
background-color: #c0e5da;
}
.primary-subnav {
position: absolute;
left: 0;
top: 64px;
width: 100%;
border-top: 2px solid #c0e5da;
background-color: rgba(255,0,0,0.9);
min-height: 350px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<ul class="primarynav">
<li>Shop </li>
<li>Nav Item </li>
<li>Nav Item </li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</div>
<div class="primary-subnav">
<div class="container"> Submenu Wrapper </div>
</div>

you can attach the same event handlers as you have attached to mouseover and mouseleave events of .shop to .primary-subnav.
$('.shop').mouseover(function(){
$('.primary-subnav').fadeIn(1000);
}).mouseleave(function(){
$('.primary-subnav').hide();
});
$('.primary-subnav').mouseover(function(){
$('.primary-subnav').show();
}).mouseleave(function(){
$('.primary-subnav').hide();
});
.nav{float:left; width:100%;}
.primarynav {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
text-align: right;
}
.primarynav > li {
list-style: none;
display: inline;
}
.primarynav > li > a {
display: inline-block;
text-decoration: none;
color: #333;
padding: 0 15px;
height: 67px;
line-height: 67px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
background-color: #c0e5da;
}
.primary-subnav {
position: absolute;
left: 0;
top: 64px;
width: 100%;
border-top: 2px solid #c0e5da;
background-color: rgba(255,0,0,0.9);
min-height: 350px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<ul class="primarynav">
<li>Shop </li>
<li>Nav Item </li>
<li>Nav Item </li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</div>
<div class="primary-subnav">
<div class="container"> Submenu Wrapper </div>
</div>

Wordpress change active class on bootstrap nav while hovering

I'm building a website using Wordpress. Most of the nav menu links, link to an id on the homepage. So when I load my site all the links that link to a place on the homepage are currently active. I removed the script in Wordpress that checks to see if its active. I figured I could use bootstrap scrollspy to get this done or even this JSFiddle https://jsfiddle.net/cse_tushar/Dxtyu/141/
The problem I'm having is since the navigation is being spit out by Wordpress I don't have the ability to go in and actually hard code "active" to the first li element and then do a add class and remove class. How would I alter the above JSFiddle so it does a hash target. So whenever I scroll and hit a div with the same ID as a nav item it triggers the active class and stays active until I hit another one or change pages. Here is what my nav looks like on wordpress.
<nav class="collapse navbar-collapse" role="navigation">
<ul id="menu-primary-navigation" class="nav navbar-nav">
<li class="current-menu-item current_page_item menu-about">About</li>
<li class="current-menu-item current_page_item menu-team">Team</li>
<li class="current-menu-item current_page_item menu-services">Services</li>
<li class="menu-services">Blog</li>
<li class="current-menu-item current_page_item menu-contact-us">Contact Us</li>
</ul>
</nav>
<div id="about">
Something Here
</div>
<div id="team">
Something Here
</div>

You can accomplish that by adding the following line at the beginning of page load:
$("ul li a:first").addClass('active');
$(document).ready(function () {
$(document).on("scroll", onScroll);
$("ul li a:first").addClass('active');
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

Additional Navigation bar on click

I have a navigation bar with the section "Contracts" and I was wondering if it were possible, and how would I go about adding an additional navigation bar to expand underneath when this button is tagged, (For example, on the Apple Store site, when you click a product, this adds another bar)
I can provide my entire CSS style sheet if needed! I think this will require JavaScript but I'm trying to keep it as pure CSS for now!
All help is greatly appreciated!
HTML Code: This is the Navigation HTML
<header>
<div class="title">
<img src="img/logo2.png"/>
</div>
<div class="navbar">
<ul>
<li style="float: left">Home</li>
<li>Contracts</li>
<li>About Us</li>
<li>Other</li>
<li> Release Notes</li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
</div>
</header>
Creates this
CSS Code: My entire stylesheet
body {
background-color: #fff;
margin: 0;
font-family: Arial;
color: #333;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {
display: block;
text-align: center;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
left: 0;
right: 0;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
.title {
height: 80px;
padding: 2px;
background-color: #fff;
}
.container {
margin-top: 150px;
padding-top: 50px;
}
.home {
margin-top: 10px;
text-align: center;
padding: 40px !important;
}
.wrap {
width: 100%;
margin: 0 auto;
}
.left_col {
float: left;
width: 50%;
}
.right_col {
float: right;
width: 50%;
}
.right_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
.left_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
This is the JavaScript I tried to use to hide and show the div on click
<script>
$(index.php).ready(function(){
``$("#contract").click(function(){
$("<div class="contracts">").toggle();
});
});
</script>

guess you want smth like this : jsfiddle
first add jQuery to your local environment
use this <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add it in the head section of your html. for more info check how to install jQuery
added html inside the .navbar
<ul class="aditional">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
added css :
.aditional {
position:absolute;
top:100%;
width:100%;
background:#000;
display:none;
}
.aditional li {
color:#fff;
}
added js :
$('.navbar ul li:nth-child(2) a').click(function() {
$(".aditional").slideToggle()
});
OR if you want a more responsive solution
check this :jsfiddle with target
use data-target on the li a like this
<li>Contracts</li>
<li>About Us</li>
added html :
<ul class="aditional contracts">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul class="aditional aboutus">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
jq added :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = '.' + $(this).data('target');
$(target).slideDown();
})
OR u can target the href of the li a. simply add this
<li>Contracts</li>
<li>About Us</li>
------
<ul class="aditional" id ="contract">
....
<ul class="aditional" id ="about">
....
and js :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = $(this).attr('href');
$(target).slideDown();
})
see here jsfiddle
one of these solutions should work for you . let me know

Sliding Drop Down Menu

I have a drop down menu that I want to slide down when the Menu button is clicked and slide up when it's clicked again. Also slide up when clicking anywhere else in the document.
This is what I got so far: jsfiddle
HTML:
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Jquery:
$(function() {
// Dropdown toggle
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '100%'
}, 'slow');
});
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '-100px'
}, 'slow');
});
}
});
});
The problem with what I did is the animation happens only once and only when clicking to open the drop down menu.

I am not sure if you are aware but there are .slideUp(), .slideDown() and .slideToggle() methods available in jQuery to do this sliding animation up and down business.
Below is the snippet for your reference:
var dropdownToggle = $('.dropdown-toggle');
var dropdown = dropdownToggle.next('.dropdown');
$(function() {
dropdown.slideUp(0);
$(document).on('click', function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
if (dropdown.is(':visible')) {
dropdown.stop(true).slideUp();
}
}
});
dropdownToggle.on('click', function() {
dropdown.stop(true).slideToggle();
});
});
body { padding: 2em; }
a {
text-decoration: none;
color: #000;
}
nav { position: relative; }
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
ul.dropdown {
position: absolute;
top: 100%;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
border-radius: 0 0 .2em .2em;
}
ul.dropdown li { list-style-type: none; }
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Notes:
You had CSS transition applied on the same element and you were also trying to apply animation via the use of .animate() method of jQuery on the same element. Both were conflicting each other. I have removed the CSS transition parts.
I also have removed the height: 0 part and you will notice that there is a dropdown.slideUp(0) line up there which basically applies a .slideUp() animation of 0 duration to immediately set height: 0 on the element.
Hope this helps.

Answering my own question for anyone who's interested, this is the code:
$(function() {
$('.dropdown').hide();
$('.dropdown-toggle').click(function(e) {
$('.dropdown').slideToggle(400);
$('.dropdown-toggle').slideDown('active');
$('.dropdown').toggleClass('is-active');
return false;
});
$(document).click(function() {
if ($('.dropdown').is(':visible')) {
$('.dropdown', this).slideUp();
$('.dropdown').removeClass('is-active');
}
});
});
body {
padding: 2em;
}
a {
text-decoration: none;
color: #000;
}
nav {
position: relative;
}
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
.dropdown {
position: absolute;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
top: 0;
left: 0;
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
}
.dropdown.is-active {
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
display: block
}
ul.dropdown li {
list-style-type: none;
}
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item
</li>
<li>Menu
</li>
<li>Settings
</li>
<li>Search
</li>
</ul>
</nav>
I used toggleClass and removeClass to add the animation I wanted and that's translate (the idea originally from Slide and Push Menu tutorial):
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s