We Keep Coding

Step Progress Bar - Alternate <li> text top and bottom [duplicate]

This question already has answers here:
How do I select every other div class element using just CSS (no js)
(4 answers)
Closed 1 year ago.
I'm trying to build a progressbar by using a li element.
<div class="stepprogresscontainer" id="stepprogressbar">
<div class="frontdiv" style="display: block; z-index: 5; position: relative;">
<ul class="stepprogressbar">
<li id="li-s-1" class="activeli">Schaden angelegt</li>
<li id="li-s-2" onclick="activeli2()">xxxx1</li>
<li id="li-s-3" onclick="activeli3()">xxxx1</li>
<li id="li-s-4" onclick="activeli4()">xxxx1</li>
<li id="li-s-5" onclick="activeli5()">xxxx1</li>
<li id="li-s-6" onclick="activeli6()">xxxx1</li>
<li id="li-s-7" onclick="activeli7()">xxxx1</li>
</ul>
</div>
<div style="position:relative; top: 20px;" class="behinddiv">
<div style="background-color: rgb(36, 36, 36); height: 3px; display: block; margin-left: 8%; margin-right: 8%;"></div>
<div id="coverline" style="transition: width 1s ease; background-color: #2ac570; height: 3px; display: block; margin-left: 8%; margin-right: 8%; margin-top:-3px; width: 0%;"></div>
<div id="progressline" style="background-color: #2ac570; height: 3px; display: block; margin-left: 8%; margin-right: 8%; margin-top:-3px; width: 0%;"></div>
</div>
CSS:
.stepprogresscontainer {
width: 100%;
}
.stepprogressbar li {
list-style-type: none;
float: left;
width: 14%;
position: relative;
text-align: center;
color: rgb(187, 68, 68);
font-family: witneyfont;
font-weight: bold;
font-size: 12px;
}
.stepprogressbar li:before {
content: '';
width: 25px;
height: 25px;
line-height: 25px;
border: 1.5px solid rgb(187, 68, 68);
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: rgb(36, 36, 36);
cursor: pointer;
}
I am trying to achieve now that every other li element text is on top of the :before pseudo element. Right now everything is below the before element. I need to alter between so the text doesnt overlap on window resize.
currentlty it looks like that:
i need something like that:
Is there any easy way I didn't consider yet?
Thanks!

Put title on each elements :before and :after with content: attr(attribute-name). Then on even elements hide :after, on odd elements hide :before
ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
}
ul li {
border: 1px solid red;
border-radius: 50%;
width: 20px;
height: 20px;
float: left;
position: relative;
margin: 10px 15px;
background-color: white;
z-index: 6;
}
ul li:before,
ul li:after {
content: attr(data-text);
display: inline;
font-size: 12px;
position: absolute;
left: 0;
}
ul li:before {
top: -15px;
}
ul li:after {
bottom: -15px;
}
ul li:nth-child(odd):before {
display: none;
}
ul li:nth-child(even):after {
display: none;
}
ul:before {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: blue;
position: absolute;
top: 20px;
z-index: 3;
}
<ul>
<li data-text="xxx1"></li>
<li data-text="xxx2"></li>
<li data-text="xxx3"></li>
<li data-text="xxx4"></li>
<li data-text="xxx5"></li>
</ul>

Jquery hide dropdown when mouse leave

