# \[p5.js\] When a button is pressed, I want to close the menu bar. Help

**URL:** <https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986>\
**Category:** Coding Questions\
**Created:** [December 7, 2021, 12:40pm UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986 "2021-12-07T12:40:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 7, 2021, 12:40pm UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986/1 "2021-12-07T12:40:00Z")

</div>

![fig1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0b4d61b697eefa4561c9da559ab08adf6b177355.jpeg)

1. js file

> function setup() {  
> }  
> function draw() {  
> }

1. html file

```auto
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css"> 
  
  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="sketch_211207b.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>

<body>

    <div class="wrapper">
      <input type="checkbox" id="btn" hidden>
      <label for="btn" class="menu-btn" id="menu-btn">
        <i class="fas fa-bars"></i>
        <i class="fas fa-times"></i>
      </label>
      <nav id="sidebar">
        <div class="title">GOLDSTAR IT Menu</div>     
        
        <ul class="list-items" id ="list-items">        
          <li><a href="javascript:void(0)" onclick="closeNav()"><i class="fas fa-home"></i>Home</a></li>          
          <li><a href="javascript:void(0)" onclick="CLICK2()"></i>Clients</a></li>
          
        </ul>
      </nav>
    </div>   
          

</body>
</html>

```

1. css file

```auto
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.wrapper{
  // height: 100%;
  width: 300px;
  // position: relative;
}
.wrapper .menu-btn{
  position: absolute;
  left: 20px;
  top: 10px;
  background: #4a4a4a;
  color: #fff;
  height: 45px;
  width: 45px;
  z-index: 9999;
  border: 1px solid #333;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
#btn:checked ~ .menu-btn{
  left: 247px;
}
.wrapper .menu-btn i{
  position: absolute;
  transform: ;
  font-size: 23px;
  transition: all 0.3s ease;
}
.wrapper .menu-btn i.fa-times{
  opacity: 0;
}
#btn:checked ~ .menu-btn i.fa-times{
  opacity: 1;
  transform: rotate(-180deg);
}
#btn:checked ~ .menu-btn i.fa-bars{
  opacity: 0;
  transform: rotate(180deg);
}
#sidebar{
  position: fixed;
  background: #404040;
  height: 100%;
  width: 270px;
  overflow: hidden;
  left: -270px;
  transition: all 0.3s ease;
}
#btn:checked ~ #sidebar{
  left: 0;
}
#sidebar .title{
  line-height: 65px;
  text-align: center;
  background: #333;
  font-size: 25px;
  font-weight: 600;
  color: #f2f2f2;
  border-bottom: 1px solid #222;
}
#sidebar .list-items{
  position: relative;
  background: #404040;
  width: 100%;
  height: 100%;
  list-style: none;
}
#sidebar .list-items li{
  padding-left: 40px;
  line-height: 50px;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid #333;
  transition: all 0.3s ease;
}
#sidebar .list-items li:hover{
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  box-shadow: 0 0px 10px 3px #222;
}
#sidebar .list-items li:first-child{
  border-top: none;
}
#sidebar .list-items li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}
#sidebar .list-items .icons{
  width: 100%;
  height: 40px;
  text-align: center;
  position: absolute;
  bottom: 100px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sidebar .list-items .icons a{
  height: 100%;
  width: 40px;
  display: block;
  margin: 0 5px;
  font-size: 18px;
  color: #f2f2f2;
  background: #4a4a4a;
  border-radius: 5px;
  border: 1px solid #383838;
  transition: all 0.3s ease;
}
#sidebar .list-items .icons a:hover{
  background: #404040;
}
.list-items .icons a:first-child{
  margin-left: 0px;
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #202020;
  z-index: -1;
  width: 100%;
  text-align: center;
}
.content .header{
  font-size: 45px;
  font-weight: 700;
}
.content p{
  font-size: 40px;
  font-weight: 700;
}

```

When a button is pressed, I want to close the menu bar. Help.

(Looking in order,)

1. Press the Home menu
2. I want the menu bar to disappear automatically.

Do you know how? Help.

file down load link : [sketch\_211207b.zip - Google Drive](https://drive.google.com/file/d/1bZY0W-IDpG8Q2Turu06t0Cx1eHFscuJV/view?usp=sharing)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 7, 2021, 2:30pm UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986/2 "2021-12-07T14:30:48Z")

</div>

> [@GWAK](#):
>
> When a button is pressed, I want to close the menu bar. Help.

Given everything is defined inside your HTML & CSS files, in order for your JS file to access it use p5js **select()** function:

> **[reference | p5.js](https://p5js.org/reference/#/p5/select)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Your whole menu is wrapped up inside a `<div>` element identified as _class_ “wrapper”:  
`<div class="wrapper">`

So you can reference that as a p5.Element in p5js like this:  
`wrapper = select('.wrapper');`

Then you can hide the whole thing via method p5.Element::**hide()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/hide)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

However you only wanna **hide()** it when any of the buttons is clicked.

So you’re gonna need to define a listener for it:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/mousePressed)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Your both buttons belong to a `<ul>` tag w/ _id_ “list-items”.

I’m not sure but I guess it’s worth trying to set the listener to that `<ul>` element:  
`select('list-items').mousePressed(() => wrapper.hide());`

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 7, 2021, 11:00pm UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986/3 "2021-12-07T23:00:23Z")

</div>

@GoToLoop

```auto
function setup() {

  createCanvas(500, 500);
  background(153);
  
}
var back_n = 0;
function draw() {
  background(back_n);

  
}
function click_ok() {

  cbox = select('btn'); // cbox = select('#btn');
  cbox.checked = false;
  
  //menu = select('.menu-btn'); // menu.hide(); 
  //menu.position(20,10);
  //sidebar = select('#sidebar'); // sidebar.hide(); 
  //sidebar.position(-270,0);
  
  back_n = 250;
  background(back_n);

}

```

```auto
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css"> 
  
  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="TEST_JS_211208.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>

<body>

    <div class="wrapper" id="wrapper">
      <input type="checkbox" name="check_boxx" id="btn" hidden>
      <label for="btn" class="menu-btn" id="menu-btn">
        <i class="fas fa-bars"></i>
        <i class="fas fa-times"></i>
      </label>
      <nav id="sidebar">
        <div class="title">IT Menu</div>     
        
        <ul class="list-items" id ="list-items">        
          <li><a href="javascript:void(0)" onclick="click_ok()"><i class="fas fa-home"></i>Home</a></li>          
          <li><a href="javascript:void(0)" onclick="draw()"></i>Clients</a></li>
          
        </ul>
      </nav>
    </div>   
          

</body>
</html>

```

Thanks for your reply.

1. Controlled ‘hide’ as you said.

2. However, what I really needed was

`<input type="checkbox" name="check_boxx" id="btn" hidden>`

I want to make ‘id=btn’ ‘checkbox’ false. Is there any way?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 8, 2021, 12:17am UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986/4 "2021-12-08T00:17:23Z")

</div>

> [@GWAK](#):
>
> `cbox.checked = false;`

If you need to access properties of the element itself you’ve gotta do it via p5.Element::_elt_:  
`cbox.elt.checked = false;`

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/elt)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [December 8, 2021, 1:19am UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986/5 "2021-12-08T01:19:12Z")

</div>

@GoToLoop

Thank you very much.  
You are a genius.

And one please.  
Do you have any study materials or videos related to p5.js?  
Thank you for recommending it.

Thank you very much.

[Solution]

```auto
  cbox = select('#btn'); // cbox = select('#btn');
  cbox.elt.checked = false;

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 8, 2021, 1:22am UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986/6 "2021-12-08T01:22:26Z")

</div>

> [@GWAK](#):
>
> Do you have any study materials or videos related to p5.js?

The Coding Train tutorials on YouTube is very famous: 🚆

> **[The Coding Train](https://www.youtube.com/c/TheCodingTrain/videos)**
>
> All aboard! The Coding Train is on its way with creative coding video tutorials on subjects ranging from the basics of programming languages like JavaScript to algorithmic art, machine learning, simulation, generative poetry, and more. Choo choo!