We Keep Coding

How to close the side bar automatically when the li item is clicked

How do I close the side bar when someone clicks on the any of the li element. I have tried the code menuSidebar.display = "none" in the event listener, but this doesn't seem to work
Thank you in advance
const menuButton = document.querySelectorAll("li");
const menuSidebar = document.getElementById("mySidebar");
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
// console.log(menuButton)
// console.log(mySidebar)
menuButton.addEventListener("click", ()=>{
menuSidebar.display = "none";
});
:root {
--title-font: "Titillium Web", sans-serif;
--color-primary: #16e0bd;
--color-secondary: #303030;
--color-tertiary: #e0860b;
--color-complimentary: #fc5817;
--color-darkblack: #141414;
--default: #ffffff;
}
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: var(--color-secondary); /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* The sidebar links */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: var(--default);
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
color: var(--color-primary);
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* The button used to open the sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
padding: 10px 15px;
border: none;
box-shadow: 3px 3px var(--color-complimentary),
-0.1em -0.1em 0.4em var(--color-complimentary);
background: linear-gradient(var(--default), var(--color-primary));
color: var(--color-secondary);
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left 0.5s; /* If you want a transition effect */
padding: 20px;
}
<div id="mySidebar" class="sidebar">
×
<ul>
<li>About Me</li>
<li>Skills</li>
<li>Projects</li>
<li>Experience</li>
<li> Education </li>
<li> Contact</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Menu</button>
</div>

menuButton.addEventListener("click", ()=>{
menuSidebar.display = "none";
});
Replace the above with this,
menuButton.forEach((button) => (button.onclick = () => closeNav()));
You have listen to each button to see if it's been clicked then simply execute closeNav() function

Close navigation when navigation item is clicked

My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.
The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)
I also made the checkbox visible just so that we can have a better understanding of whats going on.
My CSS:
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle:checked + .menu {
display: block;
}
}
My HTML:
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</div>

Javscript may not actually be required, depending on your needs.
If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.toggle {
text-decoration: none;
color: #33334d;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
.toggle,
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
.toggle,
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#menu:target,
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<a class="toggle" href="#menu">☰</a>
<div class="menu" id="menu">
example
example
example
example
example
example
example
</div>
</div>

Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.
But also you will need a piece of JS code.
By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.
Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).
So in our case, we select all links:
var links = document.querySelectorAll('.menu a');
then we have to add click event to every link, which will set our input to checked="false" = close menu.
This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
}
<label class="nav" for="toggle">
<div class="icon">☰</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</label>

Keep dropdown in a sidenav open based on url

