我正在尝试为响应大小制作开-关菜单。我用这个代码隐藏菜单
left: -50%;但是当我尝试用这个代码打开它时，它不起作用。
# left-side.active {
left: 60%;
}以下是我的jquery切换代码：
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}这是我的完整代码：
$("#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");
}
})
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}
* {
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;
}
/* RESPONSİVE */
@media screen and (max-width: 988px) {
body {
font-size: .8em;
}
#left-side {
min-width: 230px;
left: -50%;
/*This hides the menu to left*/
}
#right-size {
margin-left: 10%;
width: 70%;
padding: 6px;
}
h1 {
font-size: 1.2em;
min-width: 230px;
padding: 1em;
display: none;
}
#accordion h3 {
font-size: .7em;
}
#left-side.active {
left: 60%;
}
.leftsidebarButton {
position: absolute;
left: 5%;
top: 20px;
cursor: pointer;
}
.leftsidebarButton::before {
content: "\f0c9";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
font-size: 2.2em;
position: absolute;
padding: 5px;
}
}<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/eb6e3d525a.js" crossorigin="anonymous"></script>
<div id="wrap-page">
<h1><a href="https://www.sociality.io" target="_blank"><span id=h1-span>sociality</span>.io</h1></a>
<section id="left-side" onclick="toggleLeftSideBar()">
<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>
<div class="leftsidebarButton "></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>
<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>
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
1条答案
按热度按时间jei2mxaa1#
我将提供一个更简单的方法，你可以遵循隐藏和显示边栏