Submenu disconnect on mouseover and cant navigate to submenu as well - javascript

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>

Related

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.

Highlighting an active class in an unordered list when scrolling

I am currently trying to implement smooth scrolling with a position indicator in my navigation menu. I want to be able to change the color or distinguish between the active part of the fixed nav bar when scrolling (i.e. when in the about section the about part of the navbar is highlighted). Does anyone have some advice? I don't want to use bootstrap or a plugin.
Here is the html for my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<ul class="top-menu">
<li id="home">HOME</li>
<li id="about">ABOUT</li>
<li id="contact">CONTACT</li>
</ul>
</div>
</nav>
SCSS:
nav{
/* spacing */
text-align: center;
/*font*/
font-size: 30px;
/* alignment */
vertical-align: middle;
z-index: 9999;
border-radius: 0;
position: fixed;
/* dimensions */
height: 80px;
width: 100%;
top: 0;
border-width: 5px;
ul{
margin-top:15px;
}
ul li{
vertical-align: middle;
margin: 10px;
display: inline-block;
margin-top:4px;
text-decoration: none;
}
ul li a, ul li a.active{
color: white;
vertical-align: middle;
margin: 5px;
font-size: 30px;
text-decoration: none;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
}
}
Javascript:
$(function() {
var pgurl = window.location.href.substr( window.location.href.lastIndexOf("/") + 1);
$(".navbar ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

Give page transition each category changed with jquery

How to give page transition, with each category name and qty, I mean when I click office category, it will show an popup overlay with that name caption also qty while loading, don't mind for the category name, and qty, it will do on PHP, I just need each transition will showing that overlay effect.
<div class="desk-08 tab-08 mob-hide prod-nav">
<h2 id="prod-title">Products</h2>
<div id="shop-categories-with-links-and-totals">
<ul class="products-nav-list">
<li class="md-top-product-category-link "><span class="nav-all-desktop">All</span><span class="nav-all-mobile">Products</span><span class="md-top-product-category-count"><span>138</span></span></li>
<li class="md-top-product-category-link">Office<span class="md-top-product-category-count"><span>27</span></span></li>
<li class="md-top-product-category-link">Books & Magazines<span class="md-top-product-category-count"><span>39</span></span></li>
<li class="md-top-product-category-link">Home<span class="md-top-product-category-count"><span>45</span></span></li>
<li class="md-top-product-category-link">Children<span class="md-top-product-category-count"><span>23</span></span></li>
<li class="md-top-product-category-link">Outdoor<span class="md-top-product-category-count"><span>10</span></span></li>
<li class="nav-search-link">Search</li>
<li class="nav-index-link">Index</li></ul></div>
</div>
ul.products-nav-list li {
margin-right: 12px;
display: inline;
float: left;
}
.navigation ul li {
color: #8A8A8A;
border-top: 0px none;
display: inline-block;
}
.navigation ul li a {
padding: 0px;
outline: 0px none;
}
.navigation ul li a {
line-height: 51px;
height: 50px;
}
.navigation ul li a {
color: #8A8A8A;
padding: 0px;
display: block;
line-height: 34px;
height: 32px;
}
.navigation ul li a .md-top-product-category-count {
display: inline;
}
.navigation ul li a .md-top-product-category-count {
display: none;
color: #8A8A8A;
vertical-align: super;
font-size: 0.8em;
padding: 0px 0px 0px 5px;
}
I'd probably include a div in the structure as the overlay and then toggle the class.
div#overlay {
height:100%;
width:100%;
overflow:hidden;
display:none;
background-color:rgba(0,0,0,0);
-webkit-transition: background-color 600ms ease;
-moz-transition: background-color 600ms ease;
-ms-transition: background-color 600ms ease;
transition: background-color 600ms ease;
}
div#overlay.active {
display:block;
background-color:rgba(0,0,0,.8);
}
Then you could use .toggleClass on click
$('a').on('click', function(e){
$('div#overlay').toggleClass('active');
});
Note, because of display:none; this method wont fade back. It will simply disappear.

Can't get transitions to work with IE11

I have stipped all extra code from my html file but can't get the transitions to work on IE11 could you please help, I have added special meta tag which also didn't fix the problem.
Code works completely fine in chrome, mozilla, opera, but not the bloody IE11. Please help, I spent whole day with this problem and I feel really stupid (maybe I am god knows), have designed the menu for www.wood-floor-experts.com which works perfectly in IE11 but this code doesnt work and thats it no matter what I do.
<!DOCTYPE html>
<html lang="en-GB" prefix="og: http://ogp.me/ns#">
<head>
<title></title>
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<style type="text/css">
.nav_cont {
width: 100%;
z-index: 1000;
}
.toggle_cont {
display: block;
text-align: center;
background: transparent;
}
.togle_btn {
border: none;
width: 80px;
padding: 20px;
background-color: rgba(132, 128, 136, 0.75);
z-index: 500;
cursor: pointer;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
}
.togle_bar {
background-color: #fff;
display: table;
margin: 0 auto;
width: 30px;
height: 1px;
border-radius: 1px;
}
.togle_bar + .togle_bar {
margin-top: 3px;
}
.nav_cont {
z-index: 1000;
}
.nav_cont ul {
background: rgba(0, 0, 0, 0.4);
display: block;
overflow: hidden;
max-height: 0;
-moz-transition: max-height, 0.5s, ease-in-out;
-o-transition: max-height, 0.5s, ease-in-out;
-webkit-transition: max-height, 0.5s, ease-in-out;
transition: max-height, 0.5s, ease-in-out;
}
.nav_cont ul li {
position: relative;
display: block;
text-align: center;
}
.nav_cont ul li a {
display: block;
text-decoration: none;
padding: 15px;
}
.nav_cont ul li a:hover {
color: #fff;
}
.nav_cont ul li ul {
height: 104px;
max-height: 0;
}
.nav_cont ul li.shown ul {
max-height: 104px;
}
.nav_cont ul.shown {
max-height: 416px;
}
</style>
</head>
<body>
<!-- Navigation============================================================= -->
<nav class="nav_cont">
<ul id="menu-main-navigation" class="nav nav_bg">
<li class="active"><a title="Home" href="#">Home</a></li>
<li class="dropdown"><a title="Products" href="#">Products</a>
<ul role="menu" class="dropdown-menu">
<li><a title="Doors" href="#">Doors</a></li>
<li><a title="Windows" href="#">Windows</a></li>
</ul>
</li>
<li><a title="Services" href="#">Services</a></li>
<li><a title="Portfolio" href="#">Portfolio</a></li>
<li><a title="About Us" href="#">About Us</a></li>
<li><a title="Contacts" href="#">Contacts</a></li>
</ul>
<div class="toggle_cont">
<button type="button" class="togle_btn">
<span class="togle_bar"></span>
<span class="togle_bar"></span>
<span class="togle_bar"></span>
</button>
</div>
</nav>
<!-- Footer ================================================================ -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('.dropdown').click(function() {
$(this).toggleClass('shown');
});
$('.togle_btn').click(function() {
$('ul.nav').toggleClass('shown');
});
});
</script>
</body>
</html>
You don't need to use comma:
transition: max-height, 0.5s, ease-in-out;
Use:
transition: max-height 0.5s ease-in-out;
So do in other vendor prefixes too.

