We Keep Coding

About JQuery conditional statement

if press the button, id #footer gets padding-top as much as class .box's outerHeight. When I press the button again, #footer's padding-top must be "0". but now #footer's padding-top doesn't change.
I tried many codes that ("padding-top",null), ("padding-top",0), $("button").toggle(function(){}); etc..
$(document).ready(function() {
$("button").click(function() {
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", boxHeight);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
</ul>
</div>
</div>
</div>
</footer>

You could check if the .box is visible, and if not set the padding-top to 0;
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
Demo
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
</ul>
</div>
</div>
</div>
</footer>

You need to track if your footer is open or not in order to achieve what you are trying to do.
Something like :
$(document).ready(function(){
let footerOpen = false;
$("button").click(function(){
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
if(!footerOpen) {
$("#footer").css("padding-top",boxHeight);
footerOpen = true;
} else {
$("#footer").css("padding-top", 0);
footerOpen = false;
}
});
});
Here is a working codepen: https://codepen.io/antonbks/pen/jONMNLB

My menu does not display a hamburger icon anymore

After changing some styles, the hamburger icon for mobile phones does not display anymore, how can I bring it back? also what would be the best way to add a little bit more white space above and under the menu but keep the position the same?
HTML:
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS:
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
JS:
$(document).ready(function() {
"use strict";
var myNav = {
init: function() {
this.cacheDOM();
this.browserWidth();
this.bindEvents();
},
cacheDOM: function() {
this.navBars = $(".navBars");
this.xBxHack = $("#xBxHack");
this.navMenu = $("#menu");
},
browserWidth: function() {
$(window).resize(this.bindEvents.bind(this));
},
bindEvents: function() {
var width = window.innerWidth;
if (width < 600) {
this.navBars.click(this.animate.bind(this));
this.navMenu.hide();
this.xBxHack[0].checked = false;
} else {
this.resetNav();
}
},
animate: function(e) {
var checkbox = this.xBxHack[0];
!checkbox.checked ?
this.navMenu.slideDown() :
this.navMenu.slideUp();
},
resetNav: function() {
this.navMenu.show();
}
};
myNav.init();
});
In this jsfiddle you can see that the icon does not appear when the screen is small: https://jsfiddle.net/quehf3x9/

Firstly make sure that you're loading the Font Awesome library. That wasn't being loaded in the JS Fiddle example. So I included a link to a CDN.
Secondly, add a width, height and background color to the CSS for the navbars:
.mainNav .navBars {
width: 30px;
height: 30px;
color: #111;
}
See my updated JS Fiddle for a working example.

You have two problems with your fiddle above. The first is that you did not include the font awesome library. The code does not know what to do with the fa fa-bars classes. To include an external library in jsfiddle:
Find a CDN where the file is hosted
Copy the path to the file
Paste it in the left sidebar in the External Resources section.
Select the + icon to add the resource to the fiddle.
Once the file is loaded, you can see from the developer tools (open the tools by selecting F12) that the class is applied but the icon color is white. You'll want to add some CSS to color the icon such as:
label i {
color: #333;
}
I've made these two changes and updated your fiddle here.

There are two things-
First one you are missing to include Font Awesome library
Secondly the color of icon is white. So you won't be able to see it even if you include the library, changing the color will do the trick <i class="fa fa-bars" style="color:black;"></i>
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars" style="color:black;"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>

css, lines dashing vertically through bullets

This may sound stupid, But I am on edge here. Does anyone knows how to do this in css or javascript? (preferably css)

You could try this:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
.section_header {
background-color: #7e9489;
border-radius: 20px;
width: 200px;
height: 20px;
color: #fff;
text-align: center;
padding: 10px;
line-height: 20px;
}
.section_content {
margin: 0px;
padding: 0px;
display: block;
border-left: solid 2px #7e9489;
margin-left: 99px;
padding-top: 10px;
}
.section_content > li {
display: block;
position: relative;
line-height: 40px;
}
.section_content > li::before {
position: relative;
display: inline-block;
vertical-align: middle;
content: '';
width: 12px;
height: 12px;
border-radius: 10px;
background-color: #7e9489;
margin-left: -7px;
margin-right: 20px;
z-index: 10;
}
.section_content > li > span {
display: inline-block;
vertical-align: middle;
}
.section_content > li:last-child::after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: -2px;
width: 2px;
height: 50%;
background-color: white;
z-index: 1;
}
<div class="section_header">OCT 5, 2016</div>
<ul class="section_content">
<li><span>Segment 1</span></li>
<li><span>Segment 2</span></li>
<li><span>Segment 3</span></li>
<li><span>Segment 4</span></li>
</ul>

Quick and dirty:-
.date {
border-radius: 30px;
background-color: #7C9288;
width: 200px;
text-align: center;
padding: 10px;
color: #fff;
}
.box {
border-left: 2px solid #7C9288;
margin-left: 110px;
margin-top: -16px;
padding-top: 20px;
}
li {
color: #7C9288;
list-style-type:none;
}
li:before{
content:'\00b7';
font-size:100px;
line-height:24px;
vertical-align:middle;
}
ul {
margin-left: -57px;
}
<div class="date">Today</div>
<div class="box">
<ul>
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>

Why is nav bar sliding down skinny and then widening?

When you hover over a nav li item on my website, it should slide down the nav ul ul item, but when it slides down for some reason it is skinny, then widens after. Please look at my JSFiddle and help me out :D
JSFiddle Demo
HTML:
<body>
<header>
<nav>
<ul>
<li>Home
<ul>
<li>About Me</li>
</ul>
</li>
<li>Purposeful Living
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Academic Excellence
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Ethical Responsibility
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
Javascript/Jquery:
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
CSS:
` #import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}

During the animation overflow is set to hidden. When animation completes the inline overflow style is removed.
You have negative margin set on sub menu <li> so while the animation is in progress the part that is outside the parent is not visible.
Suggest you remove the negative margin and set the <ul> to left:0

Horizontal movable menu with a click

http://i.stack.imgur.com/VPqxq.png
< ITEM2 ITEM3 ITEM4 ITEM5 ITEM6 >
This is what i am trying to achieve, by clicking the right arrow it should load the remaining menu item and same as left arrow but to left.
I am using asp.net! but can i achieve this by css and J Query or java script? Can anyone point out website that uses this ?

Here is a JS Fiddle that should help with what you are trying to build.
A navigation menu that animates left or right.
http://jsfiddle.net/bYY39/
HTML
<div class='navigation'>
<button type='button' class="left-arrow"><p><</p></button>
<ul>
<li class='item1'>menu item1</li>
<li>menu item2</li>
<li>menu item3</li>
<li>menu item4</li>
<li>menu item5</li>
<li>menu item6</li>
</ul>
<button type='button' class='right-arrow'><p>></p></button>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
button {
border:none;
cursor: pointer;
}
.navigation {
width: 1000px;
}
.left-arrow {
background: #3d69b9;
float: left;
height: 60px;
text-align: center;
width: 60px;
}
.left-arrow:hover {
background: #69c;
}
.left-arrow p {
color: #fff;
font-size: 18px;
}
.right-arrow {
background: #3d69b9;
border-left: 1px solid #69c;
float: left;
height: 60px;
text-align: center;
width: 60px;
}
.right-arrow:hover {
background: #69c;
}
.right-arrow p {
color: #fff;
font-size: 18px;
}
ul {
float:left;
font-size: 0;
overflow: hidden;
width: 815px;
white-space: nowrap;
}
li {
border-left: 1px solid #69c;
color: #fff;
display: inline-block;
font-size: 16px;
height: 60px;
list-style: none;
text-align: center;
width: 162px;
}
li a {
background: #3d69b9;
color: #fff;
display: block;
height: 100%;
padding-top: 18px;
text-decoration: none;
width: 100%
}
li a:hover {
background: #69c;
}
JS
$('.left-arrow').on({click: function() {
$('.item1').animate({marginLeft:'0px'}, 500);
}
});
$('.right-arrow').on({click: function() {
$('.item1').animate({marginLeft:'-163px'}, 500);
}
});