jQuery menu not toggeling class name - javascript

The Menu is not toggling. When I click the toggle button, I see the following error in my JavaScript:
"message": "Uncaught TypeError: Cannot read property 'toggle' of undefined",
"filename": "https://stacksnippets.net/js",
"lineno": 159,
"colno": 44
}
//java.js
function toggleMenu() {
document.getElementById('Menu').classlist.toggle('active');
}
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#Menu {
padding: 0px;
position: fixed;
width: 400px;
height: 100%;
background: #00ff00;
left: -400px;
}
#Menu.active {
display: 0px;
}
#menu ul li {
color: rgba(230, 230, 230, 0.9);
list-style: none;
padding: 15px 10px;
top: 40px;
position: relative;
width: 200px;
vertical-align: middle;
cursor: pointer;
background-color: #00ff00;
border-top: 4px solid #ff0000;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#Menu .toggle-btn {
position: absolute;
left: 410px;
top: 65px;
}
#Menu .toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000;
margin: 5px 0px;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0;
}
#menu ul li:hover {
background-color: #000;
}
#menu>ul>li {
border-right: 4px solid #ff0000;
border-left: 2px solid #000;
}
.bottom {
border-bottom: 4px solid #ff0000;
}
#menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
border-left: 4px solid #ff0000;
border-bottom: 4px solid #ff0000;
border-right: 4px solid #ff0000;
visibility: hidden;
left: 100%;
top: -2%;
}
#menu ul li:hover>ul {
opacity: 1;
visibility: visible;
}
#Menu ul li a {
text-decoration: none;
}
i {
margin-left: 15px;
}
#menu>ul>li:nth-of-type(3)::after {
content: "+";
position: absolute;
margin-left: 60%;
color: #fff;
font-size: 18px;
}
#menu>ul>li:nth-of-type(2)::after {
content: "+";
position: absolute;
margin-left: 56%;
color: #fff;
font-size: 18px;
}
<!doctype html>
<html>
<head>
<title>vertical menu with css</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="java.js"></script>
</head>
<body>
<div id="Menu">
<div class="toggle-btn" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><i class="fas fa-home">Hjem</i></li>
<li><i class="fas fa-user-tie">Bjørn</i>
<ul>
<li>børn 1 </i></li>
<li>børn 2 </i> </li>
<li>børn 3 </i></li>
</ul>
<li><i class="fas fa-user">Cille</i>
<ul>
<li>børn 1 </li>
<li>børn 2 </li>
<li>børn 3 </li>
</ul>
<li><i class="fas fa-user-tie">David</i></li>
<li class="bottom"><a href="#"><i class="fas fa-user-tie">Fin</i>/a></li>
</ul>
</div>
</body>
</html>


