Develop Reference

Rotate the arrow as menu is expanded instead of doing at the end of the animation

As soon as I click the menu is expanded and then arrow is rotated. What I want is as soon as I click, menu should expand and arrow should rotate in parallel. How can I achieve that?
$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
$('ul.sub-menu').not($(this).siblings()).slideUp("slow").parents('.product-menu').removeClass('active');
$(this).siblings("ul.sub-menu").slideToggle("slow", function() {
if ($(this).parents('.product-menu').hasClass('active')) {
$(this).parents('.product-menu').removeClass('active')
} else $(this).parents('.product-menu').addClass('active');
});
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
.product-menu .dropdown-arrow {
transition: transform .2s;
}
.product-menu.active .dropdown-arrow {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
template A
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
Template B
<ul class="sub-menu">
<li>3.1
</li>
</ul>
</li>
<li class="product-menu" id="one">Template C
</li>
<li class="product-menu">Template D
</li>
<li class="product-menu">Template E
</li>
<li class="product-menu">Template F
</li>
</ul>
<div class="product-container" />
</div>

The issue is because you're toggling the class in the callback of the animation, so it happens when the animation ends. Simply move that logic in to the outer click event handler.
Also note that you can simplify the whole if condition by just calling toggleClass(). Try this:
$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
var $a = $(this);
$('ul.sub-menu').not($a.siblings()).slideUp("slow").closest('.product-menu').removeClass('active');
$a.closest('.product-menu').toggleClass('active');
$a.siblings("ul.sub-menu").slideToggle("slow");
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
.product-menu .dropdown-arrow {
transition: transform .2s;
}
.product-menu.active .dropdown-arrow {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
template A
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
Template B
<ul class="sub-menu">
<li>3.1</li>
</ul>
</li>
<li class="product-menu" id="one">Template C</li>
<li class="product-menu">Template D</li>
<li class="product-menu">Template E</li>
<li class="product-menu">Template F</li>
</ul>
<div class="product-container" />
</div>

Floated elements jump when hiding another floated elements

I have grid of floated elements, for which I created a filter. I want this filter to hide and show the items and while doing so I want the items to re adjust with transitions and fades.. At the moment the items just jump around.
As you can see here:
JSFIDDLE
How can I make the items slide to their position?
Heres the code:
HTML
<ul class="filters">
<li data="1">filter 1</li>
<li data="2">filter 2</li>
<li data="3">filter 3</li>
<li data="4">filter 4</li>
</ul>
<br>
<ul class="items">
<li data="1">1</li>
<li data="2">2</li>
<li data="1">3</li>
<li data="3">4</li>
<li data="4">5</li>
<li data="2">6</li>
<li data="3">7</li>
<li data="4">8</li>
</ul>
CSS
ul {
list-style: none;
padding: 0;
}
.filters li {
float:left;
margin-right: 10px;
cursor: pointer;
}
.items li {
width: 100px;
height: 100px;
background: #ccc;
float: left;
margin: 20px;
}
JQUERY
$(document).ready( function() {
$('.filters li').click( function () {
var data;
data = $(this).attr('data');
$('.items li').each( function() {
if($(this).attr('data') !== data) {
$(this).fadeOut();
}
else {
$(this).fadeIn();
}
});
});
});

As I mentioned in the comments you would need a different operation than fadeIn/Out as that involves the display property and that cannot be animated or transitioned.
Animating non-display values seems more optimal.
Something like this:
$(document).ready(function() {
$('.filters li').click(function() {
var data;
data = $(this).attr('data');
$('.items li').each(function() {
if ($(this).attr('data') !== data) {
$(this).addClass('hidden');
} else {
$(this).removeClass('hidden');
}
});
});
});
ul {
list-style: none;
padding: 0;
}
.filters li {
float: left;
margin-right: 10px;
cursor: pointer;
}
.items li {
width: 100px;
height: 100px;
background: #ccc;
float: left;
margin: 20px;
transition: all .5s ease;
}
li.hidden {
height: 0;
width: 0;
margin: 0;
opacity: 0;
font-size: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
<li data="1">filter 1</li>
<li data="2">filter 2</li>
<li data="3">filter 3</li>
<li data="4">filter 4</li>
</ul>
<br>
<ul class="items">
<li data="1">1</li>
<li data="2">2</li>
<li data="1">3</li>
<li data="3">4</li>
<li data="4">5</li>
<li data="2">6</li>
<li data="3">7</li>
<li data="4">8</li>
</ul>

You could set a delay for the fade in to ensure the fade out has completed.
The 500ms delay below is is a slightly longer duration as the fade in.
$(document).ready(function() {
$('.filters li').click(function() {
var data;
data = $(this).attr('data');
$('.items li').each(function() {
if ($(this).attr('data') !== data) {
$(this).fadeOut();
} else {
$(this).delay(525).fadeIn();
}
});
});
});
ul {
list-style: none;
padding: 0;
}
.filters li {
float: left;
margin-right: 10px;
cursor: pointer;
}
.items li {
width: 100px;
height: 100px;
background: #ccc;
float: left;
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
<li data="1">filter 1</li>
<li data="2">filter 2</li>
<li data="3">filter 3</li>
<li data="4">filter 4</li>
</ul>
<br>
<ul class="items">
<li data="1">1</li>
<li data="2">2</li>
<li data="1">3</li>
<li data="3">4</li>
<li data="4">5</li>
<li data="2">6</li>
<li data="3">7</li>
<li data="4">8</li>
</ul>

It's the overlap of fadeOut and fadeIn that makes it look like they are jumping.
Try hiding the filtered out items quick and slideDown the applicable boxes:
$(document).ready( function() {
$('.filters li').click( function () {
var data;
data = $(this).attr('data');
$('.items li').each( function() {
if($(this).attr('data') !== data) {
$(this).slideUp();
}
else {
$(this).delay(525).slideDown();
}
});
});
});

Nav button highlight works in desktop browser, but not in android mobile browser

Alright so I'm using jQueryMobile, jQuery/JavaScript and CSS to make a navigation bar that allows you to select an option from the top UL tree (horizontal nav bar) and then also select an option from the resulting submenu while the option from the parent ul tree is still highlighted.
This works in a desktop browser and in this jsfiddle I just created (at the bottom); however, once I'm in a mobile browser (Android Internet or Chrome Mobile), the parent ul no longer stays highlighted.
Why?
<div data-role="page" data-theme="a" id="home">
<div data-role="header" data-position="fixed">
<nav id="navbar" data-role="navbar">
<ul>
<li class="active"><a class="ui-btn-active" href="#">Real-Time</a>
<ul class="secondLvl">
<li>Choice 1</li>
<li>Choice 2</li>
<li>Choice 3</li>
<li class="lastNav"><a></a></li>
</ul>
</li>
<li>Database Functions
<ul class="secondLvl">
<li>Another Choice 1</li>
<li>Another Choice 2</li>
<li class="lastNav"><a></a></li>
</ul>
</li>
<li>Settings/Configuration
<ul class="secondLvl">
<li>Logout</li>
<li>A Third Choice 1</li>
<li>A Third Choice 2</li>
<li>A Third Choice 3</li>
<li class="lastNav"><a></a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed">
<h1>
Home
</h1>
</div>
</div>
CSS:
#home
{
background-color: #5f6975;
overflow: hidden;
}
#navbar > ul {
position: relative;
}
#navbar ul ul {
display: none;
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
left: 0;
width: auto;
bottom: 1000px;
}
#navbar ul ul li {
float: left;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
width: 100%;
}
.ui-navbar li:last-child .ui-btn {
margin-right: 0px !important;
}
.lastNav a {
height: 100vh;
pointer-events: none;
}
#navbar ul ul li a.active {
background: #4b545f;
}
#navbar ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
#navbar ul li.active > ul {
display: block;
}
#navbar ul li {
float: left;
}
#navbar ul li.active {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar ul li a {
display:block;
padding: 25px 40px;
text-decoration: none;
}
JavaScript/JQuery:
//Clear Text Fields
$(document).on("pagehide", function (e){
$(e.target).remove();
});
//Setup Side Navbar
$(document).on("pagecreate", "#home", function(){
var navItems = $("#navbar > ul > li");
var subWidth = 100 / navItems.length;
$("#navbar > ul > li").each(function( index ) {
$(this).find("ul").each(function(i) {
var top = (i + 1) * 100;
$(this).css({"position": "absolute",
"width": subWidth + "%",
"top": top + "%"});
});
});
});
//Make Side Navbar stick
$(document).on('pagebeforeshow','#home', function(event){
$('#navbar ul li').on('click', function () {
//removing the previous selected menu state
$('#navbar ul li.active').removeClass('active');
//is this element from the second level menu?
if($(this).closest('ul').hasClass('secondLvl'))
{
$(this).parents('li').addClass('active');
} //end if
//otherwise just highlight the element
else
{
$(this).addClass('active');
} //end else
})
$('ul').find('a').on('click', function() {
$(this).closest('ul').find('a').removeClass('ui-btn-active');
if($(this).closest('ul').hasClass('secondLvl'))
{
$(this).addClass('ui-btn-active');
}
})
})
Here's my JSFiddle: https://jsfiddle.net/LLx7vgjo/8/

