We Keep Coding

Active Scrolling On single page Website Not working

im trying to find solutions but i cant.
my scrolling spy is not working
this is the navigation html.
<nav class="menu">
<ul>
<li><a class = "active" href="#" data-scroll = "home">Home</a></li>
<li>About</li>
<li>Our Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
My nav CSS JUST INCASE because i think there is a problem with the CSS but on thewebsite it appears just fine and the hover and active effects are working but not the on-scroll.
.menu{
z-index: 100;
position: fixed;
top: 0;
left: 25%;
width: 50%;
overflow: hidden;
background-color: transparent;
/* padding: 20px 0; */
}
.menu ul{
margin: 5px;
padding: 0;
text-align: center;
}
.menu ul li{
list-style: none;
margin:0 20px ;
display: inline;
}
.menu ul li a {
color: black;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
text-decoration: none;
padding: 3px 8px;
transition: 0.5s;
}
.menu ul li a.active{
border-bottom: 1px solid black;
border-top: 1px solid black;
color: #FFC300 ;
}
.menu ul li:hover{
border-bottom: 1px solid black;
}
/* On scroll */
.menu.scroll{
background: yellow;
}
And mY jquery/javascript. I am new to working with Jquery so i'm not too sure if this code is correct and most of the code online is not working for me.
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
$('.content section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a ').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a.first').addClass('active');
}
}).scroll();
Anyone with some good advice or a tutorial i can refer to?

div content not hiding when anchor tag is clicked using jQuery

I'm having issues with a navigation bar. When on mobile, I want the content of the navigation bar to be hidden once a list item is clicked. The issue only occurs when you resize the window from large to small; it doesn't occur when the screen size is already small. So you have to click on "expand snippet" to see the issue. I think there's something wrong with my javaScript code, but i'm not sure what it is. Thanks!
$(document).ready(function() {
var menuStatus = true;
var sections = $('section');
var nav = $('nav');
//smooth scroll
$("nav,#arrow").find('a').on('click', function() {
var el = $(this),
id = el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 500);
});
//hide the mobile nav after a link is clicked
if ($(window).width() < 900) {
$("nav li a").on('click', function() {
$(".menu").hide();
$('nav input:checkbox:checked').prop('checked', false);
});
$("nav input").on('click', function() {
$(".menu").show();
});
}
//show desktop nav when the screen is at least 900px
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 900) {
$(".menu").show();
}
});
});
nav {
position: absolute;
width: 100%;
z-index: 10;
}
nav img {
height: 150px;
}
nav ul {
list-style: none;
overflow: hidden;
}
.nav__container {
max-width: 1100px;
margin: 0 auto;
padding: 10px 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
nav li a {
display: block;
padding: 20px 20px;
text-decoration: none;
color: #fff;
font-size: 110%;
text-transform: uppercase;
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
}
nav ul li a:hover {
color: #5f3917;
background-color: #fbd802;
cursor: pointer;
}
a.active {
color: #1CAB1D;
}
nav .menu {
clear: both;
max-height: 0;
-webkit-transition: max-height .2s ease-out;
-o-transition: max-height .2s ease-out;
transition: max-height .2s ease-out;
}
nav .menu-icon {
margin-top: 5px;
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*close icon*/
nav .menu-icon .navicon {
background: #b32025;
display: block;
height: 2px;
position: relative;
-webkit-transition: background .2s ease-out;
-o-transition: background .2s ease-out;
transition: background .2s ease-out;
width: 18px;
}
/*menu icon bottom and top lines*/
nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {
background: #b32025;
content: '';
display: block;
height: 100%;
position: absolute;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 100%;
}
nav .menu-icon .navicon:before {
top: 5px;
}
nav .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
nav .menu-btn {
display: none;
}
/*height of vertical menu*/
nav .menu-btn:checked~.menu {
max-height: 300px;
}
nav .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
/*when clicked animate*/
nav .menu-btn:checked~.menu-icon .navicon:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*when clicked animate*/
nav .menu-btn:checked~.menu-icon .navicon:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
nav .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* MEDIA QUERIES */
#media only screen and (max-width: 730px) {
nav li:not(:last-child) {
border-right: none;
border-bottom: 1px solid rgba(252, 65, 65, 0.2);
}
nav ul {
padding: 0;
}
.nav__wrapper {
display: inline;
}
.container {
padding: 100px 20px;
}
}
#media only screen and (max-width: 730px) {
nav {
background-color: #fbd802;
}
nav img {
height: 70px;
}
nav li:not(:last-child) {
border-right: none;
border-bottom: 1px solid rgba(252, 65, 65, 0.2);
}
nav ul {
padding: 0;
}
nav li {
text-align: center;
}
.nav__container {
display: block;
}
}
#media only screen and (min-width: 730px) {
ul {
display: flex;
}
nav .menu {
max-height: none;
}
nav .menu-icon {
display: none;
}
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 100px 40px;
}
section {
height: 100vh;
}
#home {
background: red;
}
#aboutUs {
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<section id="home">
<nav>
<div class="nav__container">
<img id="logo" src="https://via.placeholder.com/150" alt="logo">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>about us</li>
<li>menu</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
</nav>
</section>
<section id="aboutUs">
</section>
</body>
</html>

