Develop Reference

Using Javascript or jQuery to make a burger submenu

What I want to do looks like this 2 level dropdown menu
My problems:
I can't move the X (close) to the left side so it matches what it should be
I can't make the submenu to work at all since (ulike the first menu) the point from which I control the toggle (menu-item1) disappears (the submenu covers it)
I have accepted my fate that i will have to use js or jQuery, yet my all my tries to understand it or make it work, mostly using onclick function, are to no result so far.
Can somebody help me with that?
Note that it actually looks much better, but since I removed a lot of stuff to isolate the burger menu it messed up all my margins-paddings so don't worry about the display factors.
You can, obviously, pay no attention to the topest bar, I only inserted it as well because the burger disappeared without it, probably relative spacing to it, but I am quite new to html/css so I could be wrong
.bg {
background-color: black;
background-size: cover;
height: 550px;
}
#topestbar {
display: flex;
}
/* dropdown menu */
#menuToggle {
display: block;
position: relative;
top: -70px;
left: 90%;
width: 21px;
z-index: 1;
}
.grey {
position: absolute;
margin: -85px 0 0 -50;
padding-top: 10px;
width: 410px;
height: 45px;
background: #F8F8F8;
z-index: 2;
}
#menuToggle a {
text-decoration: none;
color: #002868;
}
#menuToggle a:hover {
color: #BF0A30;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 4;
}
#menuToggle span {
display: block;
width: 33px;
height: 3.5px;
margin-bottom: 5px;
position: relative;
background: #FFFFFF;
border-radius: 4px;
transform-origin: 5px 0px;
z-index: 3;
}
#menuToggle span:first-child {
transform-origin: 100% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, 0px);
background: #002868;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menuToggle input:checked~#menu-m {
visibility: visible;
}
#menu-m {
visibility: hidden;
position: absolute;
width: 310px;
height: 400px;
margin: -90px 0 0 -360px;
padding: 50px;
padding-top: 125px;
background: #FFFFFF;
list-style-type: none;
}
.list li,
#menu-m li a,
.user-m {
color: #002868;
padding: 10px 0px;
font-weight: bold;
font-family: 'SourceSansPro';
font-size: 14px;
margin: 0 0 0 -30px;
}
.flag2 {
position: absolute;
margin: 10px 0 0 30px;
}
.down-arrow2 {
position: absolute;
margin: 13px 0 0 60px;
}
.user-m {
list-style: none;
display: inline-flex;
margin: -25px 0 -40px 150px;
}
.user-m img {
margin: -5px 0px 35px -70px;
}
.line {
background-color: #EEEEEE;
width: 410px;
height: 1px;
margin: 0 0px 0 -50px;
}
.list {
list-style: none;
display: inline-flex;
}
.list li a {
width: 360px;
height: 10px;
display: block;
}
.list img {
padding-left: 10px;
padding-top: 10px;
}
/* ----- dropdown sub-menu ------ */
#dropdown-m {
position: absolute;
background: #F8F8F8;
;
width: 340px;
height: 528px;
margin: -150px 0 0 -30px;
list-style: none;
z-index: 5;
visibility: hidden;
}
.back {
list-style: none;
display: inline-flex;
margin: 0 0 0 -50px;
}
#back-text {
font-weight: normal;
font-size: 14px;
}
.back img {
margin: -2 0 0 -35px;
}
<header style="background-color: black;">
<div class="container">
<div class="bg">
<ul id="topestbar">
<li>
<a href="#">
<img src="./images/clock.png" ; alt="time" width="auto" height="auto" class="clock-image" />
</a>
<div class="time">
<h3>location</h3>
<p>13:28</p>
</div>
</li>
<li>
<a href="#">
<img src="./images/cloud-snow.png" ; alt="temprature" width="auto" height="auto" class="cloud-image" />
</a>
<div class="weather">
<h3>storm</h3>
<p>12°C<span style=opacity:0.5;>°F</span></p>
</div>
</li>
<li>
<a href="#" class="down-arrow">
<img src="./images/down.png" ; alt="more languages" width="auto" height="auto" />
</a>
</li>
</ul>
<nav role="navigation">
<div id="menuToggle">
<input id="check" type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu-m">
<div class="grey">
<a href="#" class="flag2">
<img src="./images/flag.png" ; alt="greek" width="auto" height="auto" />
</a>
<a href="#" class="down-arrow2">
<img src="./images/down2.png" ; alt="more languages" width="auto" height="auto" />
</a>
</div>
<li>
<ul class="user-m">
<li> <img src="./images/user-m.png" ; alt="user-login" width="auto" height="auto" /></li>
<li><a id="login-m" href='#'>login</a></li>
</ul>
</li>
<li>
<div class="line"></div>
</li>
<li>
<ul class="list">
<li>menu-item1</li>
<li> <img src="./images/right.png" ; alt="more" width="auto" height="auto" /></li>
</ul>
<div id="dropdown-m2">
<ul id="dropdown-m">
<ul class="back">
<li> <img src="./images/left.png" ; alt="back-arrow" width="auto" height="auto" /></li>
<li><a id="back-text " href='#'>back </a></li>
</ul>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
<li>submenu-items</li>
</ul>
</div>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
<li>
<ul class="list ">
<li>menu-items</li>
<li> <img src="./images/right.png " ; alt="more " width="auto " height="auto " /></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>

