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>

jQuery slideToggle jump animation on menu toggle

So my problem is just as simple as the title, when I click the big black "V" to toggle my menu, the animation jumps on the <li> with the sub menu.
I tried multiple things and none seem to work, I had a similar issue with the width which I solved by setting width to 100%. On my search I saw people that jQuery can't figure out the height of the elements but if I try to add height to the elements it totaly breaks the menu.
Here's the codepen so you can experience my problem. CODEPEN
HTML
<nav class="main-menu">
<ul>
<li class="level-1">Item 1
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 1.1
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.1.1</li>
<li class="level-3">Item 1.1.2</li>
<li class="level-3">Item 1.1.3</li>
<li class="level-3">Item 1.1.4</li>
</ul>
</li>
<li class="level-2">Item 1.2
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.2.1</li>
<li class="level-3">Item 1.2.2</li>
</ul>
</li>
<li class="level-2">Item 1.3</li>
</ul>
</li>
<li class="level-1">Item 2
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 2.1</li>
<li class="level-2">Item 2.2</li>
<li class="level-2">Item 2.3</li>
<li class="level-2">Item 2.4</li>
<li class="level-2">Item 2.5</li>
</ul>
</li>
<li class="level-1">Item 3</li>
<li class="level-1">BItem 4
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 4.1</li>
<li class="level-2">Item 4.2</li>
</ul>
</li>
</ul>
</nav>
CSS
.main-menu .sub-menu-1, .main-menu .sub-menu-2 {
display: none;
}
.main-menu ul {
width: 100%;
}
.main-menu li {
line-height: 25px;
}
.main-menu li.level-1 {
background-color: red;
}
.main-menu li.level-2 {
background-color: lightblue;
}
.main-menu li.level-3 {
background-color: yellow;
}
.main-menu a {
display: block;
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: block;
float: right;;
font-size: 20px;
font-weight: bold;
width: 20px;
transform: translateY(-25px);
}
Javascript/jQuery
$(document).ready(function() {
$('.sub-menu-1, .sub-menu-2').hide();
$('.toggle-1').click( function() {
$(this).next('.sub-menu-1').slideToggle();
});
$('.toggle-2').click( function() {
$(this).next('.sub-menu-2').slideToggle();
});
});
Thank you in advance and hope somenone can help me out.

The issue is arising from the <span> that you have set to display: block; in your css.
Switching .main-menu a and .main-menu .toggle-1, .main-menu .toggle-2 to both be display: inline-block; fixes the issue. You can then also remove some additional unnecessary css hacks that you were previously using to forcibly place these elements outside of their document flow position.
The updated CSS is below, and you can see a fork of the pen with both sub-menus working here
.main-menu a {
display: inline-block;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: inline-block;
float: right;
font-size: 20px;
font-weight: bold;
width: 20px;
}

I think the only problem is that you didn't set the clear property to your float. If you set it like:
.main-menu a {
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
float: right;
clear: none;
font-size: 20px;
font-weight: bold;
width: 20px;
}
you are good. Then you also don't need the transform: translate to shift your elements back. Here's a fork of your codepen: http://codepen.io/anon/pen/WwbPLV

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();
}
});
});
});

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');
});