stackoom
  简体   繁体   中英

Off canvas menu - onclick function issue

 原文  2020-02-28 12:28:28  9   2    javascript/ css/ off-canvas-menu

Question

I'm currently messing around with a personal project - quite new to the frontend world.

I have an off-canvas slide in menu working, however I cannot open it again after the first time of clicking the toggle button.

I am using the onclick function and then using CSS to build the transitions in and out of the viewport.

Not sure where I am going wrong so would appreciate some help!

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <title>Grid Challenge</title>
</head>
<body>

    <div id="sidebar">
       <div class="close">
        <i class="material-icons" onclick="hide()">
            close
            </i>
        </div>
        <ul>
            <li>Home</li>
            <li>Shop</li>
            <li>Blog</li>
            <li>About us</li>
            <li>Contact Us</li>
        </ul>
    </div>

          <header>
         <section class="logo">
            <div id="logo"><h3>minera.</h3></div>
            </section>
          </header>

          <section class="header-bottom">
            <div class="icons">
                <a href=""><i class="material-icons">search </i></a>
                <a href=""><i class="material-icons">person_outline</i></a>
                <a href=""><i class="material-icons">shopping_cart</i></a>
            </div>

            <div class="toggle-btn" onclick ="show()">
                <span> </span>
                <span> </span>
                <span> </span>
            </div>
        </section>

<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit-icons.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

CSS 


 @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body{
margin:0;
height:100vh;
font-family: "Poppins";
color:#3e3e3e;
}

header{
display: flex;
margin:3em;
justify-content: center;
}

#logo h3{
font-family:"poppins";
font-size:20px;
}

.header-bottom{
display:flex;
justify-content: center;
align-items:flex-start;
margin-top:-50px;
}


.icons{
display:inline-flex;
}

.icons a i {
    margin-left:8px;
    margin-right:8px;
    color:black;
}

.toggle-btn span{
width:25px;
height:4px;
background-color: black;
margin-top:2px;
display:block;
}


#sidebar{
position: absolute;
width:220px;
height:100%;
background:white;
left:-250px;
transition: .4s;
}

#sidebar ul li{
list-style:none;
padding-top:20px;
padding-bottom:20px;
}

#sidebar.active{
left:0;
}

#sidebar.hide{
    left:-250px;
}

.close{
display: flex;
justify-content: end;
}

JS 

function show(){
document.getElementById('sidebar').classList.toggle('active');
}

function hide(){
document.getElementById('sidebar').classList.toggle('hide');
}

2 answers

solution1
 0 ACCPTED  2020-02-28 12:46:40

You only have to toggle one class to get the desired effect. Only set one toggle function, this will toggle the class (add the class when it doesn't excist, remove when it does excist)

Html (only the buttons with the toggle function) 

<i class="material-icons" onclick="toggle()">
  close
</i>

<div class="toggle-btn" onclick ="toggle()">
  <span> </span>
    <span> </span>
    <span> </span>
</div>

Javascript 

function toggle(){
  document.getElementById('sidebar').classList.toggle('active');
}

Css 

#sidebar {
  position: absolute;
  width:220px;
  height:100%;
  background:white;
  left:-250px;
  transition: .4s;
}

#sidebar.active{
  left:0;
}

solution2
 0  2020-02-28 12:54:03

Call show() on click of X(close button). Please note CSS is minified(It is same CSS what is mention in question).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
    <title>Grid Challenge</title>
</head>
<style>
    @import url(https://fonts.googleapis.com/css?family=Poppins&display=swap);body{margin:0;height:100vh;font-family:Poppins;color:#3e3e3e}header{display:flex;margin:3em;justify-content:center}#logo h3{font-family:poppins;font-size:20px}.header-bottom{display:flex;justify-content:center;align-items:flex-start;margin-top:-50px}.icons{display:inline-flex}.icons a i{margin-left:8px;margin-right:8px;color:#000}.toggle-btn span{width:25px;height:4px;background-color:#000;margin-top:2px;display:block}#sidebar{position:absolute;width:220px;height:100%;background:#fff;left:-250px;transition:.4s}#sidebar ul li{list-style:none;padding-top:20px;padding-bottom:20px}#sidebar.active{left:0}#sidebar.hide{left:-250px}.close{display:flex;justify-content:end}
</style>
<body>
<div id="sidebar">
    <div class="close">
        <i class="material-icons" onclick="show()">
            close
        </i>
    </div>
    <ul>
        <li>Home</li>
        <li>Shop</li>
        <li>Blog</li>
        <li>About us</li>
        <li>Contact Us</li>
    </ul>
</div>
<header>
    <section class="logo">
        <div id="logo"><h3>minera.</h3></div>
    </section>
</header>
<section class="header-bottom">
    <div class="icons">
        <a href=""><i class="material-icons">search </i></a>
        <a href=""><i class="material-icons">person_outline</i></a>
        <a href=""><i class="material-icons">shopping_cart</i></a>
    </div>
    <div class="toggle-btn" onclick="show()">
        <span> </span>
        <span> </span>
        <span> </span>
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit-icons.min.js"></script>
<script src="js/main.js"></script>
</body>
<script>
function show(){
    document.getElementById('sidebar').classList.toggle('active');
}
</script>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Off canvas responsive menu - open and close issue Slide in menu - off canvas Foundation 6 Off Canvas Menu Add swipe function on my off-canvas menu Off canvas menu not working on Iphone 5 off canvas menu html css Off-canvas menu animation Menu off canvas bug mobile Foundation - Off Canvas Scroll Issue FadeOut menu onClick function
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM