We Keep Coding

Smooth toggle Javascript function

Well what I want to do is to toggle a menu when is clicked but it's not smooth and it feels tough, I'm a newbie in JS but I do know CSS and HTML well enough, so is there a way to smooth this toggle function?
menu unclicked:
menu clicked:
const toggleButton = document.getElementsByClassName("nav__toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav__links")[0];
toggleButton.addEventListener("click", () => {
console.log("clicked");
navbarLinks.classList.toggle("active");
toggleButton.classList.toggle("open");
});

If you want to solve this with CSS you can 'animate' the two divs with the transitions property: https://www.w3schools.com/css/css3_transitions.asp
close state:
div {
opacity: 0;
transition: opacity 1s;
}
open state:
div.active {
opacity: 1;
transition: opacity 1s;
}
Two minors:
don't use BEM classes to trigger an event listener, use instead a proper class (js-click or something..)
a small refactor for your first two lines:
const [toggleButton] = document.querySelectorAll(".nav__toggle-button")
const [navbarLinks] = document.querySelectorAll(".nav__links")

You can apply transition and transform properties to the element through CSS.
For example, if you are using a drop down menu and controlling the slide and the opacity:
transform: translateY(-10px);
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
You could check out:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition

All you need is a transition and transform property that you can toggle. Transform CSS property is used for handling dimensions, orientation etc of a DOM element. Adding transition adds an effect where the transform properties if changed, change gradually.
const closeButton = document.getElementById("close")
closeButton.addEventListener("click", () => {
const menu = document.getElementById("nav-links")
menu.classList.toggle("closed-list");
})
ol {
width: 100%;
list-style-type: none;
background: gray;
transition: all 0.4s ease-in-out;
}
.closed-list {
transform: scaleY(0);
transform-origin: top;
}
li {
text-align: center;
padding: 12px 0px;
color: white;
font-weight: 700;
font-size: 18px;
}
#close-container {
text-align: right;
}
<div>
<div id="close-container">
<button id="close">
open/close
</button>
</div>
<ol id="nav-links">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ol>
</div>

Animate easy in and easy out when hover a link

