We Keep Coding

Event listener on an image doesn't alter the display state of an unordered list

When the user clicks the menu bar <img> on the top right of the page, the <ul> display property should be changed from none to display: block and vice versa. I have global variables for the image (to listen for clicks) and for the ul (to select the display property).
var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");
function menuclick() {
if (menu.style.display == none) {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
menuButton.addEventListener("click", menuclick);
body {
background-color: rgb(40, 40, 40);
font-size: 16px;
margin: 0 auto;
font-family: helvetica, arial;
}
header {
position: relative;
background: linear-gradient(rgb(40, 40, 140), rgb(50, 50, 180));
min-height: 40px;
box-shadow: 0px 0px 5px black inset;
}
header h1 {
position: relative;
padding: 10px;
font-style: italic;
font-size: 1.2em;
font-weight: bold;
color: white;
}
#h1s {
font-size: .6em;
}
img {
position: absolute;
top: 0px;
right: 10px;
}
header ul {
position: relative;
display: none;
}
header ul li {
background-color: red;
text-align: center;
height: 20px;
background-color: grey;
box-shadow: 0px 0px 1px black inset;
}
header ul li a {
text-decoration: none;
color: white;
line-height: 20px;
font-size: .6em;
}
<div id="page">
<header>
<h1> Cole Pratt <span id="h1s"> No.2968615 </span> </h1>
<img src="images/menuicon.png" alt="menuicon" width="40" id="menuicon" />
<ul id="navlink">
<li>home</li>
<li>about</li>
<li>bio</li>
</ul>
</header>
</div>

You can use the setAttribute() to do the work for you. and you forget to put 'none' in single quotes.
var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");
function menuclick() {
if (menu.style.display === 'none') {
menu.setAttribute("style", "display:block");
} else {
menu.setAttribute("style", "display:none");
}
}
menuButton.addEventListener("click", menuclick);

I recommend you to use a css class to show/hide the menu items instead of using inline styles. See Element.classList.toggle:
var menuButton = document.getElementById("menuicon");
var menu = document.getElementById("navlink");
function menuclick() {
menu.classList.toggle("active");
}
menuButton.addEventListener("click", menuclick);
body {
background-color: rgb(40, 40, 40);
font-size: 16px;
margin: 0 auto;
font-family: helvetica, arial;
}
header {
position: relative;
background: linear-gradient(rgb(40, 40, 140), rgb(50, 50, 180));
min-height: 40px;
box-shadow: 0px 0px 5px black inset;
}
header h1 {
position: relative;
padding: 10px;
font-style: italic;
font-size: 1.2em;
font-weight: bold;
color: white;
}
#h1s {
font-size: .6em;
}
img {
position: absolute;
top: 0px;
right: 10px;
}
header ul {
position: relative;
display: none;
}
header ul.active {
display: block;
}
header ul li {
background-color: red;
text-align: center;
height: 20px;
background-color: grey;
box-shadow: 0px 0px 1px black inset;
}
header ul li a {
text-decoration: none;
color: white;
line-height: 20px;
font-size: .6em;
}
<div id="page">
<header>
<h1> Cole Pratt <span id="h1s"> No.2968615 </span> </h1>
<img src="images/menuicon.png" alt="menuicon" width="40" id="menuicon" />
<ul id="navlink">
<li>home</li>
<li>about</li>
<li>bio</li>
</ul>
</header>
</div>

My menu does not display a hamburger icon anymore

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

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

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

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

How to get the button to toggle between F and C?

