Develop Reference

sidebar navigation text not fixed while transition

i try to change css but not work text short text is ok but i have to put long line when click it not smooth while transition working i use template from codeply(https://www.codeply.com/p/RXiaRJEqWj#), i want text show up smooth like button or short text please advise me how I should use it to remember for next time i can help in community if i saw someone ask like me thank you.
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>
<script>
function Nav() {
var width = document.getElementById("mySidenav").style.width;
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
$('.animated-icon').toggleClass('open');
}
else {
document.getElementById("mySidenav").style.width = "0px";
$('.animated-icon').toggleClass('open');
}
}
</script>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
i tried to change the css and and the javascript but it did changed at all, just gave me more problems, i did change position and display in the css, but dont seem this is the problem, someone help me pls

You dont need JQuery with this simple code.
Try this:
function Nav() {
var width = document.getElementById("mySidenav").style.width;
var icon = document.querySelector(".animated-icon");
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
icon.classList.toggle('open');
} else {
document.getElementById("mySidenav").style.width = "0px";
icon.classList.toggle('open');
}
}
body{
margin:0;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.hamburger-button{
margin:25px;
background-color: rgba(0,0,0,0);
}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
.navbar-toggler{
position:relative;
z-index:2;
}
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>

Getting a hamburger menu to close upon clicking a link on Bootstrap 5.2

I have a hamburger menu for the mobile version of a website, when you click the links it takes you to the right place, but the menu doesn't close. Let me clarify I only learnt HTML and CSS, but not Javascript, so I have no idea what I'm doing and I won't until I get around to that, but I need this website before that.
This is the HTML (I included the desktop version navbar just for reference):
<div class="navbar" id="navbar">
<div class="container-fluid">
<div class="col-md-1 offset-1">
<div class="logo" id="logo"><img src="img/"></div>
</div>
<div class="col-md-6 offset-1">
<ul class="navbar-middle">
<li>SERVICIOS</li>
<li>TESTIMONIOS</li>
<li>CONTACTO</li>
</ul>
</div>
<div class="col-md-2">
<ul class="navbar-right">
<li><i class="fab fa-facebook fa-2x"></i></li>
<li><i class="fab fa-instagram fa-2x"></i></li>
</ul>
</div>
<button class="navbar-toggler second-button" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarToggleExternalContent10"
aria-controls="navbarToggleExternalContent10" aria-expanded="false"
aria-label="Toggle navigation">
<div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
</button>
</div>
</div>
<div class="collapse" id="navbarToggleExternalContent10">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Servicios</button>
<button class="btn btn-link btn-block border-bottom m-0">Testimonios</button>
<button class="btn btn-link btn-block m-0">Contacto</button>
</div>
</div>
The JS as it is:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<script defer src="/your_path_to_version_6_files/js/all.js"></script>
<script language="JavaScript" type="text/javascript">
document.querySelector('.second-button').addEventListener('click', function () {
document.querySelector('.animated-icon2').classList.toggle('open');
});
</script>
And the CSS (all the 'animated icon' stuff is straight from the Bootstrap website, so feel free to skip over that):
.navbar {
position: fixed;
width:100%;
z-index: 10;
overflow: hidden;
}
.navbar-toggler {
display:none;
}
.collapse {
display: none;
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.2s linear;
text-align: center;
}
.collapse.show {
display: block;
position: fixed;
z-index: 3;
width: 100%;
}
.m-0 {
position: relative;
width: 100%;
}
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon2 span {
background: white;
}
.animated-icon2 span:hover {
background: #EC673C;
}
.animated-icon2 span:active {
background: #B22818;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2),
.animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

I am trying to get my Javascript to cooperate and open my hamburger icon with my links inside

Here is the code I am trying to get to cooperate with one another. I just need my Javascript to help in opening my hamburger icon menu. Currently, my hamburger icon works. It will create an "x" when clicked on, but it's just that my menu does not display when I click on the hamburger icon as it should.
* JAVASCRIPT *
export const navAnimation = function () {
const hamburgerDiv = document.querySelector(".nav--hamburger");
const hamburgerIcon = document.querySelector(".hamburger");
const nav = document.querySelector(".nav--ul");
const blur = document.querySelector(".blur");
hamburgerDiv.addEventListener("click", () => {
// nav.classList.toggle("hidden");
hamburgerIcon.classList.toggle("hidden");
cross.classList.toggle("hidden");
nav.classList.toggle("move-in");
nav.classList.toggle("move-out");
// blur.classList.toggle("hidden");
blur.classList.toggle("move-in");
blur.classList.toggle("move-out");
});
};
navAnimation();
// Hamburger Icon //
$(document).ready(function(){
$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
* HTML *
<header class="header">
<div class="blur move-out"></div>
<div class="header--logo">
<img src="images/Logo-2.png" alt="Site logo" class="logo"/>
</div>
<nav class="nav">
<div class="nav--hamburger">
<div id="nav-icon1" class = "hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="nav--ul move-out">
<li class="nav--li--item">
<a class="nav--li--anchor" href="#home">
<span class="order"></span>HOME
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#about">
<span class="order"></span>ABOUT
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#services"
><span class="order"></span>SERVICES
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="booking">
<span class="order"></span>BOOKING
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#footer">
<span class="order"></span>CONTACT US
</a>
</li>
</ul>
</nav>
</header>
* CSS *
<style>
#nav-icon1 {
width: 55px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #551a00;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 10px;
}
#nav-icon1 span:nth-child(3) {
top: 20px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nav {
font-family: "Bellefair", serif;
color: #fff;
font-size: var(--step-0);
font-weight: 700;
position: absolute;
top: 0;
right: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
width: 80%;
overflow: hidden;
}
.nav--ul {
list-style-type: none;
letter-spacing: 2px;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
min-height: 100vh;
align-items: start;
width: 100%;
position: relative;
z-index: 2;
padding-left: 2rem;
}
.nav--li--anchor {
color: #fff;
text-decoration: none;
}
.nav--li--anchor:hover {
cursor: pointer;
}
.cross {
position: absolute;
top: 3%;
right: 10%;
transform: translate(-3%, -10%);
}
.blur {
width: 80%;
left: 20%;
position: absolute;
min-height: 118.3vh;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
z-index: 2;
}
.hidden {
visibility: hidden;
}
.move-in {
animation: scale-in-hor-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
</style>

search overlay on full screen size (not opening)

hey all i want to create overlay full screen search on click so i tried this:
this is the navbar code:
<nav class="navbar navbar-default navbar-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa fa-search"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
and this is overlay code:
<div id="search">
<button type="button" class="close">×</button>
<form>
<input type="search" value="" placeholder="SEARCH KEYWORD(s)"/>
<button type="submit" class="btn btn-primary">Search</button>
</form>
and this is the css:
#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: white;
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
background-color: limegreen;
border: black;
}
#search .close {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: limegreen;
border-color: green;
opacity: 1;
padding: 10px 17px;
font-size: 27px;
}
#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
}
and for jquery i used this:
$(function() {
$('a[href="#search"]').on("click", function(event) {
event.preventDefault();
$("#search").addClass("open");
$('#search > form > input[type="search"]').focus();
});
$("#search, #search button.close").on("click keyup", function(event) {
if (
event.target == this ||
event.target.className == "close" ||
event.keyCode == 27
) {
$(this).removeClass("open");
}
});
$("form").submit(function(event) {
event.preventDefault();
return false;
});
});
i know it is a lot of code but i really need help, on click is not working and on inspect element, nothing is showing on console as error....
any help would be appreciated
thank you for your time guys

How can I change the color of the active button?

So I am trying to basically change the button that is currently actives color. I have tried to create a css class called "activePage" and add it to whichever button is clicked on. But that has not worked.
So basically if you click the "projects" button it should change the color of that button to red, and if you click the "about" button it should change that button to red and change the "projects" button back to its original color.
function homeTransition()
{
$(this).toggleClass('activePage');
if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("aboutContent").className = " animated slideOutLeft";
}
if(document.getElementById("projectsContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("projectsContent").className = " animated slideOutLeft";
}
if(document.getElementById("contactContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("contactContent").className = " animated slideOutLeft";
}
document.getElementById("astronaut").className = " animated fadeIn";
}
function aboutTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("aboutContent").className = "activePage animated slideInLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function projectsTransition()
{
$(this).toggleClass('activePage');
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("projectsContent").className = "activePage animated slideInLeft";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function contactTransition()
{
$(this).toggleClass('activePage');
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("contactContent").className = "activePage animated slideInLeft";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
}
//Menu
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(38, 139, 190, 0.84);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
.activePage {
color: red;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:16px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:'Lato';
font-size: 1.5em;
font-weight: 300;
}
a:hover {
color: #0dffec;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
transition: all .2s ease-in-out;
}
.button:hover {
transform: scale(1.2);
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<img id="astronaut" src="images/astronaut.png">
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" onclick="homeTransition()" class="noselect"><li><i class="fa fa-home"></i> home</li></div>
<div id="about" onclick="aboutTransition()" class="noselect"><li><i class="fa fa-user"></i> about</li></div>
<div id="projects" onclick="projectsTransition()" class="noselect"><li><i class="fa fa-code"></i> projects</li></div>
<div id="contact" onclick="contactTransition()" class="noselect"><li><i class="fa fa-paper-plane"></i> contact</li></div>
</ul>
</div>
<div class="content animated fadeInDown">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>

Your click functions are out of jQuery's scope.
I clipped out irrelevant code, so don't just copy and paste.
I change the HTML so it does not use onClick, and the binding happens inside jQuery's ready function instead. In addition, I modified the CSS to target the anchor tage which is actually responsible for the text style.
See the refactoring to your snippet I did below:
//Menu
$(function() {
function expand() {
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$('.noselect').click(function() {
$('.noselect').removeClass('activePage');
$(this).toggleClass('activePage');
});
$(".button").on('click', expand);
});
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(38, 139, 190, 0.84);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align: center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
.activePage {
color: red;
}
h1 {
margin-top: 60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding: 0;
list-style: none;
font-size: 16px;
}
li {
padding: 10px 10px;
}
a {
text-decoration: none;
padding: 10px 15px;
color: #fff;
font-family: 'Lato';
font-size: 1.5em;
font-weight: 300;
}
a:hover {
color: #0dffec;
}
.content {
position: relative;
width: 300px;
}
.button {
width: 20px;
height: 40px;
margin: 24% 36%;
padding: 14px;
cursor: pointer;
transition: all .2s ease-in-out;
}
.button:hover {
transform: scale(1.2);
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
.activePage a {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<img id="astronaut" src="images/astronaut.png">
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" class="noselect">
<li><i class="fa fa-home"></i> home</li>
</div>
<div id="about" class="noselect">
<li><i class="fa fa-user"></i> about</li>
</div>
</ul>
</div>
<div class="content animated fadeInDown">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent"></div>
<div id="projectsContent"></div>
<div id="contactContent"></div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>

There's an 'active' property in CSS that allows you to change color and other characteristics of your elements.
Example:
button:active{
background:olive;
}
button:focus{
background:olive;
}
Hope this helps

'this' variable inside homeTransition and all other functions referring to window object.
You can fix the code by:
Changing onclick function call in HTML to:
<div id="home" onclick="homeTransition(event)"
And by adding event arguement in js file:
function homeTransition(event) {
$(event.target).toggleClass('activePage');

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.active, .btn:hover {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>