Hi guys i want to make a menu similar to this site: http://tommasoraspo.com/creativepartners/DesignLovers/index.html
But I don't know how i would animate the Bookmark to show up when i hover a link. I thought in using animate.css (slideInDown animation) but then it would only show up when hover over but wouldn't get back when hover out.
Initiate Animation on Hover:
function animationHover(element, animation){
element = $(element);
element.hover(
function() {
element.addClass('animated ' + animation);
},
function(){
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}

The site you point to isn't using an javascript. Rather, they are using css3 transitions to animate the background position of an image that is "off-canvas" when the site is loaded.
Here's a fiddle with the relevant css/html.
You may have to tweak the values to suit your specific design and image.
HTML:
<ul class="nav">
<li>Menu Item 1
</li>
<li>Menu Item 2
</li>
<li>Menu Item 3
</li>
<li>Menu Item 4
</li>
</ul>
CSS:
ul.nav {
list-style: none;
margin: 0;
}
ul.nav li {
float: left;
margin: 0 0 0 30px;
}
ul.nav li.current a, ul.nav li a:hover {
background-position: 50% 0;
}
ul.nav li a {
height: 50px;
line-height: 50px;
display: block;
padding: 50px 20px 0;
position: relative;
background: url(http://lorempixel.com/50/70/abstract/) no-repeat 50% -90px;
-webkit-transition: background-position 0.2s linear;
-moz-transition: background-position 0.2s linear;
transition: background-position 0.2s linear;
}

Cant link my pages in HTML

I made a vertical drop down menu and the menu hides with Jquery, the problem is now that I can not link my pages with my menu in my li items my #href is not clickable, but the link is there.
Thanks in advance
http://68625.glr-imd.nl/motiongraphic.html# <---- url webpage
HTML:
<a id="arrow" href="#"></a>
<div id="sidemenu" class="sidemenu">
<img id="side_menu_img" src="styling/img/logo_no_letters.png" width="auto" height="40" style="margin-left:40px; margin-top:250px;">
<ul id="side_menu" class="menu">
<li style="margin-top:10px;">A b o u t
</li>
<li style="margin-top:10px;"> <a id="portfolio" href="#">P o r t f o l i o</a>
<ul>
<li style="font-size:12px; margin-top:10px;">Web-Design
</li>
<li style="font-size:12px;">Brand Identity's
</li>
<li style="font-size:12px;">Projects
<ul>
<li style="font-size:10px; margin-top:10px;">For the birds: The story continues
</li>
<li style="font-size:10px;">Gia - The biography
</li>
<li style="font-size:10px;">Glr Viral
</li>
<li style="font-size:10px;">The Round Interface
</li>
<li style="font-size:10px; margin-bottom:10px;">Shang Xia - Coming Soon
</li>
</ul>
</li>
<li style="font-size:12px;">+ Motion Graphic Design
</li>
<li style="font-size:12px;">3D Illustration
</li>
</ul>
</li>
<li style="margin-top:10px;"> O f f - B o o k s
<ul class="depth2">
<li style="font-size:12px;">Photography
</li>
<li style="font-size:12px;">Drawings + Paintings
</li>
</ul>
<li style="margin-top:10px;">c o n t a c t
</li>
</li>
</ul>
<div class="iconbar">
<img class="icon" src="styling/Icons/facebook.png">
<img class="icon" src="styling/Icons/linkedin.png">
<img class="icon" src="styling/Icons/tumblr.png">
<img class="icon" src="styling/Icons/Youtube.png">
<img class="icon" src="styling/Icons/meel.png">
</div>
</div>
CSS:
.menu {
width: 300px;
height: 152px;
padding: 0;
position: absolute;
top: 50%;
margin-top: -76px;
margin-left: 25px;
text-transform: uppercase;
}
.menu li {
margin:0;
}
.menu li {
display:block;
color:#000;
overflow:hidden;
}
.menu li a {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor:auto;
}
.menu li > ul {
display:none;
overflow:hidden;
padding:10;
}
.menu p ul.depth2 li a {
color:#fff;
display:block;
}
.menu li a:hover {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#999;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidemenu {
position:fixed;
height:100%;
left:0px;
top:0;
z-index:1500;
width:375px;
background-color:#FFF;
margin-left:-375px;
}
::-webkit-scrollbar {
width: 0px;
}
#arrow {
width:30px;
height:100px;
background-image:url(../img/arrow_l.png);
position:fixed;
left:0;
top:50%;
margin-top:-50px;
z-index:2000;
margin-left:0px;
rotateZ:0;
}
#font-face {
font-family:'quicksandlight';
src: url('../fonts/quicksand-light-webfont.eot');
src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/quicksand-light-webfont.woff') format('woff'), url('../fonts/quicksand-light-webfont.ttf') format('truetype'), url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
font-weight:normal;
font-style:normal;
}
.iconbar {
height:32px;
width:auto;
position:absolute;
top:100%;
margin-top:-32px;
left:25px;
}
.iconbar img {
width:auto;
height:16px;
margin-right:15px;
opacity:0.5;
}
.iconbar img:hover {
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JS:
<script>
$("#portfolio").click(function() {
if ($("#side_menu").css("margin-top") == "-76px") {
$("#side_menu").animate({
"margin-top": "-166px"
}, 2500);
} else {
$("#side_menu").animate({
"margin-top": "-76px"
}, 500);
}
});
$("#portfolio").click(function() {
if ($("#side_menu_img").css("margin-top") == "250px") {
$("#side_menu_img").animate({
"margin-top": "160px"
}, 2500);
} else {
$("#side_menu_img").animate({
"margin-top": "250px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#sidemenu").css("margin-left") == "0px") {
$("#sidemenu").animate({
"margin-left": "-375px"
}, 500);
} else {
$("#sidemenu").animate({
"margin-left": "-0px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#arrow").css("margin-left") == "0px") {
$("#arrow").animate({
"margin-left": "335px"
}, 500);
} else {
$("#arrow").animate({
"margin-left": "-0px"
}, 500);
}
});
swfobject.registerObject("FLVPlayer");
</script>

Looking at the source code on your website, below code prevents you from clicking a link inside your menu:
$('.menu a').click(function( e ){
//e.preventDefault(); // disable this to click enable the links
$(this).parent('li').find('ul:first').slideToggle();
});
What you better do, is refine your selector $('.menu a') to a better one, in order to select the items that need to toggle a submenu. about and contact for example needs to remain an ordinary link if I have understood you correctly.
HTML:
<li>
P o r t f o l i o
<!-- optionally add a class or data-attribute here to properly select in jquery -->
<!-- $('.menu ul') -->
<ul>
<li>Brand Identity's</li>
<li>Projects
</ul>
</li>
JS:
Find all the a elements prior to the ul elements inside .menu.
This should avoid selecting about and contact so they keep their default behavior to answer your question.
$('.menu ul').prev("a").click(function(e){
e.preventDefault();
// continue
});
some hints to clean up your code:
On te jquery part, don't select the same items twice and don't bind it twice to the same event. Sounds like overkill, don't you think?
$("#portfolio").click() // 3 times
$("#arrow").click() // 2 times
On the css + jquery part, instead of animating margin-top you might want to try the height of the .submenu or switch to a toggle function in jquery. Submenus are positioned fixed so it's better to avoid margin here and use top, bottom, left, right to adjust the position.
example of improvement
var mainmenu = $("#sidemenu"), // confuses with #side_menu so -> mainmenu
arrow = $("#arrow");
arrow.click(function () {
var mainmenuleft = parseInt(mainmenu.css("left"), 10),
arrowleft = parseInt(arrow.css("margin-left"), 10);
mainmenuleft = mainmenuleft === 0 ? -375 : 0;
arrowleft = arrowleft === 0 ? 335 : 0;
mainmenu.animate({ left: mainmenuleft }, 500);
arrow.animate({ marginLeft: arrowleft }, 500);
});
FIDDLE:
http://jsfiddle.net/tive/ez7WG/

Drop down menu hiding menus

I'm building a drop down menu for a project I'm working on, but I don't get it working entirely as is should. I want it to show the sub-menus when I hover the root-level menus, and then close again after a short delay when the menu or sub-menu is not hovered anymore. Most of it works; the sub-menus are showed when root-level items are hovered and it is hidden when I stop hovering the root-level item. The problem is that the sub-menus are also hidden when I move my cursor from the root-level item to a sub-menu item other than the first and hover that. This is obviously not good, so help would be appreciated.
I created a JSFiddle with the code which shows the issue more clearly.
So, here's my code:
menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
<div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
<a href=#>Item 1.3</a>
</div>
</li>
</ul>
</div>
menu.css
#m_wrapper {
position:relative;
display:table;
}
#menu {
position:relative;
}
#menu li {
width:100px;
position:relative;
float:left;
list-style-type:none;
}
#menu div {
position:absolute;
visibility:hidden;
display:inherit;
width:100%;
z-index:30
}
#menu div a {
position:relative;
display:block;
z-index:35;
}
menu.js
var countdown = 300;
var timer = null;
var menu_item = null;
window.show_sub_menu = function(cath) {
if (menu_item) {
menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
}
menu_item = window.document.getElementById("s" + cath);
menu_item.style.visibility = 'visible'; //Show menu
if (timer) {
window.clearTimeout(timer); //Reset timer, so menu is kept open
timer = null;
}
};
window.start_timer = function() {
timer = window.setTimeout(close_sub_menu, countdown);
};
window.close_sub_menu = function() {
menu_item.style.visibility = 'hidden';
};