I'm creating a navigation bar with dropdown as follows.
Can I make it so when my pointer leave the navbar menu and dropdown, the dropdown get hidden? I tried hover, mouseenter, and mouseleave but since I don't really understand the difference and I'm new in this I got stuck.
Any help appreciated. :)
$(".navbar-menu-each, .submenu-dropdown").hover(function() {
var menuChoice = $(this).val();
var menuPosition = $(this).find("a").position();
var dropdownPosition = menuPosition.left;
switch(menuChoice) {
case 0:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>New Employee Registration</li><li class='submenu-dropdown-each submenu-selected'>Employee List</li><li class='submenu-dropdown-each'>Employee Rehire</li><li class='submenu-dropdown-each'>Employee Without Bank Account</li><li class='submenu-dropdown-each'>Employee Without PPh 21</li>");
break;
case 1:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Memo Template</li><li class='submenu-dropdown-each'>Print Memo</li>");
break;
case 2:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Download & Upload</li><li class='submenu-dropdown-each'>Send Email</li>");
break;
case 3:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Approvals</li><li class='submenu-dropdown-each'>Employment Status Undo</li>");
break;
case 4:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Report</li><li class='submenu-dropdown-each'>Headcount Report</li><li class='submenu-dropdown-each'>Employee Recapitulation Report</li>");
break;
}
var dropdownWidth = $(".submenu-dropdown").width();
var rightEdge = $(document).width();
if ((dropdownPosition + dropdownWidth) >= (rightEdge - 16)) {
var adjustRight = rightEdge - dropdownWidth - 16;
$(".submenu-dropdown").css({"left": adjustRight + "px"});
}
else {
if (dropdownPosition <= 16) {
$(".submenu-dropdown").css({"left": "16px"});
}
else {
$(".submenu-dropdown").css({"left": dropdownPosition + "px"});
}
}
$(".submenu-dropdown").show();
});
$(".navbar-menu-each").click(function() {
$(".navbar-menu-each").removeClass("menu-on");
$(this).addClass("menu-on");
});
.navbar {
display: block;
width: 100%;
position: relative;
margin-bottom: 240px;
}
.navbar-logo-wrapper {
position: absolute;
height: 60px;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
.navbar-logo-wrapper img {
width: 32px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar-top {
width: 100%;
min-height: 60px;
box-shadow: 0px 1px 8px 0 rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 24px;
box-sizing: border-box;
}
.navbar-top-left {
}
.burger-btn-wrapper {
display: inline-block;
text-align: center;
margin: 0 16px 0 0;
}
.burger-btn-wrapper i {
font-size: 16px;
color: #333;
line-height: 60px;
transform: translateY(1px);
}
.module-name {
height: 60px;
line-height: 60px;
text-transform: uppercase;
display: inline-block;
font-size: 13px;
font-weight: 700;
color: #333;
}
.navbar-top-right {
}
.navbar-top-middle {
height: 60px;
text-align: center;
position: relative;
line-height: 0;
}
.modules-icon {
vertical-align: middle;
display: inline-block;
width: 60px;
text-align: center;
}
.modules-icon i {
font-size: 16px;
color: #333;
line-height: 60px;
}
.navbar-profile {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.navbar-profile img {
vertical-align: top;
}
.profpic-wrapper {
display: inline-block;
vertical-align: middle;
width: 60px;
height: 60px;
}
.navbar-profpic {
width: 40px;
height: 40px;
background-color: #00c983;
border-radius: 40px;
position: relative;
margin-left: 10px;
margin-top: 10px;
}
.profile-initial {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.profile-name {
display: inline-block;
vertical-align: middle;
font-size: 13px;
}
.profile-dropdown {
vertical-align: middle;
display: inline-block;
margin-left: 8px;
}
.navbar-wrapper {
display: inline-block;
width: 100%;
}
.navbar-top-middle img {
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar-menu {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.navbar-menu-list {
width: 750px;
list-style-type: none;
margin: 0;
padding: 15px 0;
cursor: pointer;
margin-left: 0;
}
.navbar-menu-each {
padding-left: 32px;
padding-right: 32px;
display: inline-block;
}
.navbar-menu-each:first-child {
padding-left: 24px;
}
.navbar-menu-each a {
color: #333;
font-size: 13px;
text-decoration: none;
}
.menu-on a {
font-weight: 700;
color: #00c983;
}
.navbar-page-name {
display: block;
font-size: 22px;
height: 60px;
line-height: 60px;
border-top: solid 0.5px #DEF5ED;
border-bottom: solid 0.5px #DEF5ED;
background-color: #F0FBF7;
color: #333;
padding-left: 24px;
}
.navbar-menu::-webkit-scrollbar {
height: 0;
}
.navbar-menu::-webkit-scrollbar-thumb {
background-color: transparent;
}
.submenu-dropdown {
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
position: absolute;
cursor: pointer;
top: 106px;
}
.submenu-dropdown-each {
display: block;
line-height: 48px;
font-size: 13px;
color: #333;
width: auto;
padding: 0 32px 0 24px;
}
.submenu-dropdown-each:hover {
background: #f8f8f8;
}
.submenu-selected {
font-weight: 700;
color: #00c983;
}
#media (max-width: 575px) {
.module-name {
display: none;
}
.profile-name {
display: none;
}
.modules-icon {
display: none;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="navbar">
<div class="navbar-logo-wrapper">
<img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
</div>
<div class="navbar-top">
<div class="navbar-top-left">
<div class="burger-btn-wrapper">
<i class="fas fa-bars"></i>
</div>
<div class="module-name">Employee</div>
</div>
<div class="navbar-top-right">
<div class="modules-icon"><i class="fas fa-th"></i></div>
<div class="navbar-profile">
<div class="profpic-wrapper">
<div class="navbar-profpic">
<div class="profile-initial">DJ</div>
</div>
</div>
<div class="profile-name">Dennis Jonathan</div>
<div class="profile-dropdown"><i class="fas fa-chevron-down"></i></div>
</div>
</div>
</div>
<div class="navbar-menu">
<ul class="navbar-menu-list">
<li class="navbar-menu-each menu-on" value=0>Employee Directory</li>
<li class="navbar-menu-each" value=1>Memo</li>
<li class="navbar-menu-each" value=2>Bulk Update</li>
<li class="navbar-menu-each" value=3>Approvals and Undo</li>
<li class="navbar-menu-each" value=4>Report</li>
</ul>
</div>
<div class="navbar-page-name">
Employee List
</div>
</div>
<ul class="submenu-dropdown">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

It seems to me you are overcomplicating a simple process.
hover functionality can quite easily be replicated using only CSS.
.navbar-menu-list {
width: 750px;
list-style-type: none;
margin: 0;
padding: 15px 0;
cursor: pointer;
margin-left: 0;
}
.navbar-menu-each {
padding-left: 32px;
padding-right: 32px;
display: inline-block;
position:relative;
}
.navbar-menu-each a {
color: #333;
font-size: 13px;
text-decoration: none;
}
.navbar-menu-each:hover a {
font-weight: 700;
color: #00c983;
}
.navbar-page-name {
display: block;
font-size: 22px;
height: 60px;
line-height: 60px;
border-top: solid 0.5px #DEF5ED;
border-bottom: solid 0.5px #DEF5ED;
background-color: #F0FBF7;
color: #333;
padding-left: 24px;
}
.submenu-dropdown {
display: none;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
position: absolute;
cursor: pointer;
top: 20px;
left:0;
}
.navbar-menu-each:hover > .submenu-dropdown,
.submenu-dropdown:hover{
display: block;
}
.submenu-dropdown-each {
display: block;
line-height: 48px;
font-size: 13px;
color: #333;
width: auto;
padding: 0 32px 0 24px;
}
.submenu-dropdown-each:hover {
background: #f8f8f8;
}
.submenu-selected {
font-weight: 700;
color: #00c983;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="navbar-menu">
<ul class="navbar-menu-list">
<li class="navbar-menu-each">
Employee Directory
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>New Employee Registration</li>
<li class='submenu-dropdown-each submenu-selected'>Employee List</li>
<li class='submenu-dropdown-each'>Employee Rehire</li>
<li class='submenu-dropdown-each'>Employee Without Bank Account</li>
<li class='submenu-dropdown-each'>Employee Without PPh 21</li>
</ul>
</li>
<li class="navbar-menu-each">
Memo
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Memo Template</li>
<li class='submenu-dropdown-each'>Print Memo</li>
</ul>
</li>
<li class="navbar-menu-each">Bulk Update
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Download & Upload</li>
<li class='submenu-dropdown-each'>Send Email</li>
</ul>
</li>
<li class="navbar-menu-each">
Approvals and Undo
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Employee Data Approvals</li>
<li class='submenu-dropdown-each'>Employment Status Undo</li>
</ul>
</li>
<li class="navbar-menu-each">
Report
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Employee Data Report</li>
<li class='submenu-dropdown-each'>Headcount Report</li>
<li class='submenu-dropdown-each'>Employee Recapitulation Report</li>
</ul>
</li>
</ul>
</div>

adding new and close button to sortable grid

ive been strugling to make add and close button to work but i dont know how and ive been trying to look it up but i didnt find anything, can anyone please help or point me in the right direction
these are my code :
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
handle: 'span'
});
$('.connected').sortable({
connectWith: '.connected'
});
$('.exclude').sortable({
items: ':not(.disabled)'
});
});
<style>h1,
h2 {
text-align: center;
font-weight: normal;
}
#features {
margin: auto;
width: 460px;
font-size: 0.9em;
}
.connected,
.sortable,
.exclude,
.handles {
margin: auto;
padding: 0;
width: 510px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.connected li,
.sortable li,
.exclude li,
.handles li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.handles span {
cursor: move;
}
li.disabled {
opacity: 0.5;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 100px;
height: 100px;
text-align: center;
}
li.highlight {
background: #FEE25F;
}
#connected {
width: 440px;
overflow: hidden;
margin: auto;
}
.connected {
float: left;
width: 200px;
}
.connected.no2 {
float: right;
}
.status-closed {
position: relative;
top: -40px;
right: -25px;
}
.status-closed1 {
position: relative;
top: -40px;
right: -25px;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<section>
<h2>Grid</h2>
<ul class="sortable grid">
<li>Item 1<span class="status-closed1">X</span></li>
<li>Item 2<span class="status-closed">X</span></li>
<li>Item 3<span class="status-closed">X</span></li>
<li>Item 4<span class="status-closed">X</span></li>
</ul>
</section>
<br>
<div class="form-actions text-center">
<input type="submit" value="Add" class="btn btn-info">
</div>

I would use .clone and .remove combined with relative selectors to accomplish this.
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
handle: 'span'
});
$('.connected').sortable({
connectWith: '.connected'
});
$('.exclude').sortable({
items: ':not(.disabled)'
});
$('.sortable').on("click", ".status-closed", function () {
$(this).closest('li').remove();
});
$('.add').on("click", function () {
$(".sortable li:first").clone().appendTo(".sortable").show();
});
});
<style>h1,
h2 {
text-align: center;
font-weight: normal;
}
#features {
margin: auto;
width: 460px;
font-size: 0.9em;
}
.connected,
.sortable,
.exclude,
.handles {
margin: auto;
padding: 0;
width: 510px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.connected li,
.sortable li,
.exclude li,
.handles li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.handles span {
cursor: move;
}
li.disabled {
opacity: 0.5;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 100px;
height: 100px;
text-align: center;
}
li.highlight {
background: #FEE25F;
}
#connected {
width: 440px;
overflow: hidden;
margin: auto;
}
.connected {
float: left;
width: 200px;
}
.connected.no2 {
float: right;
}
.status-closed {
position: relative;
top: -40px;
right: -25px;
}
.status-closed1 {
position: relative;
top: -40px;
right: -25px;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<section>
<h2>Grid</h2>
<ul class="sortable grid">
<li style="display:none">new<span class="status-closed">X</span></li>
<li>Item 1<span class="status-closed">X</span></li>
<li>Item 2<span class="status-closed">X</span></li>
<li>Item 3<span class="status-closed">X</span></li>
<li>Item 4<span class="status-closed">X</span></li>
</ul>
</section>
<br>
<div class="form-actions text-center">
<input type="submit" value="Add" class="btn add btn-info">
</div>

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>

jQuery animations work on one element and not another

I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>

You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK