Develop Reference

How to close navigation bar when I click on other contents in the webpage

I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.

The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.

SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});

You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>

jQuery toggleClass fade works with one class, not with the other?

I want my i elements to lose the outline class on hover, but for some reason this is not working. The class is lost and added again instantly without a fade/delay. If I try this exact same code with a class of background then it does work. What am I not seeing here?
The second problem is that when I do try this with a background class, the background stays there for the duration of the fade (in this case 500ms) and then disappears instantly. This should also be a fade, like a fade out.
Thank you!
JSFiddle
$('nav a').hover(function(){
if (!$(this).find("i").hasClass("home")){
$(this).find('i').toggleClass('outline', 500);
}
})

.hover() can be passed 2 functions as arguments. The first is like .mouseover() and the second is the .mouseout()
$('nav a').hover(function() {
$(this).find('.home').removeClass('outline');
}, function() {
$('.home').addClass('outline');
})
Update
You can add fadein and fadeout effect without Javascript, only with css:
nav {
font-size: 20 px;
}
nav a {
padding-left: 30 px;
}
nav a i {
position: absolute;
left: 0;
}
nav a i.star: not(.outline) {
opacity: 0;
transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
opacity: 1;
transition: opacity 300 ms ease;
}
Demo here.

With the help of [Radonirina Maminiaina][1]'s answer and some altering of the code by myself I made it work exactly as intended.
It was Radonirina's idea to put the second icon right behind the original icon by using position: absolute; (see his code above), but then I came up with the idea to add the class "dark" to the hidden icon underneath and simply select it to make the opacity 0, and 1 on hover, including the transition effect. This made the CSS a lot simpler and it works beautifully.
Thanks again!
Here is a working example of the end result:
$('.menu-toggle').click(function() {
$('nav').toggleClass('nav-open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */
header {
position: fixed;
height: 50px;
width: 100%;
background: #666666;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: #222;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
font-family: Fjalla One;
}
.smallNav {
position: absolute;
top: 100%;
right: 0;
background: #CCCCCC;
height: 0px;
overflow: hidden;
}
.nav-open {
height: auto;
}
.smallNav a {
color: #444;
display: block;
padding: 1.5em 4em 1.5em 3em;
border-bottom: 1px solid #BCBCBC;
}
.smallNav a:last-child {
border-bottom: none;
}
.smallNav a:hover,
.smallNav a:focus {
color: #222;
background: #BABABA;
}
/* Menu toggle */
.menu-toggle {
padding: 1em;
position: absolute;
right: 1em;
top: 0.75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: white;
height: 3px;
width: 1.5em;
border-radius: 3px;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.menu-toggle:hover {
transform: scale(1.1);
}
i.icon {
margin-right: 0.5em !important;
font-size: 1.2em !important;
}
/* Change icons on hover */
nav a i.dark {
position: absolute;
left: 42px;
}
nav a i.dark {
opacity: 0;
transition: opacity .25s ease;
}
nav a:hover i.dark {
opacity: 1;
transition: opacity .25s ease;
}
nav a:hover i.outline {
opacity: 0;
transition: opacity .25s ease;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<header>
<div class="header-container">
<nav class="smallNav">
<ul>
<li><i class="icon home"></i>Home</li>
<li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li>
<li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li>
<li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li>
<li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>

Create an animation from left to the middle

I need to create an animation which will make a menu appear from the left side of the screen. This animation should be started on a click on a button.
The content of the menu should recover 55% of the width of the main page.
JSFiddle Demo
In the previous link you can the the menu and the button to move left. At the beginning the menu (with the "link" elements) should be hidden and the button .glyhicon should be at the very left of the page.
On click on this button the menu and the button should move to the right and recover 55% of the main page.
The problem is I don't know how to do this. (I managed to move the menu by changing the structure but I couldn't move the button.)
Here is my HTML code
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
<div id="icon-menu" class="test">
<button id="button_menu" class="js-menu menu" type="button">
<span class="glyphicon glyphicon-map-marker"></span>
</button>
</div>
</div>
CSS :
#left-menu {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#map-menu, #icon-menu {
display: inline-block;
vertical-align: middle;
}
.menu {
background: 0;
float: left;
margin: 2rem;
height: 2.7rem;
width: 3.5rem;
z-index: 2;
outline: 0;
padding: 0;
border: 0;
}
.menu_content{
width: 60%;
height: 100%;
background: #eaeaea;
position: fixed;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
padding-top: 6.2rem;
z-index: 1;
}
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
javascript :
var isActive = false;
$('.js-menu').on('click', function() {
if (isActive) {
$(this).removeClass('active');
$('#left_menu').removeClass('menu-open');
/*$('#button_menu').removeClass('move-right');
$('#button_menu').addClass('move-left');*/
} else {
$(this).addClass('active');
$('#left_menu').addClass('menu-open');
/*$('#button_menu').removeClass('move-left');
$('#button_menu').addClass('move-right');*/
}
isActive = !isActive;
});
Could you help me to adapt or redo the animation please ?

Here's a pure CSS solution without any javascript by making use of the :checked status of a hidden checkbox with display:none, the label for that checkbox should be outside the #left-menu element so it is possible to target it using ~:
JS Fiddle 1
#button_menu {
display: none;
}
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: fixed;
left: 5px;
top: 50%;
transition: all 1s;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -100%;
width: 55%;
top: 50%;
transition: all 1s;
}
#button_menu:checked + .glyphicon {
left: 55%;
transition: all 1s;
}
#button_menu:checked ~ #left-menu {
left: 0;
transition: all 1s;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<input type="checkbox" id="button_menu" class="js-menu">
<label for="button_menu" class="glyphicon"></label>
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
and here's a simple jQuery solution, where basically we have a variable as a triggering flag toggleFlag, if its value is true the left value is 0, while if the triggering flag value is false then the left value is -55% -which is the menu width as the op said it takes 55% of the screen-, then we animate the .left-menu dependign on the left value, and we need to negate the value of the triggering flag.
JS Fiddle 2
var menuIcon = $('.glyphicon'),
leftMenu = $('#left-menu'),
toggleFlag = true;
menuIcon.on('click', function() {
var leftVal = (toggleFlag) ? '0' : '-55%';
$('#left-menu').animate({'left': leftVal }, 700);
toggleFlag = !toggleFlag;
});
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: absolute;
right: -45px;
top: 5px;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -55%;
width: 55%;
top: 50%;
}
.slideIt {
color: red;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="left-menu">
<span class="glyphicon"></span>
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>

There a couple things with your example and fiddle, to start it helps to have jquery loaded in the fiddle to mess around.
Next isActive is not only not defined but unnecessary
if (isActive) {
should be replaced by
if ($(this).hasClass('active')) {
and
isActive = !isActive;
can be removed completely
next you becareful with your underscores and hyphens
$('#left-menu') != $('#left_menu')
Please also wrap it all in a document ready so it can be attached when the page loads
$(document).ready(function () {
// code
});
so with the fixes you can have something like:
$(document).ready(function () {
$('.js-menu').on('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#left-menu').removeClass('menu-open');
} else {
$(this).addClass('active');
$('#left-menu').addClass('menu-open');
}
});
});
Now to move your button, the problem is you're adding the transform to the <nav> in the menu-open class with :
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
So one way to fix that would be to also add it to your button
.menu-open #icon-menu {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
OR
.menu-open .active {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
I'll leave you to do the slide animation and so on.
There's a couple ways to make it better than this but with what you have for now this'll probably help you get a start on it? Maybe?

Add transition to centered navbar icon/logo/image on scrolldown

I've made a simple Navbar that's fixed to the top.
Originally when at the top, I would like the logo to be slightly larger, then on scroll down make it transition itself into the navbar.
When scrolling back to the top I would like the logo to come back out.
Any help or tips greatly appreciated!
Not scrolled
Scrolled down
Here's a codepen of what I have so far; the logo is oval shaped so I used batman as an example:
http://codepen.io/anon/pen/NRzWXk
HTML:
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li>
<li>Four
</li>
<li>Five
</li>
<li>Six</li>
</ul>
</div>
</nav>
CSS:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}