you don't have to make it that complex.
ofcourse you can do same through javascript, but see how easy, readable and simple it is through jQuery.
See this DEMO
Just use following script
$('#menu li').hover(
function(){
$(this).stop().animate({height: '100px'},1000,function(){});
$(this).find('div').show(600);
}//gets called upon mousehover
,
function(){
$(this).stop().animate({height: '20px'},1000,function(){});
} //gets called upon mouseout
); //hover ends
and also, I don't know why you have written tonns of CSS. Just use these:
#menu
{
list-style:none;
}
#menu li
{
width:100px;
border:1px Solid #CCC;
text-align:Center;
cursor:pointer;
height:20px;
overflow:hidden;
}
#menu li div
{
border:1px Solid #CCC;
}
#s0
{
height:auto;
}
#s0 a
{
display:block;
}
There's plenty you can do through it, like selected dropdown item. selection through arrow key and what not. jQuery makes it simple for you.

first of all You should avoid <div> in <li> tags, because is not semantic.
Quite good is multi level menu build only with html and css styles.
HTML
<div id=m_wrapper>
<ul id=menu>
<li>Item 1
<ul>
<li><a href=#>Item 1.1</a></li>
<li><a href=#>Item 1.2</a></li>
<li><a href=#>Item 1.3</a></li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
CSS STYLES
#m_wrapper, #menu, #menu li {
position:relative;
}
#m_wrapper {
display:table;
}
#menu li {
float:left;
width:100px;
list-style-type:none;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
margin: 0 10px;
padding: 0;
}