CSS and jQuery issues with height of drop down menus

So I've made some drop down menus. The drop downs are ul nested in li. For style reasons I need have the drop down height set to 0px with some padding when the page first loads. All my drop downs have different heights. When I put 100% in as the height to animate too, it does not work.
Here is a link: http://www.jasonfoumberg.com/test/writing.html
How do I get the drop downs to animate to the proper height. Each drop down has a different number of items.
jQuery
$(document).ready(function () {
var defHeight = $('ul:first', this).height();
console.log(defHeight);
$("ul li").hover(
function () {
$('ul:first', this).animate({
height: "100%"
});
}, function () {
$('ul:first', this).animate({
height: "0px"
});
});
});​
HTML
<div id="mainWrapperContent">
<div id="writingMenu">
<ul>
<li>critical reviews
<ul>
<li>frieze</li>
<li>Modern Painters</li>
<li>photograph</li>
<li>sculpture</li>
<li>NewCity</li>
</ul>
</li>
<li>Exhibition Catalogs
<ul>
<li>Catalog One</li>
<li>Catalog Two</li>
<li>Catalog Three</li>
<li>Catalog Four</li>
<li>Catalog Five</li>
</ul>
</li>
<li>BreakOut Artists
<ul>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
<li>2008</li>
</ul>
</li>
<li>Cover Stories
<ul>
<li>Catalog One</li>
<li>Catalog Two</li>
<li>Catalog Three</li>
<li>Catalog Four</li>
<li>Catalog Five</li>
<li>Catalog One</li>
<li>Catalog Two</li>
<li>Catalog Three</li>
<li>Catalog Four</li>
<li>Catalog Five</li>
</ul>
</li>
</ul>
</div><!-- writing Menu -->
</div><!-- mainWrapper Content -->​
CSS
#writingMenu a {
margin: 0px 0px 0px 0px;
padding: 12px 5px 5px 5px;
text-align: right;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
background: #ffffff;
color: #B3B3B3;
min-width: 140px !important;
display: block;
}
#writingMenu a:hover {
color: #37342e;
}
#writingMenu ul li ul {
position: absolute;
width: 90%;
float: left;
overflow: hidden;
border-left: thin solid black;
border-bottom: thin solid black;
border-right: thin solid black;
margin-left: -5px;
padding-top: 5px;
background-image: url(images/speckled_backgrounddk.jpg);
display: block;
height: 0px;
}
#writingMenu ul li ul li {
background-image: none;
float: none;
}
#writingMenu ul li ul a {
margin: 0px;
padding: 0px;
text-align: left;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: #B3B3B3;
background-color: transparent;
background-image: none;
text-transform: lowercase;
color: #999999;
}​
$(document).ready(function() {
var defHeight = $('ul:first',this).height();
console.log(defHeight);
$("ul li").hover(
function () {
$('ul:first',this).stop().animate({height : "toggle"});
},
function () {
$('ul:first',this).stop().animate({height : "toggle"});
});
});
Havent tried but this should work
I'vde made a css-only based dd menu if you're interested...
HTML =>
<!-- by rocky -->
<div id="wrapper">
<div id='navMenu'>
<ul>
<li>Menu1
<ul>
<li>Dropdown1</li>
<li>Dropdown2</li>
<li id="submenu">Dropdown3
<ul>
<li>Submenu 1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul> <!-- End of Menu1-->
</li> <!-- Menu2 -->
<li>Menu2
<ul>
<li>Dropdown2 </li>
<li id="submenu">Dropdown2
<ul>
<li>Dropdown2</li>
</ul>
</li>
<li>Dropdown2</li>
</ul> <!-- End Inner UL -->
</li> <!-- ABOUT -->
<li>Menu3
<ul>
<li>Submenu3</li>
<li id="submenu">Submenu3
<ul>
<li>Submenu3</li>
</ul>
</li>
</ul> <!-- End Inner UL -->
</li> <!-- End main LI -->
</ul> <!-- End main UL -->
</div> <!-- End Nav -->
</div> <!-- End wrapper -->
And the CSS:
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul{
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu ul li ul a:hover {
color: #999;
}
#navMenu ul ul li#submenu ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navMenu ul ul li#submenu:hover ul {
margin-top: -30px;
margin-left: 105px;
visibility: visible;
}
There is a demo here:
http://dbwebb.se/style/?id=152

Categories