I was able to get the temperature to switch between Fahrenheit and Celcius. However, I wasn't able to get the small ball/button to move back and forth between F and C.
$(document).ready(function() {
var mainCities = {
'San Francisco' : {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St. Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
}
}
var currentLat;
var currentLong;
function getLocation() {
$.getJSON('http://ip-api.com/json/?callback=?', function(data) {
//var currentRegion = data.regionName;
var currentCity = data.city;
currentLat = data.lat;
currentLong = data.lon;
$("#cityname").text(currentCity);
getWeather();
});
}
function getWeather() {
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) {
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5/9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function() {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
//$('#temp').toggleClass('toggle');
});
});
};
$(".cityarea").html(getLocation);
});
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
position: relative;
}
html,body{
height:100%;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.container {
position: relative;
display: block;
margin: 0 auto;
width: 60%;
}
.header h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
.weatherbox {
text-align: center;
}
.cityarea h2 {
color: #000000;
}
.dropdown{
position: relative;
display: inline-block;
font-size: 16px;
color: #FFF;
}
input[type=checkbox]{
display: none;
}
label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #57A0D4;
padding: 10px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label .fa-globe {
margin-right: 10px;
}
/* The ul will have display:none by default */
ul{
position: absolute;
list-style: none;
text-align: left;
width: 100%;
min-width: 160px;
z-index: 1;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
ul li{
/*padding: 15px;*/
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}
ul li a {
padding: 8px 20px;
color: inherit;
text-decoration: none;
display: block;
}
ul li a:hover{
background-color: #4FB9A7;
color: #FFF;
}
input[type=checkbox]:checked ~ label {
background-color: #3D88BD;
}
input[type=checkbox]:checked ~ ul {
display: block;
}
ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.temperaturearea span#temp {
position: relative;
color: #000000;
font-size: 80px;
}
.temperaturearea #temp:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
top: 16px;
right: -17px;
border: 3px solid #000000;
border-radius: 50%;
}
.weather > span {
position: relative;
font-size: 1.2rem;
}
.weather > span:before {
content: '';
position: absolute;
left: -10px;
top: 0px;
height: 3px;
width: 3px;
border: 2px solid #000;
border-radius: 50%;
}
.main-toggle span {
margin: 0 0 0 16px;
}
.main-toggle span:last-child {
margin-left: 11px;
}
.weather button {
background: #6bbf6b;
border: none;
border-radius: 30px;
outline: none;
width: 45px;
height: 20px;
margin: 5px 5px 0;
cursor: pointer;
position: relative;
transition: background .2s;
}
.weather button:active {
background: #67b567;
}
.weather #unit-toggle {
position: absolute;
display: inline-block;
left: -8px;
top: 2px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
transition: left .2s;
}
.toggle {
left: 27px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="header"><h1>Local Weather</h1></div>
<div class="weatherbox">
<div class="cityarea">
<h2 id="cityname"></h2>
</div>
<div class="countryarea">
<h3 id="state"></h3>
<h3 id="country"></h3>
</div>
<!--<div class="dropdownlocation">
<div class="dropdown">
<input type="checkbox" id="checkbox-toggle">
<label for="checkbox-toggle"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></label>
<ul>
<li>Current Location</li>
<li class="divider"></li>
<li>Main Cities</li>
</li>
</ul>
</div>
</div>-->
<div class="temperaturearea">
<div>
<span id="wicon"></span>
</div>
<div id="wdescription"></div>
<span id="temp"></span>
<div class="weather main-toggle"> <!-- Begin Unit Switch -->
<span>F</span>
<button id="unit-switch"><span id="unit-toggle"></span></button>
<span>C</span>
</div>
</div>
</div>
</div>
</div>
You can even check out my code at Codepen: http://codepen.io/kikibres/pen/EZMJZw
What did I miss? I'm trying to toggleClass using the class .toggle everytime I use #unit-switch to click on.

Your css selector is not specific enough
.weather #unit-toggle overrides .toggle's left property.
try #unit-toggle.toggle
codepen: http://codepen.io/anon/pen/XpvOvV

Your previous selector is more specific so to balance it you have to use this:
#unit-toggle.toggle {
left: 15px;
}

scroll in jquery menu instead of background