This can quite easily be achieved with HTML and CSS alone. Using CSS transitions we can make the menu fade when we hover off.
Example
I have also put this on JsFiddle
HTML
<nav>
<ul id="menu">
<li>
Home
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
#menu li
{
position: relative;
display: inline;
list-style: none;
padding-left: 15px;
}
#menu ul
{
margin: 0;
padding: 0;
list-style: none;
opacity: 0;
position: absolute;
top: 20px;
left: 5px;
// Transitions for our fade effect.
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#menu ul li
{
display: block;
}
#menu li:hover > ul
{
opacity: 1;
// This stops the transition from happening on hover.
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

A pure CSS drop down menu
http://jsfiddle.net/steelywing/GANeX/8/
.nav {
background-color: #def;
height: 20px;
}
.nav * {
transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
}
li {
display: inline-block;
height: 20px;
}
.dropdown li {
display: block;
}
.dropdown ul {
visibility: hidden;
opacity: 0;
margin-top: -2px;
}
.dropdown:hover ul {
visibility: visible;
opacity: 1;
}

Remember that.. if You decide to implement the fade version, You should use crosbrowser opacity, like this:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;

How to animate background image with jQuery

Hi I'm trying to animate a background image using jQuery, I tried following this tutorial here, however I've had no luck with my test page, I see the blue Facebook icon, but on mouse over it does not animate upwards to reveal the gray logo. Please help! Thanks, I'm a jQuery noob.
My test page:
http://leongaban.com/_stack/bg_animation/
The Facebook icon should animation upwards, the full image below:
My CSS
<style>
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
}
</style>
HTML
<ul id="facebook_icon">
<li><div class="box"></div></li>
</ul>
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script>
(function() {
$('#facebook_icon li')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -119px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
})();
</script>
UPDATE: WORKING CSS 3 Solution
CSS 3
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
-moz-transition: background-position 1s;
-webkit-transition: background-position 1s;
-o-transition: background-position 1s;
transition: background-position 1s;
background-position: 0 0;
}
#facebook_icon li:hover{
background-position: 0 -119px;
}
.box {
width: 120px;
height: 119px;
}
HTML (Added empty div box to have something to click on)
<ul id="facebook_icon">
<li><div class="box"></div></li>
</ul>

A simple solution should be using the css3 transition.
You can do something like this:
In Your CSS
#facebook_icon li{
-moz-transition: background-position 1s;
-webkit-transition: background-position 1s;
-o-transition: background-position 1s;
transition: background-position 1s;
background-position: 0 0;
}
#facebook_icon li:hover{
background-position: 0 -119px;
}

This one is thankfully pretty simple. You are animating background-position on the anchor, but the actual image is on the li.
Just change your selector in your JavaScript:
$('#facebook_icon li')
However, I'd recommend changing your markup (and accompanying CSS) so the a is inside the li instead of a child of the ul. That way your markup is valid.
Update:
Hey, so I totally agree with using CSS3. Its exactly how I would implement that. But just to close out the question: To get the bgpos plugin working with jQuery 1.8.2, change the first two lines of the backgroundPosition method to this:
if (fx.start === 0 && typeof fx.end == 'string') {
var start = $.css(fx.elem,'backgroundPosition');