JQuery show/hide and collapse if click outside

I've started playing around with JQuery in the last week, and I'm needing some help understanding what I am doing incorrectly. I'm sure this is very simple, but please be patient as I am learning.
End result: When you click "Open Menu" - then the notification menu opens. If you click outside of the ul class ".profiledrop" then the notification menu closes.
// Tab collapser //
$('.notification-tab').click(function(e) {
if ($(e.currentTarget).parent().hasClass('active')) {
$('.notification-group').removeClass('active');
} else {
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").show();
});
/* Notification Infastructure */
.profiledrop {
display: none;
width: 350px;
height: auto;
max-height: 600px;
padding: 0;
margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}
.notification-group {
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;
}
.notification-list {
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;
}
.notification-list-item {
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3
}
.notification-list-item:nth-child(even) {
background-color: #E3E3E3
}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px;
height: 60px;
object-fit: cover
}
/* Misc Settings */
.message::not(.nopic) {
margin-top: 0px;
margin-left: 80px
}
/* Style for notification groups without image */
/* Notification text styling */
.label {
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;
}
h4 {
margin-left: 10px
}
h4,
.label {
display: inline-block;
}
.message {
margin-top: 0px
}
.date {
float: right;
color: darkgray
}
/* Active Section */
.active .notification-list {
height: 250px;
}
.active .notification-tab,
.notification-tab:hover {
background-color: #5B7042
}
.active .label,
.notification-tab:hover .label {
border: 1px solid white
}
.notification-tab:hover {
color: white
}
.active .label,
.active h4 {
color: white
}
/* Responsive design */
#media only screen and (max-width: 514px) {
body {
margin: 0px
}
.profiledrop {
width: 100%;
margin: 0px;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
<a href="#" id='launch'>Open Menu</a>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>

When you click on menu you need to exclude it from you logic of closing the menu.
So create another if if (e.target.id != "launch") { and wrap your closing menu logic in it. You where opening with one event and closing in same time with another:
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
I would also suggest to use .toggle(); here so you can open and close menu by clicking the button:
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").toggle();
});
EXAMPLE:
// Tab collapser //
$('.notification-tab').click(function(e) {
if ($(e.currentTarget).parent().hasClass('active')) {
$('.notification-group').removeClass('active');
} else {
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").toggle();
});
/* Notification Infastructure */
.profiledrop {
display: none;
width: 350px;
height: auto;
max-height: 600px;
padding: 0;
margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}
.notification-group {
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;
}
.notification-list {
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;
}
.notification-list-item {
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3
}
.notification-list-item:nth-child(even) {
background-color: #E3E3E3
}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px;
height: 60px;
object-fit: cover
}
/* Misc Settings */
.message::not(.nopic) {
margin-top: 0px;
margin-left: 80px
}
/* Style for notification groups without image */
/* Notification text styling */
.label {
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;
}
h4 {
margin-left: 10px
}
h4,
.label {
display: inline-block;
}
.message {
margin-top: 0px
}
.date {
float: right;
color: darkgray
}
/* Active Section */
.active .notification-list {
height: 250px;
}
.active .notification-tab,
.notification-tab:hover {
background-color: #5B7042
}
.active .label,
.notification-tab:hover .label {
border: 1px solid white
}
.notification-tab:hover {
color: white
}
.active .label,
.active h4 {
color: white
}
/* Responsive design */
#media only screen and (max-width: 514px) {
body {
margin: 0px
}
.profiledrop {
width: 100%;
margin: 0px;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<a href="#" id='launch'>Open Menu</a>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>

CSS dynamic sub-menu is not showing properly

I've created dynamic menu in ASP.NET Webform application. Here is the structure of my menu:
In which sub-menu is properly generated.
Now I am going to apply some CSS to make it eye-catching.
Here is my desire output after applying CSS on it by using SCSS pre-processor.
Issue
The issue on the above image is, the sub-menu abcd is hide behind the abcd2. Which means if I add more 3rd level sub-menu then all sub-menus hide behind the last one.
Here is my dynamic generated HTML which I've copied from browser console.
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>
CSS:
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}
JSFiddle
Link
Conclusion
As I describe my problem briefly, please let me know what I'm doing wrong in my above HTML or CSS code?