I found the following error running your script: Uncaught TypeError: Cannot read property 'top' of undefined.
There are 2 ways to fix this. Either add all the elements listing in the href's and not just #aboutUs, or change your JS to the following:
$("nav,#arrow").find('a').on('click', function() {
var elm_id = $(this).attr('href');
var section = $(elm_id);
if(section.length) {
$('html, body').animate({
scrollTop: section.offset().top
}, 500);
}
});
-- EDIT --
Full Code:
$(document).ready(function() {
// smooth scroll
$("nav, #arrow").on('click', 'a', function() {
var elm_id = $(this).attr('href');
var section = $(elm_id);
if(section.length) {
$('html, body').animate({
scrollTop: section.offset().top
}, 500);
}
});
// Handle Mobile Menu
var $window = $(window);
var $menu = $(".menu");
$("nav li a").on('click', function() {
if ($window.width() < 900) {
$menu.hide();
$('nav input:checkbox:checked').prop('checked', false);
}
});
$("nav input").on('click', function() {
if ($window.width() < 900) {
$menu.show();
}
});
// show desktop nav when the screen is at least 900px
$window.on('resize', function() {
if ($window.width() > 900) {
$menu.show();
} else {
$menu.hide();
}
});
});

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>

jquery toggle append remove

Here is a menu with submenu. I need that when I click on the submenu item, submenu text toggle beside menu item "Everyday". Like the image below
(function($) {
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
$(this).closest(".menu").children("li").children("a").append('<span class="day-name">' + dayName + '</span>');
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Everyday
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>
This is what I'm trying, but its does not work.

You can use Javascript's join & jQuery's - hasClass & toggleClass methods with on('click') event like this:
See jsFiddle
or see the code snippet below:
$(function() {
$('.menu .sub-menu li a').on('click', function(e) {
$(this).toggleClass('selected');
var txt = $('#title').text();
var total_len = $('.menu .sub-menu li').length;
var count = 0;
var values = [];
$('.menu .sub-menu li a.selected').each(function(i) {
values.push($(this).text());
count++;
});
if(count == total_len) {
txt = "Every Day";
} else {
txt = "Every " + values.join(',');
}
$('#title').text(txt);
});
})
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
.menu .sub-menu li a.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
<a id="title" href="#">Every </a>
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>

(function($) {
$(".menu .sub-menu li a").on("click", function() {
var $this = $(this);
if (this.hasAttribute("data-selected")) {
$this.removeAttr("data-selected");
} else {
$this.attr("data-selected", 'true');
}
$this.closest(".menu").find(" > li > a").html(fillButton);
});
function fillButton() {
var options = $(this).next(".sub-menu").find("li a");
if (options.filter("[data-selected]").length > 0) {
if (options.length === options.filter("[data-selected]").length) {
return "Every day";
} else {
var html = "Every ";
options.filter("[data-selected]").each(function(i, el) {
html += (i > 0) ? ", " + $(el).text() : $(el).text();
});
return html;
}
} else {
return "Never";
}
}
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a[data-selected] {
background: #f0f0f0;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Never
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>

Check this fiddle.
Change JS as below and add schedule class to the "Everyday" anchor.
(function($) {
var currentValue = [];
function renderValue(){
var content = "Everyday ";
$('.schedule').text(content + currentValue.join(' '));
}
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var el = $(this),
id = el.attr('data-id');
currentValue[id] = currentValue[id] ? undefined : el.text();
renderValue();
});
});
})(jQuery);

You can try this as well. you will have to check if the appended span in the days list is equal to total days.
(function($) {
$(".menu").children("li").children("a.all").hide();
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var li = $(this).closest(".menu").children("li");
if ($(".menu .sub-menu li").length == $(".menu li a.days span").length + 1 && li.children("a.all").is(":visible") == false) {
li.children("a.days").hide();
li.children("a.all").show();
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.all").hide();
li.children("a.days").show();
if (li.children("a.days").children("span:contains('" + dayName + "')").length == 0) {
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.days").children("span:contains('" + dayName + "')").remove();
}
}
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Every
Everyday
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>

Clickable Submenu on Mobile Screens

I am building a WP theme and using default sub-menu behavior as user mouseover and drop down sub-menu appears. but as on mobile screen hover feature don't work and i simply hide the sub-menu on mobile resolution.
But as we can see in WP dashboard the sub menus converted with clickable feature and we can access the sub-menu by clicking the parent.
how can i implement this feature in my theme?

Here is what you are looking for
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background: #175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color: #fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index: 100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background: #249578;
z-index: 200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
Shoes
<ul>
<li>
Womens
<ul>
<li>Sandals
</li>
<li>Loafers
</li>
<li>Flats
</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Loafers
</li>
<li>Sneakers
</li>
<li>Formal
</li>
</ul>
</li>
</ul>
</li>
<li>
Shipping Info
</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
} else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
</script>
</body>
</html>