There where quite a bunch of bugs. Please compare my version with yours and you will find the differences.
Take care of case-sensitivity (e.g. classList and classlist, #Menu and #menu)
Look out for closing HTML tags correctly. There where some mistakes.
Remove unncessary elements like </i>. It might be a left over from copy-pasting.
Nethertheless, I would recommend you to use a syntax-highlighting tool, so called IDE. Free versions are for instance VS Code, Atom etc. And afterwards get familiar with the syntax. Mozilla Developer Network is a quite sophisticated and comprehensive source and knowledge base curated by the community.
function toggleMenu() {
document.getElementById('Menu').classList.toggle('active');
}
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#Menu {
padding: 0px;
position: fixed;
width: 400px;
height: 100%;
background: #00ff00;
left: -400px;
transition: left 360ms ease-in;
}
#Menu.active {
left: 0;
}
#Menu ul li {
color: rgba(230, 230, 230, 0.9);
list-style: none;
padding: 15px 10px;
top: 40px;
position: relative;
width: 200px;
vertical-align: middle;
cursor: pointer;
background-color: #00ff00;
border-top: 4px solid #ff0000;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#Menu .toggle-btn {
position: absolute;
left: 410px;
top: 65px;
}
#Menu .toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000;
margin: 5px 0px;
}
#Menu ul {
list-style: none;
margin: 0px;
padding: 0;
}
#Menu ul li:hover {
background-color: #000;
}
#Menu>ul>li {
border-right: 4px solid #ff0000;
border-left: 2px solid #000;
}
.bottom {
border-bottom: 4px solid #ff0000;
}
#Menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
border-left: 4px solid #ff0000;
border-bottom: 4px solid #ff0000;
border-right: 4px solid #ff0000;
visibility: hidden;
left: 100%;
top: -2%;
}
#Menu ul li:hover>ul {
opacity: 1;
visibility: visible;
}
#Menu ul li a {
text-decoration: none;
}
i {
margin-left: 15px;
}
#Menu>ul>li:nth-of-type(3)::after {
content: "+";
position: absolute;
margin-left: 60%;
color: #fff;
font-size: 18px;
}
#Menu>ul>li:nth-of-type(2)::after {
content: "+";
position: absolute;
margin-left: 56%;
color: #fff;
font-size: 18px;
}
<!doctype html>
<html>
<head>
<title>vertical menu with css</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="java.js"></script>
</head>
<body>
<div id="Menu">
<div class="toggle-btn" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><i class="fas fa-home">Hjem</i></li>
<li><i class="fas fa-user-tie">Bjørn</i>
<ul>
<li>børn 1</li>
<li>børn 2</li>
<li>børn 3</li>
</ul>
<li><i class="fas fa-user">Cille</i>
<ul>
<li>børn 1 </li>
<li>børn 2 </li>
<li>børn 3 </li>
</ul>
<li><i class="fas fa-user-tie">David</i></li>
<li class="bottom"><i class="fas fa-user-tie">Fin</i></li>
</ul>
</div>
</body>
</html>


Looks like the problem is that you are not using classList correctly, it needs to be camel-cased like below:
function toggleMenu() {
document.getElementById('Menu').classList.toggle('active');
}
More of a semantic thing here too, but why is your file called java.js? Try to name files based on the functions that they perform, or the features that they encapsulate. It'll save you some headaches later on!

Related

Change height of navbar button and change it from (:selected) to (:hover)

My navbar functions in a :selected way, which means the dropdown menu only shows when the button is selected. I would like to change it to hover instead, but when I adjust it in CSS, it doesn't change anything. I'm afraid of adjusting anything else as it may mess other things up too.
I also tried to change the height of the buttons so that the bottom-border fits perfectly at the bottom of the button when hovering over the button. Yet when I mess around with the height, hover and padding it shows no effect.
I'm not sure what I did wrong with my navbar I think I broke it, and I'm not sure where the mistakes were made.
I would really appreciate some help with fixing my navbar and perhaps a bit of advice on how the solution came to be.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/194918e54c.js" crossorigin="anonymous"></script>
<title>Localhost</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="faq.css">
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
<img src="photos/ae-header-logo.png" alt="" srcset="">
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
html,body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(255, 255, 255) !important;
}
.navigation {
height: 120px;
background-color: green;
}
.brand {
position: absolute;
top: 1%;
left: 0%;
float: left;
text-transform: uppercase;
font-size: 1.9em;
}
.brand img{
position: relative;
margin-top: 0%;
width: 500px;
padding-left: 0%;
left: 0%;
float: left;
}
.brand img:hover{
box-shadow: 10px;
transition: all ease-in-out 0.5s;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
background-color: red;
}
nav {
float: right;
position: relative;
left: 20%;
margin-top: 20px;
background-color: rgb(255, 0, 212);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 100px;
color: black;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
border-bottom: black 2px solid;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}

.nav-list li:hover ul{
display: block
}
Hope it's what you're looking for

Sidebar going beyond screen on resize