change third level html structure to be in one ul element, so use this code
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
instead of
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
showSubmenu();
function showSubmenu() {
$('#menu li').mouseenter(function () {
$(this).children('ul').stop().show()
$('ul .sub-menu > li > ul').stop().show()
}).mouseleave(function () {
$(this).children('ul').stop().hide()
$('ul > .sub-menu > li > ul').stop().hide()
});
}
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>

I found the below part was messing with the styling, the elements were absolutely positioned.
-- EDIT --
It's bad practice to blanket a group of elements with the same coordinates while being absolutely positioned. The reason being is that the elements will all collapse onto the single specified position hiding all but the very top one.
A different CSS only solution would be to use flex style for your menus and sub-menus
display: flex;
flex-direction: column;
Although in your case it's odd because of the list elements you use, which already behave in a sort of flexie way.
Original Code Answer
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
/* Edited I changed position to relative and pushed it up a bit */
ul {
padding-left: 6px;
position: relative;
top: -30px;
left: 200px;
}
}
}
}

css Turn a drop-down menu into a drop-up footer

I found a dropdown menu model that I want to reverse, to make it a "dropup" menu, opening from bottom to top.
What I have is this :
HTML
<div class="get-started">
<a href="#" id="get-started-close">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI0ZGRkZGRiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDEuMDAwMDAwLCAtODkuMDAwMDAwKSI+PGcgaWQ9ImNsb3NlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDEuMDAwMDAwLCA4OS4wMDAwMDApIj48cGF0aCBkPSJNMTQsMS40IEwxMi42LDAgTDcsNS42IEwxLjQsMCBMMCwxLjQgTDUuNiw3IEwwLDEyLjYgTDEuNCwxNCBMNyw4LjQgTDEyLjYsMTQgTDE0LDEyLjYgTDguNCw3IEwxNCwxLjQgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+" height="18" width="18">
</a>
<div class="get-started-container">
<div class="row no-margin">
<div class="col-md-3">
<h2 class="get-started-heading first">Button 1</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 2</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 3</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 4</h2>
<div class="line"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav>
CLICK HERE
</nav>
CSS
.get-started {
width: 100%;
height: 100%;
background: rgb(255, 0, 101);
color: #fff;
position: relative;
padding-bottom: 40px;
display: none;
}
#get-started-btn {
font: 100 14px/20px 'Open Sans', Verdana, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgb(255, 0, 101);
position: absolute;
right: 0;
top: 19px;
padding: 11px 20px 11px 25px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
#get-started-btn:hover,
#get-started-btn:active {
text-decoration: none;
-webkit-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
-moz-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
transition: box-shadow 0.5s ease-in-out;
-moz-transition: box-shadow 0.5s ease-in-out;
-webkit-transition: box-shadow 0.5s ease-in-out;
-o-transition: box-shadow 0.5s ease-in-out;
-ms-transition:box-shadow 0.5s ease-in-out;
}
#get-started-btn:focus {
text-decoration: none;
}
#get-started-close {
position: absolute;
right: 15px;
top: 15px;
opacity: 0.5;
}
#get-started-close:hover,
#get-started-close:active,
#get-started-close:focus {
opacity: 1;
}
.get-started-container {
color: #fff;
padding-top: 30px;
text-align: center;
}
.get-started-heading {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.line {
height: 2px;
width: 120px;
background: rgb(255, 127, 177);
margin: auto auto 15px auto;
}
.white-link-sm {
font-size: 14px;
color: #fff;
}
.white-link-sm:hover,
.white-link-sm:active,
.white-link-sm:focus {
color: #fff;
font-weight: 600;
}
.get-stated-hide {
display: block;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 5px;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
#media (max-width: 991px) {
.get-started-heading.first {
margin-top: 15px;
}
.get-started-heading {
margin-top: 30px;
}
}
JS
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').slideToggle();
});
});
This is to me very complex and I don't know what to modify in the CSS to have it reversed. Any tips on how to achieve it would be highly appreciated.

