We Keep Coding

How to highlight the input button by clicking to a button?

I can't code jquery javascript therefore i have no idea how to highlight (border or background change) the submit button for a few seconds. I tried some of the scripts that have been shared on this platform but i wasn't lucky. What code do you suggest?
The button i need to highlight is submitbtn
and the button that needs to highlight it by click is eventbtn
I appreciate the help
Thanks
Edited: I Want to add class to the submit button once the button is clicked
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
h

The key is to remove the highlighting after a few seconds, this can be done with setTimeout() function:
function highlight(id)
{
clearTimeout(highlight.timer);
const el = document.getElementById(id);
//highlight the button
el.classList.add("highlighted");
//remove highlight after 3sec
highlight.timer = setTimeout(() => el.classList.remove("highlighted"), 3000);
}
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
/* added */
.highlighted
{
box-shadow: 0 0 2em 1px red;
}
.wpcf7-submit {
transition: box-shadow 0.2s;
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight" onclick="highlight('form-submit')"> <<<<<<<<<<< </button>
</div>

Do you mean highlight submitbtn when clicking eventbtn?
Add a js to handle the click event, and then add highlight class to submitbtn.
var eventbtn = document.getElementById('highlight');
var submitbtn = document.getElementsByClassName('submitbtn')[0];
eventbtn.addEventListener('mousedown', function () {
submitbtn.classList.add('highlight');
});
eventbtn.addEventListener('mouseup', function () {
submitbtn.classList.remove('highlight');
});
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
.highlight {
background-color: #8beccc;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>

Simply add a class to the element you want to highlight. Then remove the class with the setTimeout function.
Add a class in CSS with a high specificity that contains all visible changes you want to apply. It does not matter what it is. It can be background, border, box-shadow...
In JS use an eventListener to listen to click-events on the button.
Apply the class you have specified in CSS with classList.add().
Add a setTimeout function to remove the class after a specified time with classList.remove()
Vanilla JavaScript:
// button element that will be clicked
var button = document.querySelector('button[class="eventbtn"]'),
// element that should be highlighted
input = document.querySelector('#form-submit'),
// timer in ms
timer = 2000;
// eventListener to execute the script on button click
button.addEventListener('click', function() {
// adds a class to apply CSS changes for the highlighting
input.classList.add('highlight');
// timeout function
setTimeout(function() {
// removes the class after the timer has been reached
input.classList.remove('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
jQuery:
// button element that will be clicked
var $button = $('button[class="eventbtn"]'),
// element that should be highlighted
$input = $('#form-submit'),
// timer in ms
timer = 2000;
//Eventlistener looking for a click event
$button.click(function() {
//adds a class for highlighting
$input.addClass('highlight');
//timeout function
setTimeout(function() {
//removes class for highlighting
$input.removeClass('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>

I tryed to answer with pure css by using animation and keyframes. My attempt only works the first time and once everytime after you change the target.
(Note that I'm not used to these properties so there may be a better way to do this)
#form-submit{
background-color: transparent;
}
#keyframes changeBackground {
0% {
background-color: orange;
}
99.999% {
background-color: orange;
}
100% {
background-color: transparent;
}
}
#form-submit:target{
animation: changeBackground 1s;
}
<input type="submit" value="submit" id="form-submit" />
highlight
<br>
change target

Click open menu click out of the div to close

I have a menu and I want it to open when I click this text from a drop down menu and I want it to close when the mouse clicks anywhere else.
var ignoreClickOnMeElement = document.getElementById('status_menu');
document.addEventListener('click', function(event) {
var isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
if (!isClickInsideElement) {
status_menu.classList.remove("status-menu");
status_menu.classList.add("nostatus-menu");
}
});
.avatar {
height: 7vh;
width: 7vh;
background: url('../images/blankprofilepicture.png');
background-size: cover;
border-radius: 100%;
}
.avatar img {
width: 7vh;
border-radius: 100%;
}
.dropdown {
z-index: 1;
height: 7vh;
width: 7vh;
float: right;
margin-top: 1vh;
margin-right: 3vw;
position: relative;
}
.avatar-dropdown {
display: none;
position: absolute;
padding-top: 0.5%;
}
.avatar-dropdown p {
cursor: pointer;
padding: 0.5vw 1vw;
font-family: "Ubuntu", sans-serif;
color: black;
text-decoration: none;
display: block;
font-size: 1em;
text-align: center;
background-color: white;
margin: 0;
}
.avatar-dropdown p:hover {
background-color: #b5b5b5;
}
.dropdown:hover .avatar-dropdown {
display: block;
}
<header id="header">
<h1>DEVIE</h1>
<div class="dropdown" id="dropdown">
<div class="avatar"></div>
<div class="online-offline"></div>
<div id="status_menu">
<div id="online-div">
</div>
<div id="offline-div">
</div>
</div>
<div class="avatar-dropdown" id="avatar-dropdown">
<p onclick="status_menu();">Change status</p>
<p onclick="window.location.href='profile.php';">Profile</p>
<p onclick="window.location.href='friends.php';">Friends</p>
<p onclick="logout();">Logout</p>
</div>
</div>
</header>
But couldn't make it work and make it remove the Event listener once the div is closed.
Please help, thanks!

jQuery change containing element's width with slide

I'd like to have a button group with buttons where when the user hovers over them, more content slides in within the button using jQuery's .show("slide", {direction: 'right'}). As you can see in the Fiddle, I have it partly working, but when hovering over the button, the button immediately grows to account for the space where the text will slide to when it's done. Is there any way to have the width of the button follow the width of the sliding element inside it?
Fiddle: https://jsfiddle.net/k7ypusdq/1/
$(document).ready(function() {
$("#new-hidden").hide();
$("#new-button").hover(function() {
$("#new-hidden").show("slide", {
direction: 'right'
}, 300);
}, function() {
$("#new-hidden").hide("slide", {
direction: 'right'
});
});
});
#import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
background-color: #339999;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.big-button {}
.button-group {
float: right;
}
.button-group a,
button {
background-color: #9fc;
color: #acc;
font-family: 'Passion One', cursive;
font-size: 24pt;
padding: 10px;
border: 1px solid #3a8;
border-bottom-width: 4px;
float: left;
width: auto;
}
.button-group button:first-child {
border-radius: 10px 0px 0px 10px;
}
.button-group button:last-child {
border-radius: 0px 10px 10px 0px;
}
.button-group:after {
content: "";
clear: both;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<html>
<body>
<div class="button-group">
<button id="new-button">
<div style="float: left">Hello!</div>
<span id="new-hidden" style="overflow: hidden;">
I'm here too!
</span>
</button>
<button>Middle</button>
<button>Other Stuff</button>
</div>
</body>
</html>

You could simplify it by just animating the width and preventing text wrap:
<html>
<body>
<div class="button-group">
<button id="new-button" style="text-align:left;text-wrap:none;overflow:hidden;width:100px;height:60px;line-height:40px">
Hello! I'm here too
</button>
<button>Middle</button>
<button>Other Stuff</button>
</div>
</body>
</html>
$(document).ready(function(){
$("#new-hidden").hide();
$("#new-button").hover(function(){
$("#new-button").animate({"width": 250}, 300);
}, function(){
$("#new-button").animate({"width": 100}, 300);
});
});
https://jsfiddle.net/k7ypusdq/42/

If you are looking for a dynamic approach that will get the width of any text you add without having to set a fixed width, you can do the following.
$(document).ready(function() {
// Store each hidden elements width within a data-width attribute.
// Set hidden elements width to zero.
$('.btn-with-text .hidden').each(function() {
$(this).data('width', $(this).outerWidth());
$(this).css({'width': 0});
})
$('.btn-with-text').hover(function() {
var hiddenBtn = $(this).find('.hidden');
// On HoverIn apply and animate the stored data-width and apply left margin
hiddenBtn.animate({
marginLeft: 10,
width: hiddenBtn.data('width')
}, 300);
}, function() {
// On HoverOut set width and margin back to zero.
$(this).find('.hidden').animate({
marginLeft: 0,
width: 0
}, 300);
});
});
#import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
background-color: #339999;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.big-button {}
.button-group {
float: right;
}
.button-group a,
button {
background-color: #9fc;
color: #acc;
font-family: 'Passion One', cursive;
font-size: 24pt;
padding: 10px;
border: 1px solid #3a8;
border-bottom-width: 4px;
float: left;
width: auto;
}
.button-group button:first-child {
border-radius: 10px 0px 0px 10px;
}
.button-group button:last-child {
border-radius: 0px 10px 10px 0px;
}
.button-group:after {
content: "";
clear: both;
display: table;
}
/*
Add this CSS
*/
button {
overflow: hidden;
position: relative;
}
button .not-hidden {
display: inline-block;
float: left;
}
button .hidden {
overflow: hidden;
white-space: nowrap;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div class="button-group">
<button class="button btn-with-text">
<span class="not-hidden">Hello!</span>
<span class="hidden">
I'm here too!
</span>
</button>
<button class="button btn-with-text">
<span class="not-hidden">Middle</span>
<span class="hidden">
I'm Another One!
</span>
</button>
<button class="button">Other Stuff</button>
</div>

dynamic html element issue

when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>

You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()

jQuery animation on negative margin - unexpected results

Project Outline
I am building a web page with a slide out menu, which works as expected and the display stays the way I expect it would during the animations to slide the menu in/out.
This is working correctly on the following browsers;
Windows
Internet Explorer (11.0.9600.17239)
Firefox (32.0)
Opera (17.12)
Chrome (38.0.2125.44 beta-m)
Mac
Opera (12.15)
FireFox (32.0)
Chrome (36.0.1985.125)
Safari (6.0.5)
iOS
Chrome (37.0.2062.52)
Safari (Iphone 5s - can't find version number)
Problem Browser
The problem seems to only be with Safari on windows (5.1.7);
The Issue
When you click to slide out the menu, it appears to reload and slide in from the right, when it is off-page to the left, so I'd assume it should come in from the left like every other browser I've tried!
When the menu is out and you press for it to slide back in, it seems to slide off to the left and then slide back out from the right and all the way off the left again.
Related jsFiddle link and code
(Link at the end of post)
JS
$(document).ready(function () {
// Set menu_out var, for clicks to activate slideIn/Out
var menu_out = false;
// Works if menu is in OR out;
$(".top_button").click(function () {
menu_move();
});
$('#menu a').click(function () {
menu_move();
});
// Only work if menu if out;
$('#content').click(function () {
if (menu_out == true) {
menu_move();
}
});
function menu_move() {
if (menu_out) {
$('#menu').animate({
'margin-left': "-71%"
}, 300, function () {
menu_out = false;
});
}
else {
$('#menu').animate({
'margin-left': "0"
}, 300, function () {
menu_out = true;
});
}
}
});
CSS
* {
font-family:"Helvetica Neu", "Helvetica", sans-serif;
}
html, body {
background: #c3c3c3;
font-weight: 300;
margin: 0;
}
#container {
position: relative;
background: black;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
#menu {
background: #000;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
color: white;
margin-left: -71%;
float: left;
}
.menu_item {
width: 100%;
border-bottom: solid 1px #333;
background: #222222;
height: 40px;
font-size: 14px;
color: #fff;
}
.menu_item a {
font-size: 14px;
font-weight: 400;
display: block;
color: white;
text-decoration: none;
padding: 12px 0 0 15px;
}
.menu_head {
height: 47px;
}
.menu_head h1 {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 14px 0 15px 10px;
margin: 0;
background: #000;
border-bottom: solid 1px #333;
}
#content {
color: white;
overflow: hidden;
}
.top_button {
border: none;
background: black;
position: absolute;
top: 11px;
left: 18px;
}
.button_strips {
width: 21px;
height: 3px;
margin: 3px 5px;
background: white;
}
.top {
height: 46px;
border-bottom: solid 1px #333;
position: relative;
}
.display {
text-align: right;
white-space: nowrap
}
p {
white-space: nowrap;
}
HTML
<div id="container">
<div id="menu">
<div class="menu_head"><h1>MENU</h1></div>
<div class="menu_item">Link 1</div>
<div class="menu_item">Link 2</div>
<div class="menu_item">Link 3</div>
<div class="menu_item">Link 4</div>
<div class="menu_item">Link 5</div>
</div>
<div id="content">
<div class="top"> <a class="top_button">
<div class="button_strips"></div>
<div class="button_strips"></div>
<div class="button_strips"></div>
</a>
</div>
<div class="display">
<!-- Add text when needed /-->
</div>
</div>
</div>
http://jsfiddle.net/L7zs39dj/

Always try to use preventDefault when using function event with link:
$('#menu a').click(function (e) {
e.preventDefault();
menu_move();
});