Try using vclick event instead click. The jQuery Mobile "vclick" event handler simulates the "onclick" event handler on mobile devices. I hope this helps!

fixing submenu to top of nav

I have created a dropdown navigation with two sub-menu's.
I am trying to get the second sub-menu to start from the top (just underneath the primary nav/black bar) and not at it's current position but I am not sure how to do this.
Here is a codepen I made http://codepen.io/anon/pen/ByaaYM
So for example, if you hover over Personal > Caravan or Personal > Home & Property, the top of the sub menu should sit in the same place, just underneath the black bar.
Any help would be greatly appreciated
This is the outcome I would like to achieve http://codepen.io/anon/pen/OPJPNL - Notice when hovered, the sub-menu's sit flush directly underneath the black bar.
The code...
Html
<ul>
<li>
Personal
<ul class="dropdown-menu">
<li data-submenu-id="submenu-patas">
Boat
</li>
<li data-submenu-id="submenu-snub-nosed1">
Caravan
<ul id="submenu-snub-nosed1">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li data-submenu-id="submenu-snub-nosed">
Home & Property
<ul id="submenu-snub-nosed">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Military</li>
<li>Motor</li>
<li>More</li>
</ul>
</li>
<li>
Business
<ul class="dropdown-menu">
<li data-submenu-id="submenu-snub-nosed4">
Care & Medical
<ul id="submenu-snub-nosed4">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li>
Financial
</li>
<li data-submenu-id="submenu-snub-nosed3">
Liability
<ul id="submenu-snub-nosed3">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Property</li>
<li>Trade Specific</li>
</ul>
</li>
<li>Infozone</li>
</ul>
CSS
* {
box-sizing:border-box;
}
body {
font-family: sans-serif;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
background: #333;
padding: 0 10px;
list-style: none;
position: relative;
display: inline-block;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
}
ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
ul li:hover a {
color: #fff;
}
ul li a {
display: block;
padding: 25px 40px;
color: #fff;
text-decoration: none;
}
ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
ul ul li a {
padding: 20px;
color: #fff;
}
ul ul li a:hover {
background: #4b545f;
}
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
ul ul ul li {
display: inline-block;
width: 49%;
}
.dropdown-menu > li {
width: 200px;
}