Change the position of div "get-started" is from relative to absolute and bottom with 0.
If you give "top:0px" in div "get-started", the drop-down menu will open from top to bottom.
Here is the code:
body{background:#000;}
.get-started {
width: 100%;
height: 100%;
background: rgb(255, 0, 101);
color: #fff;
position:absolute;
bottom:0;
padding-bottom: 0px;
display: none;
}
#get-started-btn {
font: 100 14px/20px 'Open Sans', Verdana, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgb(255, 0, 101);
position: absolute;
right: 0;
bottom: 19px;
padding: 11px 20px 11px 25px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border:#FFF 2px solid;
}
#get-started-btn:hover,
#get-started-btn:active {
text-decoration: none;
-webkit-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
-moz-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
transition: box-shadow 0.5s ease-in-out;
-moz-transition: box-shadow 0.5s ease-in-out;
-webkit-transition: box-shadow 0.5s ease-in-out;
-o-transition: box-shadow 0.5s ease-in-out;
-ms-transition:box-shadow 0.5s ease-in-out;
}
#get-started-btn:focus {
text-decoration: none;
}
#get-started-close {
position: absolute;
right: 15px;
top: 15px;
opacity: 0.5;
}
#get-started-close:hover,
#get-started-close:active,
#get-started-close:focus {
opacity: 1;
}
.get-started-container {
color: #fff;
padding-top: 30px;
text-align: center;
}
.get-started-heading {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.line {
height: 2px;
width: 120px;
background: rgb(255, 127, 177);
margin: auto auto 15px auto;
}
.white-link-sm {
font-size: 14px;
color: #fff;
}
.white-link-sm:hover,
.white-link-sm:active,
.white-link-sm:focus {
color: #fff;
font-weight: 600;
}
.get-stated-hide {
display: block;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 5px;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
#media (max-width: 991px) {
.get-started-heading.first {
margin-top: 15px;
}
.get-started-heading {
margin-top: 30px;
}
}
<div class="get-started">
<a href="#" id="get-started-close">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI0ZGRkZGRiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDEuMDAwMDAwLCAtODkuMDAwMDAwKSI+PGcgaWQ9ImNsb3NlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDEuMDAwMDAwLCA4OS4wMDAwMDApIj48cGF0aCBkPSJNMTQsMS40IEwxMi42LDAgTDcsNS42IEwxLjQsMCBMMCwxLjQgTDUuNiw3IEwwLDEyLjYgTDEuNCwxNCBMNyw4LjQgTDEyLjYsMTQgTDE0LDEyLjYgTDguNCw3IEwxNCwxLjQgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+" height="18" width="18">
</a>
<div class="get-started-container">
<div class="row no-margin">
<div class="col-md-3">
<h2 class="get-started-heading first">Button 1</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 2</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 3</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 4</h2>
<div class="line"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav>
CLICK HERE
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').slideToggle();
});
});
</script>