On a mobile version of the website I've a hamburger jquery menu that shows all the menu and submenu items. So far so good, but the problem is, if I have a lot of menu items, it will not fit the screensize thus some of the items or not visible. It would be a simple solution to just scroll in the menu itself to access them.
In short: how do I enable scrolling in the jquery menu when the menu is open?
I've included a screenshot to give you an idea how my menu looks like:
/* Site navigation */
.navbar {
position: relative;
width: 100%;
height: 70px;
background-color: rgba(0,120,191,0.8);
z-index: 9999;
}
.default-menu {
display: block;
float: right;
}
/* Expanding submenus */
ul.jquerymenu li.parent {
position: relative;
}
ul.jquerymenu li.parent span.parent {
display: none;
}
.ie ul.jquerymenu li.parent span.parent {
display: none;
}
ul.jquerymenu li.parent span.closed {
background: transparent;
}
ul.jquerymenu li.parent span.open {
background: transparent;
}
ul.jquerymenu li.parent ul {
margin: 0;
width: auto;
position: absolute;
top: 70px;
left: 0;
box-shadow: -3px 3px 10px 0px rgba(0,0,0,0.2);
}
ul.jquerymenu li.parent ul li {
width: 100%;
background-color: #006699;
text-align: left;
margin: 0 !important;
padding: 0 !important;
line-height: 1;
}
ul.jquerymenu li.parent ul li a {
padding: 20px !important;
margin: 0;
display: block;
line-height: 1.5;
text-decoration: none;
color: #fff;
}
.hamburger.mean-container {
position: absolute;
z-index: 1;
right: 0;
}
.mean-container .mean-bar {
width: 100%;
height: 70px;
min-height: 70px;
position: relative;
background: transparent;
padding: 0;
}
.mean-container .mean-nav ul li {
margin: 0;
font-size: 1.6rem;
}
.mean-container .mean-nav ul li:hover {
background: rgba(23,41,59,0.8);
}
.mean-container .mean-nav ul li a {
display: block;
float: left;
width: 88%;
padding: 20px;
margin: 0;
text-align: left;
color: #fff;
text-decoration: none;
text-transform: uppercase;
border-top: 0;
}
.mean-container .mean-nav ul li a:hover {
color: #fff;
}
.mean-container .mean-nav {
float: left;
width: 100%;
background: #006699;
margin-top: 70px;
}
.mean-container a.meanmenu-reveal {
width: 36px;
height: 30px;
padding: 20px 16px;
font-size: 2.8rem;
line-height: 32px;
}
.mean-container a.meanmenu-reveal span {
display: block;
background: #fff;
height: 5px;
margin-top: 5px;
}
.mean-container .mean-nav ul li a.mean-expand {
margin-top: -2px;
width: 100%;
height: 44px;
padding: 12px !important;
text-align: right;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-weight: 500;
background: transparent;
border: 0!important;
border-left: 0 !important;
border-bottom: 0 !important;
font-size: 3rem;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
background: transparent;
}
.mean-container .mean-nav ul li li a {
border-top: 0;
}
<nav class="navbar" style="position: fixed; top: 0px;">
<div class="container">
<div class="site-logo">
<a href="/" title="Title img" rel="home" id="logo">
<img src="storm-logo-56x182.png" alt="Alt text">
</a>
</div>
<div class="hamburger mean-container"><div class="mean-bar">X<nav class="mean-nav">
<div class="content">
<!--[if IE]><div class="ie"><![endif]--><ul style="display: block;"><li><span></span>De rijschool<ul style="display: none;"><li>De auto's</li><li>Voordelen</li><li>Bovag</li><li>De instructeurs</li><li>Slagingspercentage</li><li>Ervaringen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Opleidingen<ul style="display: none;"><li>Overzicht</li><li>Automaat</li><li>Handgeschakeld</li><li>Theorielessen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Specialisme<ul style="display: none;"><li>Aanpassingen</li><li>Automaat</li><li>Rijles ADHD</li><li>Rijles en ASS</li><li>Rijtest</li><li>Vastgelopen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Trainingen<ul style="display: none;"><li>Hybride rijden</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Prijzen<ul style="display: none;"><li>Auto</li><li>Theorie</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Contact<ul style="display: block;"><li>Aanmelden</li><li>Informatie aanvraag</li><li>Bel mij terug</li><li class="mean-last">Contactgegevens</li></ul><a class="mean-expand mean-clicked" href="#" style="font-size: 20">-</a></li></ul><!--[if IE]></div><![endif]--> </div>
</nav></div></div>
</div>
<span class="js-responsive-dom-placeholder"></span>
</nav>

On page load set a certain style to a LI element

I have a page with the following menu:
https://jsfiddle.net/dva4zo8t/
Based on which menu button is clicked, the color changes and I can "remember" (set) the color on a new page load, like so:
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
I also want to set a style to the LI element (a different background color and a red highlighted text) once the page loads. So, when I click on "New Appointment", on the new page, the LI element should look like this:
So what I basically want is to change the class of the sub li just as I do with the main buttons, for example:
$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();

I´ve created a fiddle that will make the buttons turn it´s background when pushed.
then you will make to them tu "unpush" when others are pushed.
try this fiddle.
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>
EDIT
Anyway, if you want to do it after page is loaded, you can use document.ready:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$("#new").addClass('topmenu-selectedsub');
});
There is the demo:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$('#new').addClass('topmenu-selectedsub');
$('.topmenu-tab-appointments').show();
});
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>

To do this you would normally use a sever side language to set a class on loading the page (i.e; on the About page add the class about-page to body, or the class current to the about link). But to do it with jQuery only you would need to know the urls of the pages.
$(document).on('ready', function(){
var $links = $('nav a'),
links_array = [],
current_url = window.location.pathname,
current_link_idx;
// we dont have an actual url so we'll pretend here
// for the sake of the snippet/preview
current_url = '/about';
$links.each(function(){
links_array.push($(this).attr('href'));
});
current_link_idx = links_array.indexOf(current_url);
$links.eq(current_link_idx).addClass('current-page');
});
.current-page {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
About
Contact
Etc
</nav>
Obviously, if you have complex nav/urls, this isn't bulletproof. You'll need to do some fiddling with the current_url, maybe splitting it into fragments.
Still, this is best done server side.

See this working Demo
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
$(".topmenu-ul li").css("background-color","")
$(this).css("background-color","red")
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$("#topmenu-ul li a").click(function() {
$("#topmenu-ul li a").css("background-color","")
$(this).css("background-color","red")
});
You can put whatever color you like to add. Its upto you , I have just shown you how to do it