If I understand correctly, you have a padding-problem. If you remove the padding from this:
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
Here's the updated CodePen

Try Below Html Code
you need to specify margin-top css style for each inner <ul>
`
<ul>
<li>
Personal
<ul class="dropdown-menu">
<li data-submenu-id="submenu-patas">
Boat
</li>
<li data-submenu-id="submenu-snub-nosed1">
Caravan
<ul id="submenu-snub-nosed1" style="margin-top:-60px;">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li data-submenu-id="submenu-snub-nosed">
Home & Property
<ul id="submenu-snub-nosed" style="margin-top:-120px;">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Military</li>
<li>Motor</li>
<li>More</li>
</ul>
</li>
<li>
Business
<ul class="dropdown-menu">
<li data-submenu-id="submenu-snub-nosed4">
Care & Medical
<ul id="submenu-snub-nosed4">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li>
Financial
</li>
<li data-submenu-id="submenu-snub-nosed3">
Liability
<ul id="submenu-snub-nosed3" style="margin-top:-120px;">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Property</li>
<li>Trade Specific</li>
</ul>
</li>
<li>Infozone</li>
</ul>
`

Responsive drop downs not activating until resize

So I have tried to setup a responsive menu using the code here
http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html
The problem I'm having is that the js seems to only activate when I resize the browser otherwise the larger version does not show the sub menu li when hovering and the smaller version has the li showing without clicking them first.
JS
var ww = '100%';
$(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');
});
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
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;
}
}
HTML
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li>
Shoes
<ul>
<li>
Womens
<ul>
<li>Sandals</li>
<li>Sneakers</li>
<li>Wedges</li>
<li>Heels</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>
Shirts
<ul>
<li>
Mens
<ul>
<li>T-Shirts</li>
<li>Dress Shirts</li>
<li>Tank Tops</li>
</ul>
</li>
<li>
Womens
<ul>
<li>T-Shirts</li>
<li>Blouses</li>
<li>Dress Shirts</li>
<li>Tunics</li>
<li>Camisoles</li>
</ul>
</li>
</ul>
</li>
<li>
Pants
<ul>
<li>
Mens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
<li>Leggings</li>
</ul>
</li>
</ul>
</li>
<li>
Skirts
<ul>
<li>
Long
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Short
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Mini
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
</ul>
</li>
<li>
Dresses
<ul>
<li>
Casual
</li>
<li>
Formal
<ul>
<li>Wedding</li>
<li>Party</li>
</ul>
</li>
</ul>
</li>
<li>
Sweaters
<ul>
<li>
Mens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
</ul>
</li>
<li>
Accessories
<ul>
<li>
Womens
<ul>
<li>Belts</li>
<li>Bags</li>
<li>Jewelery</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Belts</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
</ul>
</li>
<li>
Outerwear
<ul>
<li>
Womens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
</ul>
</li>
<li>
Shipping Info
</li>
</ul>
</div>

The initial value of ww is '100%', which is a string.
On $(document).ready you call the adjustMenu() method, which reads the value of ww.
Both conditions (ww < 768 and ww >= 768) evaluate to false, so adjustMenu() does nothing on DOMready.
You can avoid this to call $(window).trigger('resize') instead of calling adjustMenu() in your $(document).ready(function() { ... } method so that ww has a numeric value:
$(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();
});
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
$(window).trigger('resize');
});