Hope you are looking for something like this
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll >= 300) {
//clearHeader, not clearheader - caps H
$("#nav_wrapper").addClass("scrolled");
}
else{
$("#nav_wrapper").removeClass("scrolled");
}
});
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 1000px;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.logo {
padding: 50px;
transition: all ease-in .25s;
margin-bottom: -30px
}
.logo img{
transform : scale(3);
transition: all ease-in .25s;
}
.scrolled .logo{
padding: 15px;
}
.scrolled .logo img{
transform : scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li><li>Two
</li><li>Three
</li><li class="logo"><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li><li>Four
</li><li>Five
</li><li>Six</li>
</ul>
</div>
</nav>
</body>
</html>

I'm not sure how to do it with pure CSS but since you tagged JQuery I'm going to go with that. The updated codepen is here: http://codepen.io/anon/pen/QyggBJ
Basically you add a position of absolute to your image and place it in the center. Then use jquery to detect scrolling and change position between static and absolute.
CSS:
img{
position:absolute;
right:48%;
}
Jquery:
$(window).scroll(function (e){
var scrollTop = $('body').scrollTop();
var topDistance = $('#nav_wrapper').offset().top;
if (topDistance == 0) {
$('img').css('position','absolute');
}else{
$('img').css('position','static');
}
});

try the jquery scroll() method
$("window").scroll(function() {
$("logo").animate(params);});
for params put in what 2d tranform you want like scale(2,3) etc.

Heres my take on it. Used jQuery for the toggling of the class:
http://codepen.io/banned/pen/GoEvEY
HTML:
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<a class="image" href="#"></a>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</nav>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 800px;
}
nav {
background-color: #704e46;
position: fixed;
width: 100%;
}
#nav_wrapper {
width: 100%;
text-align: center;
display: block;
}
nav ul {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
Css:
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.image {
height: 50px;
width: 80px;
background: url("http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908") no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
transition: 0.5s;
transform: scale(2);
margin: 30px 30px 0px;
}
.image.scrolled {
transition: 0.5s;
transform: scale(1);
margin: 0 10px;
}
jQuery:
$(window).scroll(function() {
if ($(window).scrollTop() > 70) {
if (!$(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
} else if ($(window).scrollTop() < 70) {
if ($(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
}
});

CSS + jQuery toggle menu

I am working on a menu using jQuery + CSS3.
I have an up arrow on the right side of the menu and when clicked the menu slides up and the image switches to a down arrow.
The only problem is that if you click the down arrow, it does't slide back down, even though I've provided a somewhat legit piece of code in order for it to work.
I am new to jquery so any help would be very much appreciated!
HTML:
<nav id="tfc-new-nav">
<div class="wrapper">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Shopping Cart</li>
<li>My Account</li>
</ul>
</div>
<div class="hide-menu menu-active"></div>
</nav>​
CSS:
.wrapper {
display: block;
height: 100%;
width: 1000px;
position: relative;
margin: 0 auto;
}
#tfc-new-nav {
display: block;
height: 45px;
width: 100%;
background: #808E91;
position: relative;
top: 50px;
}
#tfc-new-nav ul {
list-style: none;
}
#tfc-new-nav ul li {
display: block;
height: 45px;
width: 10%;
float: left;
text-align: center;
line-height: 45px;
}
#tfc-new-nav ul li a {
display: block;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: 'Felix Titling', serif;
cursor: pointer;
-webkit-transition: background .3s ease-in;
-moz-transition: background .3s ease-in;
-ms-transition: background .3s ease-in;
-o-transition: background .3s ease-in;
transition: background .3s ease-in;
}
#tfc-new-nav ul li a:hover {
background: #50798D;
}
#tfc-new-nav .hide-menu {
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
}
#tfc-new-nav .hide-menu.menu-active {
display: block;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/61/Black_Up_Arrow.png');
background-size: 100% 100%;
height: 7px;
width: 7px;
}
#tfc-new-nav .hide-menu.menu-hidden {
display: block;
background-image: url('http://www.wpclipart.com/signs_symbol/BW/direction_arrows/down_arrow.png');
background-size: 100% 100%;
height: 7px;
width: 7px;
}​
JavaScript:
$(document).ready(function() {
$("#tfc-new-nav .hide-menu.menu-active").click(function() {
$("#tfc-new-nav").animate({
top: "30px"
});
$(this).removeClass("menu-active");
$(this).addClass("menu-hidden");
$(this).animate({
top: "35px"
});
});
$("#tfc-new-nav .hide-menu.menu-hidden").click(function() {
$("#tfc-new-nav").animate({
top: "95px"
});
$(this).removeClass("menu-hidden");
$(this).addClass("menu-active");
$(this).animate({
top: "20px"
});
});
});​
LIVE DEMO

You should delegate your events, like
$("#tfc-new-nav").on("click", ".menu-hidden", function() {
...
});
DEMO

Use .live() instead .click()
Example:
$("#tfc-new-nav .hide-menu.menu-hidden").live("click", function() {
// Do stuff here
}
This takes into account updated manipulation of the DOM, tested and worked

You should be able to call $.slideToggle() to handle this and minify your code.
Here is a link to the manual entry: http://api.jquery.com/slideToggle/
This will animate and set display:none when the anitmation is complete.