I'm trying to make a responsive menu for my website. I put hamburger menu and added functionality with javascript but it doesn't open and close. What I'm trying to do is when I clicked the hamburger menu, the left-side accordion menu should close and open with responsive size. You should add reset css.
Html Codes :
<!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">
<title>Sociality</title>
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;700&display=swap"
rel="stylesheet">
<!-- FONT AWESOME ICONS -->
<script src="https://kit.fontawesome.com/eb6e3d525a.js" crossorigin="anonymous"></script>
<!-- HAMBURGER MENU -->
<link href="css/hamburger.css" rel="stylesheet">
</head>
<body>
<div id="wrap-page">
<h1><a href="https://www.sociality.io" target="_blank"><span id=h1-span>sociality</span>.io</h1></a>
<button class="hamburger hamburger--collapse is-active" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<section id="left-side" >
<div id="logo" class="active">
<ul class="logo-ul">
<li class="logo-li"> <a href="#"><img class="img-logo" src="images/instagramlogo.png"
alt="instagram-logo"></a> </li>
<li class="logo-li"> <a href="#"><img class="img-logo" src="images/twitterlogo.png" alt="twitter-logo"></a>
</li>
<li class="logo-li"> <a href="#"><img class="img-logo" src="images/pinterestlogo.png"
alt="pinterest-logo"></a> </li>
<li class="logo-li"> <a href="#"><img class="img-logo" src="images/linkedinlogo.png" alt="linkedin-logo"></a>
</li>
<li class="logo-li"> <a href="#"><img class="img-logo" src="images/youtubelogo.png" alt="youtube-logo"></a>
</li>
<li class="logo-li"> <a href="#"><img class="img-logo" src="images/facebooklogo.png" alt="facebook-logo"></a>
</li>
</ul>
</div>
<div id="accordion">
<ul>
<li class="active">
<h3><span class="left-icon icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span
class="notification-span">29</span></h3>
</li>
<li>
<h3 class="tooltip"><span class="left-icon icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul class">
<li class="accordion-li"><a href="#">Lorem</a></li>
<li class="accordion-li"><a href="#">Ipsum</a></li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud"><i class="fas fa-edit"></i></span>Publish</h3>
<ul>
<li class="accordion-li"><a href="#">Lorem</a></li>
<li class="accordion-li"><a href="#">Ipsum</a></li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud"><i class="far fa-comments"></i></span>Engage</h3>
<ul>
<li class="accordion-li"><a href="#">Lorem</a></li>
<li class="accordion-li"><a href="#">Ipsum</a></li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud"><i class="fas fa-volume-up"></i></span>Listen</h3>
<ul>
<li class="accordion-li"><a href="#">Lorem</a></li>
<li class="accordion-li"><a href="#">Ipsum</a></li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud"><i class="fas fa-chart-line"></i></span>Report</h3>
<ul>
<li class="accordion-li"><a href="#">Lorem</a></li>
<li class="accordion-li"><a href="#">Ipsum</a></li>
</ul>
</li>
</ul>
</div>
</div>
</section>
<section id="right-side">
<ul style="list-style: disc;" class="rightside-ul">
<li style="color:#acacac" class="rightside-li">
<a href="#"><span style="color:black">Published</span></a>
</li>
<li style="color:#3ac183" class="rightside-li">
<a href="#"><span style="color:black">Scheduled</span></a>
</li>
<li style="color:#f7bf38; white-space: nowrap;" class="rightside-li">
<a href="#"><span style="color:black">Need Approval</span></a>
</li>
<li style="color:#fb6450" class="rightside-li">
<a href="#"><span style="color:black">Error</span></a>
</li>
<li style="color:#67b1f2" class="rightside-li">
<a href="#"><span style="color:black">Notes</span></a>
</li>
<div class="right-image">
<img src="images/fakefacegenerator.jpg" alt="profileimage">
</div>
</ul>
<h4>14 January 2016</h4>
<!--Card Components -->
<div class="card-area">
<div class="card">
<div class="card-component">
<div style="background-color: #3ac183;" class="statusbar">
<span class="right-icon"> <i class="fab fa-facebook-f"></i> </span>
</div>
<div class="content-area">
<div class="content-nav">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul">
<li> <a href="#"><span class="reaction-span"> <i class="fas fa-ban"></i> </a></span></li>
<li> <a href="#"><span class="reaction-span"> <i class="far fa-trash-alt"></i> </a></span></li>
<li> <a href="#"><span class="reaction-span"> <i class="fas fa-info-circle"></i> </a></span></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container">
<img src="images/icecream1.jpg" alt="icecream1">
</div>
<div class="card-footer-nav">
<ul class="card-footer-ul">
<li> <a href="#"> <span class="reaction-span"><i class="far fa-thumbs-up"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-comment"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="fas fa-share-alt"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-eye"></i></span> 0 </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-component">
<div style="background-color: #f7bf38;" class="statusbar">
<span class="right-icon"> <i class="fab fa-twitter"></i> </span>
</div>
<div class="content-area">
<div class="content-nav">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul">
<li> <a href="#"><span class="reaction-span"> <i class="fas fa-check"></i> </a></span></li>
<li> <a href="#"><span class="reaction-span"> <i class="far fa-trash-alt"></i> </a></span></li>
<li> <a href="#"><span class="reaction-span"> <i class="fas fa-info-circle"></i> </a></span></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container">
<img src="images/icecream2.jpg" alt="icecream1">
</div>
<div class="card-footer-nav">
<ul class="card-footer-ul">
<li> <a href="#"> <span class="reaction-span"><i class="far fa-thumbs-up"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="fas fa-retweet"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="fas fa-share-alt"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-eye"></i></span> 0 </a></li>
</ul>
</div>
</div>
</div>
</div>
<h4>12 January 2016</h4>
<!--Card Components -->
<div class="card-area">
<div class="card">
<div class="card-component">
<div style="background-color: #acacac;" class="statusbar">
<span class="right-icon"><i class="fab fa-facebook-f"></i> </span>
</div>
<div class="content-area">
<div class="content-nav">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul">
<li> <a href="#"><span class="reaction-span"> <i class="far fa-trash-alt"></i> </a></span></li>
<li> <a href="#"><span class="reaction-span"> <i class="fas fa-info-circle"></i> </a></span></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container">
<img src="images/dog1.jpg" alt="icecream1">
</div>
<div class="card-footer-nav">
<ul class="card-footer-ul">
<li> <a href="#"> <span class="reaction-span"><i class="far fa-thumbs-up"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-comment"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="fas fa-share-alt"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-eye"></i></span> 0 </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-component">
<div style="background-color: #acacac;" class="statusbar">
<span class="right-icon"> <i class="fab fa-twitter"></i> </span>
</div>
<div class="content-area">
<div class="content-nav">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul">
<li> <a href="#"><span class="reaction-span"> <i class="far fa-trash-alt"></i> </a></span></li>
<li> <a href="#"><span class="reaction-span"> <i class="fas fa-info-circle"></i> </a></span></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container">
<img src="images/dog1.jpg" alt="icecream1">
</div>
<div class="card-footer-nav">
<ul class="card-footer-ul">
<li> <a href="#"> <span class="reaction-span"><i class="far fa-thumbs-up"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="fas fa-retweet"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="fas fa-share-alt"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-eye"></i></span> 0 </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-component">
<div style="background-color: #acacac;" class="statusbar">
<span class="right-icon"> <i class="fab fa-instagram"></i> </span>
</div>
<div class="content-area">
<div class="content-nav">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul">
<li> <a href="#"><span class="reaction-span"> <i class="far fa-trash-alt"></i> </a></span></li>
<li> <a href="#"><span class="reaction-span"> <i class="fas fa-info-circle"></i> </a></span></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container">
<img src="images/dog1.jpg" alt="icecream1">
</div>
<div class="card-footer-nav">
<ul class="card-footer-ul">
<li> <a href="#"> <span class="reaction-span"><i class="far fa-thumbs-up"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-comment"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="fas fa-share-alt"></i></span> 0 </a></li>
<li> <a href="#"> <span class="reaction-span"><i class="far fa-eye"></i></span> 0 </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!--External Javascript-->
<script src="js/jquery2.js" type="text/javascript"></script>
</body>
</html>
Css Codes:
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
height: 100%;
background-color: #f5f7f8;
}
h1 {
text-align: center;
padding: 0.6em 1em;
font-size: 1.4em;
background-color: #31363b;
display: inline-block;
width: 20%;
position: fixed;
}
h1>a {
text-decoration: none;
color: #202326;
;
transition: all 1s ease-in-out;
font-weight: 900;
}
h1:hover>a {
text-decoration: none;
color: #aaa;
;
}
#h1-span {
font-weight: bold;
display: inline;
}
/* Left Side */
#left-side {
height: 100%;
width: 20%;
background-color: #2a2f33;
position: fixed;
display: flex;
overflow-x: hidden;
top: 44px;
left: 0;
}
/*Logo section*/
.logo-ul {
width: 6%;
background-color: #2a2f33;
}
.logo-li {
padding: 0.5em;
}
.img-logo {
width: 40px;
height: 40px;
opacity: 0.4;
transition: all 1s ease;
}
.img-logo:hover {
opacity: 1;
}
.notification-span {
font-size: 10px !important;
border-radius: 5px;
border: 1px solid green;
margin-left: 8px;
padding: 1px 12px;
}
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color: #fff;
}
#accordion h3 {
text-transform: uppercase;
font-size: 11px;
line-height: 30px;
padding: 10px 10px;
cursor: pointer;
transition: all .2s linear;
}
#accordion h3:hover {
background-color: #f55661;
}
#accordion h3:hover i {
color: #fff;
}
/* links */
#accordion ul ul li a {
color: white;
display: block;
font-size: 11px;
line-height: 27px;
padding: 0 15px;
text-decoration: none;
transition: all .1s;
}
/* hover effect */
#accordion ul ul li a:hover {
color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul {
display: none;
list-style-type: disc;
padding: 1.8em;
background: #32363a
}
#accordion ul ul:first-child {
background: #32363a;
}
/* #accordion li.active ul{
display:block;
}*/
/* Icon font styles */
#accordion h3 span {
font-size: 16px;
padding-right: 10px;
}
.left-icon i{
color:#f55661;
}
.open {
background-color: #f55661;
}
.open i {
color: white;
}
/* Right Side */
#right-side {
margin-left: 20%;
width: 75%;
padding: 10px;
}
.right-image{
display: flex;
justify-content: flex-end;
width: 100%;
}
.right-image img{
width: 3em;
height: 3em;
border-radius: 50%;
}
.rightside-ul {
display: flex;
margin: 1em;
}
.rightside-li {
margin: 1em;
font-size: .8em;
}
.rightside-li>a {
text-decoration: none;
}
/*Card Area*/
.card-area {
display: flex;
flex-wrap: wrap;
}
/*Card Component*/
.card {
padding: 1em;
}
h4 {
color: #959595;
font-size: 22px;
margin-left: 1em;
}
.right-icon i{
color: #fff;
}
.card-component {
display: flex;
padding: 1em;
}
.content-area {
padding: 1em;
background-color: #fff;
border-radius: 5px;
display: flex;
flex-direction: column;
align-content: center;
}
.statusbar {
min-width: 1.5em;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.content-nav {
display: flex;
}
.content-area p {
width: 300px;
text-align: left;
align-items: center;
margin-bottom: 1em;
}
.content-ul {
display: flex;
padding-bottom: 2em;
margin-left: 4em;
}
.content-ul li {
display: flex;
}
.content-ul li a {
text-decoration: none;
margin-right: 1em;
}
.img-container {
width: 300px;
height: 200px;
margin:0 auto;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-footer-ul {
display: flex;
justify-content: space-around;
margin-top: 1em;
}
.card-footer-ul li a {
text-decoration: none;
}
.reaction-span{
color: #acacac;
}
@media screen and (max-width: 988px){
body{
font-size: .8em;
}
#left-side {
min-width: 230px;
}
h1{
font-size: 1.2em;
min-width: 230px;
padding:1em;
}
#accordion h3{
font-size: .7em;
}
}
hamburger.css Codes comes from this website:
https://jonsuh.com/hamburgers/
Jquery Codes:
$("#accordion h3").click(function() {
$(this).toggleClass('open');
$(this).parent().siblings().find('h3').removeClass('open');
$("#accordion ul ul").slideUp("fast");
if (!$(this).next().is(":visible")) {
$(this).next().slideDown("fast");
}
})
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
var x = $("#myLinks");
});
Aucun commentaire:
Enregistrer un commentaire