I have an HTML page with a sidebar. The sidebar is shown when i click 'Upload Data' button. When I resize the window, the sidebar's header (random portion from top) goes beyond the screen and the only way to retrieve is to refresh the page to start fresh. I need a solution for keeping the sidebar inside the window.
Initial body image
After resizing
HTML CODE
HEAD
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.pngkit.com/png/full/327-3270091_demographic-icon-sign.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar_style_final.css') }}">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<style>
.fa {
margin-left: -8px;
margin-right: 8px;
}
.bs-example {
margin: 20px;
}
html{
margin:0;
height:100%;
}
</style>
sidebar_style_final.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 450px;
position: fixed;
top: 0;
right: -450px;
height: 100%;
z-index: 999;
background: #ffffff;
color: #r45;
transition: all 0.3s;
overflow: auto;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
right: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #7386D5;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #7386D5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
BODY
<body onload="start_nav()" onresize="change_sidebar()">
<div class="grey_bound" id="grey_bound"></div>
<div class="wrapper">
<!-- Sidebar -->
<div id="sidebar">
<div id="dismiss" style="left: 30px; top: 20px;" onclick="hide_grey_bound()">
<i class="fas fa-arrow-right" onclick="hide_grey_bound()"></i>
</div>
<div class="sidebar-header" align="right">
<h3>Upload new data</h3>
</div>
<br/>
<div class="bs-example" style="width:400px;position:relative;left:10px;">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#shp_files" class="nav-link" data-toggle="tab" id='new_tab'>Shape Files</a>
</li>
<li class="nav-item">
Category Files
</li>
</ul>
<div class="tab-content" id="tab_content" style="height: 600px; overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>
</div>
</div>
<!-- Page Content -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info" style="position: relative;float: right;right: 10px;" onclick="function show_grey_bound() { document.getElementById('grey_bound').style.display = 'block'; }
show_grey_bound()">
<i class="fas fa-caret-square-up"></i>
<span>Upload Data</span>
</button>
</div>
</div>
</body>
SCRIPT
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
I have already tried
setting document.getELementById('sidebar').scrollTop = 0 onresize of
body.
changing the top of the sidebar onresize.
to give margin-top to 0.
Can anyone help me with this. Like I said, I need the side bar to stay inside.

You can remove the height in your Sidebar content div
<div class="tab-content" id="tab_content" style="overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>

Responsive header not opening or closing header