I'm making a menu using this tutorial: https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp
I added this code to highlight currently selected link:
$("#sidenav a").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
How do I keep the dropdown open if a link in the dropdown is highlighted?
Just to add - my sidenav includes more than one dropdown.
Edit
My HTML:
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
// this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
$("#sidenav a").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
.sidenav {
height: 100%;
width: 16%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #212529;
overflow-x: hidden;
}
.sidenav a,
.dropdown-btn {
padding: 11px 8px 11px 16px;
text-decoration: none;
color: #ffffff;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover,
.dropdown-btn:hover {
background-color: #808080;
color: #f1f1f1;
}
a.active {
background-color: #002f7c;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.current-menu-item {
background: #33b5e5;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav" id="sidenav">
Users
<button class="dropdown-btn">Computers</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
<button class="dropdown-btn">Monitors</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
Licenses
Reports
Logs
</div>

with jquery function closest you can select the closest parent element with the specific selector $(this).closest(".dropdown-btn") selects the closest parent with class "dropdown-btn".
so after selecting that, you can simulate click action on it or make it visible directly .
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
// this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
$("#sidenav a").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
$("dropdown-btn").css({display : "none"});
$(this).closest(".dropdown-btn").css({display : "block"});
}
});
.sidenav {
height: 100%;
width: 16%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #212529;
overflow-x: hidden;
}
.sidenav a,
.dropdown-btn {
padding: 11px 8px 11px 16px;
text-decoration: none;
color: #ffffff;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover,
.dropdown-btn:hover {
background-color: #808080;
color: #f1f1f1;
}
a.active {
background-color: #002f7c;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.current-menu-item {
background: #33b5e5;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav" id="sidenav">
Users
<button class="dropdown-btn">Computers</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
<button class="dropdown-btn">Monitors</button>
<div class="dropdown-container">
Assigned
Unassigned
</div>
Licenses
Reports
Logs
</div>

If you use jQuery, it is possible to select previous element of the link container and then fire click event on it to call the function that toggles the dropdown menu. So, you could use the following snippet, just replace $(this).attr("href") === "#1" with this.href == window.location.href.
$(".dropdown-btn").click(function() {
$(this).toggleClass("active").next().toggle();
});
$(".sidenav a").each(function() {
if ($(this).attr("href") === "#1") {
$(this)
.addClass("active")
.closest(".dropdown-container")
.prev(".dropdown-btn")
.trigger("click");
}
});
/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="sidenav">
About
Services
Clients
Contact
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
Search
</div>

Bring modal to front

Hey I am trying to bring this modal infront of the other elements on the page.
I already tried z-index: -1.
I would like to then implement this code on a adobe muse website and make the modal get an element from the selection of a combobox.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; front; /* Stay in place */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
z-index: 1; /* Sit on top */
}
/* Modal Content */
.modal-content {
background-color: #00A1E0;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 511px;
height: 250px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #blue;
text-decoration: none;
cursor: pointer;
</style>
<body>
<style>
div.background {
border: 0px solid black;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #00A1E0;
border: 1px solid black;
opacity: 15%;
width: 511;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Add to shopping card
<div class="background">
<div class="transbox">
<style>
#myBtn { color: #00A1E0; }
div.background {
border: 0px #00A1E0;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #FF530D;
color: #00A1E0;
opacity: 80%;
width: 200;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #00A1E0;
}
#myModal { background: ; }
</style>
</button>
</div>
</head>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>you have added the classic business cards to the shopping cart</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
{
document.getElementById("resultSection").style.fontSize = "350%";
document.getElementById("resultSection").innerHTML = "<H2></H2> " + result;
}
</script>
<style> #myBtn {
position: relative;
font-size: 34px;
}
</style>
</body>
</html>

Try this - comments amended to show what I have changed
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place front is invalid - may break your css so removed */
padding-top: 100px; /* Location of the box - don't know what this does? If it is to move your modal down by 100px, then just change top below to 100px and remove this*/
left: 0;
right:0; /* Full width (left and right 0) */
top: 0;
bottom: 0; /* Full height top and bottom 0 */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}
You also have a missing end bracket from your .close:hover and focus and you seem to have a nested style within div.background - unless you are using a css pre-processor, then this is invalid css

Responsive show/hide menu malfunctioning

In a new design I've been working on, there is a sidebar, which is meaning to be shown fully while browsing using desktop. On mobile, the menu is meant to be collapsed into a button, which, when clicked, is supposed to expand. Former function seems to work perfectly fine, but latter doesn't; when you press this button, nothing seems to happen at all.
Would anyone mind helping me look into this and figure out what the issue is, please?
function(window, document) {
var layout = document.getElementById('layout'),
f - menu = document.getElementById('f-menu'),
f - menuLink = document.getElementById('f-menuLink');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
f - menuLink.onclick = function(e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(f - menu, active);
toggleClass(f - menuLink, active);
};
}(this, this.document));
body {
color: #777;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#f-menu,
.f-menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
padding-left: 0;
}
#layout.active {
position: relative;
left: 150px;
}
#layout.active #f-menu {
left: 150px;
width: 150px;
}
#layout.active .f-menu-link {
left: 150px;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
margin: 0 auto;
padding: 0 2em;
max-width: 800px;
margin-bottom: 50px;
line-height: 1.6em;
}
.header {
margin: 0;
color: #333;
text-align: center;
padding: 2.5em 2em 0;
border-bottom: 1px solid #eee;
}
.header h1 {
margin: 0.2em 0;
font-size: 3em;
font-weight: 300;
}
.header h2 {
font-weight: 300;
color: #ccc;
padding: 0;
margin-top: 0;
}
.content-subhead {
margin: 50px 0 20px 0;
font-weight: 300;
color: #888;
}
/*
The `#f-menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#f-menu {
margin-left: -150px;
/* "#f-menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
/* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#f-menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #f-menu.
*/
#f-menu .pure-menu,
#f-menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#f-menu .pure-menu ul,
#f-menu .pure-menu .f-menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#f-menu .pure-menu li a:hover,
#f-menu .pure-menu li a:focus {
background: #333;
}
/*
This styles the selected menu item `<li>`.
*/
#f-menu .pure-menu-selected,
#f-menu .pure-menu-heading {
background: #2A759B;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#f-menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#f-menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.f-menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.f-menu-link {
position: fixed;
display: block;
/* show this only on small screens */
top: 0;
left: 0;
/* "#f-menu width" */
background: #000;
background: rgba(0, 0, 0, 0.7);
font-size: 10px;
/* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.f-menu-link:hover,
.f-menu-link:focus {
background: #000;
}
.f-menu-link span {
position: relative;
display: block;
}
.f-menu-link span,
.f-menu-link span:before,
.f-menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.f-menu-link span:before,
.f-menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.f-menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
#media (min-width: 48em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px;
/* left col width "#f-menu" */
left: 0;
}
#f-menu {
left: 150px;
}
.f-menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .f-menu-link {
left: 150px;
}
}
<a href="#f-menu" id="f-menuLink" class="f-menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<div id="f-menu">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading" href="#">Community</a>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</div>
</div>
<div id="layout">
Content goes here.
</div>

I asked in the comments about your variables and specifically "do they throw exceptions?"
They actually do:
SyntaxError: Unexpected token -
The variable names are invalid. Update those and your JS will start working. Here's a Fiddle with updated variable names:
http://jsfiddle.net/jpattishalljr/50jnq2hf/