The following code will move up the nav button at the same time as the drop-up menu.
Have to change the js code like this:
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').toggle();
var ht= $('.get-started').height();
if($('.get-started').is(":visible")){
$("#get-started-btn").animate({bottom:ht+19+'px'});
}
else{
$("#get-started-btn").animate({bottom:19+'px'});
}
});
});
body{background:#000;}
.get-started {
width: 100%;
height: auto;
background: rgb(255, 0, 101);
color: #fff;
position:absolute;
bottom:0;
padding-bottom: 0px;
display: none;
}
#get-started-btn {
font: 100 14px/20px 'Open Sans', Verdana, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgb(255, 0, 101);
position: absolute;
right: 0;
bottom: 19px;
padding: 11px 20px 11px 25px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border:#FFF 2px solid;
}
#get-started-btn:hover,
#get-started-btn:active {
text-decoration: none;
-webkit-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
-moz-box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
box-shadow: -3px 0px 25px 4px rgba(255, 0, 101, 0.4);
transition: box-shadow 0.5s ease-in-out;
-moz-transition: box-shadow 0.5s ease-in-out;
-webkit-transition: box-shadow 0.5s ease-in-out;
-o-transition: box-shadow 0.5s ease-in-out;
-ms-transition:box-shadow 0.5s ease-in-out;
}
#get-started-btn:focus {
text-decoration: none;
}
#get-started-close {
position: absolute;
right: 15px;
top: 15px;
opacity: 0.5;
}
#get-started-close:hover,
#get-started-close:active,
#get-started-close:focus {
opacity: 1;
}
.get-started-container {
color: #fff;
padding-top: 30px;
text-align: center;
}
.get-started-heading {
font-size: 22px;
margin-bottom: 10px;
color: #fff;
}
.line {
height: 2px;
width: 120px;
background: rgb(255, 127, 177);
margin: auto auto 15px auto;
}
.white-link-sm {
font-size: 14px;
color: #fff;
}
.white-link-sm:hover,
.white-link-sm:active,
.white-link-sm:focus {
color: #fff;
font-weight: 600;
}
.get-stated-hide {
display: block;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 5px;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
#media (max-width: 991px) {
.get-started-heading.first {
margin-top: 15px;
}
.get-started-heading {
margin-top: 30px;
}
}
<div class="get-started">
<a href="#" id="get-started-close">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI0ZGRkZGRiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDEuMDAwMDAwLCAtODkuMDAwMDAwKSI+PGcgaWQ9ImNsb3NlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDEuMDAwMDAwLCA4OS4wMDAwMDApIj48cGF0aCBkPSJNMTQsMS40IEwxMi42LDAgTDcsNS42IEwxLjQsMCBMMCwxLjQgTDUuNiw3IEwwLDEyLjYgTDEuNCwxNCBMNyw4LjQgTDEyLjYsMTQgTDE0LDEyLjYgTDguNCw3IEwxNCwxLjQgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+" height="18" width="18">
</a>
<div class="get-started-container">
<div class="row no-margin">
<div class="col-md-3">
<h2 class="get-started-heading first">Button 1</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 2</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 3</h2>
<div class="line margin-bottom-md"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="get-started-heading">Button 4</h2>
<div class="line"></div>
<div>
<ul>
<li>
<a href="#" class="white-link-sm">
Content 1
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 2
</a>
</li>
<li>
<a href="#" class="white-link-sm">
Content 3
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<nav>
CLICK HERE
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function() {
$('#get-started-btn, #get-started-close').click(function () {
$('.get-started').toggle();
var ht= $('.get-started').height();
if($('.get-started').is(":visible")){
$("#get-started-btn").animate({bottom:ht+19+'px'});
}
else{
$("#get-started-btn").animate({bottom:19+'px'});
}
});
});
</script>