I'm creating a responsive header for a website I'm creating and I'm not getting this output where when my browser gets small enough the bars icon comes up to press. But for some reason when I try to open up the menu it does not work. I'm looking for some help on this I can't seem to figure it out as I'm not very knowledgeable in JavaScript, CSS, HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="css1/headercss2.css">
<script src="javascript/script.js" defer></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i>
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>
<script src="javascript/script.js"></script>
</body>
</html>
CSS
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons{
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
display: none;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225,225,225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu{
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover > .sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover > .sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display:none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover > .sub-menu{
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times{
display: block;
}
nav.active .fas fa-bars{
display: none;
}
nav.active .nav-list {
display:flex;
}
}
JavaScript
const selectElement = (element) => document.querySelector(element);
selectElement('.menu-icons').addEventListener('click', () => {
selectElement{'nav').classList.toggle('active');
);

You have an extra { where you should have a (:
document.querySelector('.menu-icons').addEventListener('click', () => {
document.querySelector('nav').classList.toggle('active');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
html {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.containter {
width: 100%;
max-width: 117rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.menu-icons {
color: #eee;
font-size: 4rem;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1500;
}
nav {
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border-bottom: 1px solid rgba(225, 225, 225, 0.1);
}
.logo {
display: flex;
margin-right: 5rem;
}
.nav-list {
display: flex;
width: 100%;
align-items: center;
}
.nav-list li {
line-height: 8rem;
position: relative;
}
.sub-menu li {
line-height: 4rem;
}
.nav-list a {
display: block;
color: white;
background-color: #1E90FF;
padding: 0 1.5rem;
font-size: 1.4rem;
text-transform: uppercase;
transition: color 650ms;
}
.nav-list a:hover {
color: black;
background-color: yellow;
}
.btn {
padding: 1.3rem;
display: inline-block;
background-color: #1E90FF;
border: 2px solid #1E90FF;
border-radius: 5rem;
}
.btn:hover {
color: black;
background-color: yellow;
}
.sub-menu {
width: 20rem;
display: block;
position: absolute;
border-top: 3px solid #00BFFF;
z-index: 100;
top: 16rem;
transition: all 650ms ease;
opacity: 0;
visibility: hidden;
}
.sub-menu::before {
content: '';
position: absolute;
top: -2.5rem;
left: 3rem;
border: 1.2rem solid transparent;
border-bottom-color: #00BFFF;
}
.sub-menu .sub-menu::before {
top: .9rem;
left: -2.5rem;
border: 1.2rem solid transparent;
border-right-color: #00BFFF;
}
.sub-menu .sub-menu {
border-top: none;
border-left: 3px solid #00BFFF;
top: 0;
left: 160%;
}
.nav-list li:hover>.sub-menu {
top: 8rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover>.sub-menu {
top: 0;
left: 100%;
}
li.move-right {
margin: auto 0 auto auto;
line-height: initial;
}
#media screen and (max-width: 850px) {
.nav-list {
position: fixed;
top: 0;
left: 0;
height: 100vh;
display: none;
align-items: initial;
flex-direction: column;
background-color: #1E90FF;
z-index: 1000;
}
.nav-list li {
line-height: 6rem;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: #00BFFF;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-list li:hover>.sub-menu {
opacity: 1;
visibility: visible;
max-height: initial;
}
li.move-right {
margin: 0 auto 0 0;
line-height: initial;
}
.menu-icons {
display: block;
}
.fas fa-times {
display: none;
}
nav.active .fas fa-times {
display: block;
}
nav.active .fas fa-bars {
display: none;
}
nav.active .nav-list {
display: flex;
}
}
<header>
<div class="container">
<nav>
<div class="menu-icons">
<i class="fas fa-bars"></i> text
</div>
<a href="#" class="logo">
<img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
</a>
<ul class="nav-list">
<li>
Home
</li>
<li>
<a href="#">Services
<i class="fas fa-sort-down"></i>
</a>
<ul class="sub-menu">
<li>
Business Printing
</li>
<li>
Canvas Printing
</li>
<li>
Embroidery
</li>
<li>
Signs
</li>
</ul>
</li>
<li>
Partners
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="move-right btn">
Cart
</li>
</ul>
</nav>
</div>
</header>

HTML/CSS: Add Icon to Text Button

I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.
Keeping this effect, is there a way to do the following:
To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)
Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do
.help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.
The sprites I'm going to using for the background/icons are in the form of:
{url(../theme/images/top_sprites.png) no-repeat -2px 0;}
So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>

You could animate a pseudoelement on the anchor.
Example:
.header {
min-height: 50px;
background-color: #008b10;
}
.menu {
padding: 0 16px;
font-family: Raleway, arial, sans-serif;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
padding: 16px 5px;
display: inline-flex;
align-items: center;
flex-direction: column;
position: relative;
}
.menu a span {
position: relative;
}
.menu a:before {
transition: 0.4s;
content: '';
display: block;
position: absolute;
background: white;
opacity: 0;
transform: scaleY(.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.menu a:hover:before {
transform: scaleY(1);
opacity: 1;
}
.menu a img {
max-width: 15px;
display: block;
position: relative;
padding-bottom: 4px;
}
.menu a:hover {
color: #008b10;
}
<div class=header>
<div class="menu">
<a href="#">
<img src="https://unsplash.it/15">
<span>Help</span>
</a>
<a href="#">
<img src="https://unsplash.it/15">
<span>Logout</span>
</a>
</div>
</div>

.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>
</a>
<a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>

---CSS---
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---JS---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}
---HTML---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>

Change the content(icon) of a div when clicked

I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!

You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>

$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});

Categories