Why is my webpage not loading?

I'm building a website with C9 and whenever I try and run the webpage and visit it, it simply freezes and stops loading. It loads in the bootstrap and I don't think it's loading in the ../css/hub.css
$(function() {
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
});
$(function() {
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
})
$(function() {
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
});
$(function() {
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>Hub</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Mobile Optimization -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Custom styling -->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/hub.css" type="text/css" />
<link rel="stylesheet" href="../partials/nav.css" type="text/css" />
<link rel="stylesheet" href="../css/components.css" type="text/css" />
<!-- Imported Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
</head>
<body>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="venos_logo.png">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script type="text/javascript" src="../js/hub.js"></script>
</body>
</html>
Here's the link to the webpage to see if it does the same thing for you:
https://venos-git-jasonprocka1.c9users.io/www/html/hub.html
I've already worked on clearing cookies and nothing seems to work. Something has to be wrong with my code.
Any help is greatly appreciated! Thanks!

On the page linked, you have not included the required tether.js library.
Also, the page is requesting a wallpaper image over http (but the page itself is hosted on https, usually you get a warning on the browser's console about this)
And, it's making references to a nav.css file but it cannot find it.
As a side note, you do not need to have each event handler declared in its own function() declaration. You could combined them all in one as below:
$(function() {
// five-column click
var rightVal = -350; // base value
$(".five-column").click(function() {
event.stopPropagation();
rightVal = (rightVal * -1) - 350; // calculate new value
$(".drop-details").animate({
right: rightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// close-detail click
var closeRightVal = -350;
$(".close-details").click(function() {
event.stopPropagation();
$(".drop-details").animate({
right: closeRightVal + 'px'
}, {
queue: false,
duration: 500
});
});
// nav-custom touchmove
$(".nav-custom").on('touchmove', function(e) {
e.preventDefault();
});
// content touchmove
$(".content").on('touchmove', function(e) {
e.preventDefault();
});
// inner-nav touchmove
$(".inner-nav").on('touchmove', function(e) {
e.preventDefault();
});
// window resize
$(window).resize(function() {
var dropWidth = $(".five-column").width();
$(".drop").css("height", dropWidth + 'px');
$(".five-column").css("min-height", dropWidth + 20 + 'px');
});
});
* {
overflow: hidden;
}
html {
height: 100%;
margin: 0;
max-width: 100%;
}
body {
font-family: 'Ubuntu', sans-serif;
background-color: #F9F9F9;
margin: 0;
height: 100%;
max-width: 100%;
-webkit-font-smoothing: antialiased;
position: fixed;
}
/* Page Components */
.content {
min-width: 100%;
float: right;
height: 100%;
overflow-y: scroll;
overflow-x: none;
margin-left: 250px;
}
.content::-webkit-scrollbar {
display: none;
}
.page-content {
min-width: calc(100% - 250px);
max-width: calc(100% - 250px);
min-height: 100%;
margin-top: 0;
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
.drop-details {
height: 100%;
width: 350px;
z-index: 1000;
color: #FFF;
position: absolute;
right: -350px;
background-color: #FFF000;
}
/* Hub Top */
.hub-jumbo {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('hub-bg.png');
background-size: cover;
background-position: center;
padding-top: 36px;
padding-bottom: 36px;
margin-bottom: 18px;
}
.hub-header {
text-align: center;
}
h2 {
margin-bottom: 0;
}
.hub-btns {
display: block;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
/* End of top */
.container-fluid {
padding: 0;
margin: 0;
height: 10%;
min-width: 100%;
max-width: 100%;
margin-left: 4px;
overflow-y: auto;
margin-right: 0;
}
.ad-box {
width: 20%;
height: 250px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
margin-right: -14px;
top: 50%;
transform: translateY(-50%);
background-color: #000000;
vertical-align: middle;
}
.ad-text {
text-align: center;
color: #FFFFFF;
}
.push-div {
height: 50px;
}
.five-column {
min-width: calc(20% - 20px);
padding: 0;
max-height: 194px;
display: inline-block;
margin: 0;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 14px;
}
.row {
display: inline-block;
max-width: calc(80% - 14px);
margin: 0;
margin-left: 0;
}
/* Drop Styles */
.drop {
width: 100%;
height: 180px;
background-color: #FFF;
border-bottom: 3px solid #EBEBEB;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.drop-image {
background-image: url('http://protiumdesign.com/wp-content/uploads/2015/03/Flat-Space-Wallpaper-1024.jpg');
background-size: cover;
background-position: center;
}
.drop .name {
height: 36px;
line-height: 36px;
text-align: center;
color: #FFF;
background-color: #03a9f4;
font-size: 1em;
}
.drop .icon {
height: 80px;
vertical-align: middle;
display: block;
margin: 0 auto;
margin-top: 32px;
}
/* SCALING */
#media only screen and (max-width: 1400px) {
.five-column {
min-width: calc(25% - 20px);
}
.drop .name {
font-size: 1.10em;
}
}
#media only screen and (max-width: 1200px) {
.ad-box {
display: none;
}
.row {
max-width: calc(100% - 14px);
}
.five-column {
min-width: calc(33% - 20px);
}
.drop .name {
font-size: 1.20em;
}
}
#media only screen and (max-width: 1000px) {
.five-column {
min-width: calc(50% - 20px);
}
.drop .name {
font-size: 1.30em;
}
.user-name {
left: 7%;
}
.more-dropup {
left: 5%;
}
.user-image {
left: 2%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<div class="nav-custom">
<a class="venos_logo" href="hubs.html">
<img src="http://lorempixel.com/50/50">
</a>
<div class="inner-nav">
<ul class="upper-items smooth">
<li class="label">NAVIGATE</li>
<li class="link"><i class="material-icons nav-icon">home</i> Dashboard
</li>
<li class="link"><i class="material-icons nav-icon">notifications</i> Notifications
</li>
<li class="link"><i class="material-icons nav-icon">cloud</i> Synced Files
</li>
<li class="link"><i class="material-icons nav-icon">create</i> Create Hub
</li>
</ul>
<ul class="lower-items">
<li class="label">HUBS</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Jason's Vacation 2016
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> San Haven Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Bismarck Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Fargo Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Velva Roadtrip
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Dank Memes
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Squad
</li>
<li class="link"><i class="material-icons nav-icon">folder</i> Summer 2017
</li>
</ul>
<div class="show-hubs btn btn-lg txt-white bg-blue no-border" href="" role="button">Show More</div>
</div>
<div class="nav-push-div"></div>
<div class="more-menu">
<ul>
<li><a class="more-menu-link nonactive txt-blue" href="settings.html">Settings</a>
</li>
<li><a class="more-menu-link nonactive txt-blue" href="signout.html">Signout</a>
</li>
</ul>
</div>
<div class="nav-user">
<div class="user-image"></div>
<span class="user-name">Jason Procka</span>
<button type="button" class="more-dropup">
<i class="material-icons nav-more-btn">more_horiz</i>
</button>
</div>
</div>
<div class="content">
<div class="page-content">
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white txt-blue" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-dark-blue" href="" role="button">Create Drop</a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="five-column">
<div class="drop">
<div class="name">1.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop drop-image">
<div class="name">2.png</div>
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">3.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">4.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">5.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">6.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">7.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">8.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">9.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">10.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
<div class="five-column">
<div class="drop">
<div class="name">funnycats.gif</div>
<img class="icon" src="gif_icon.jpg">
</div>
</div>
</div>
<div class="ad-box">
<span class="ad-text">Your ad here.</span>
</div>
</div>
<div class="push-div"></div>
</div>
<div class="drop-details">
<button class="close-details">
<i class="material-icons">close</i>
</button>
</div>
</div>