# sliding menu

[browser](../../../..) ⟩ [event](../../..) ⟩ [type](../..) ⟩ [mouse](..) ⟩ [click]() ⟩ example ⟩ sliding menu

{% hint style="success" %}
click to show/hide the dropdown menu.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
* replit ⟩ [sliding menu](https://replit.com/@pegasusroe/sliding-menu#index.js) ,  require ⟩ [Node+ext](../../../../dom/type/node/+ext)

```javascript
// ⭐️ import
import { $ } from './js/ext/Node_ext.js';        // 👔 Node + ext
// ---------------------------------------------------------------

// elements
const menu = $('.menu');                // <div>
const menuTitle = $('.menu .title');    // <span>

// ⭐️ event handlers
// -------------------------------------------------------

menuTitle.onclick = () => {
    menu.classList.toggle('open');
};
```

📁 CSS

```css
/* -------- menu content -------- */
.menu ul {
    margin: 0;
    margin-left: 20px;
    padding-left: 20px;
    display: none;    /* closed */
    color: orange;
}

.menu.open ul {
  display: block;    /* open */
}

/* -------- menu title -------- */

/* <span> element */
.menu .title {
    cursor: pointer;
}

/* "::before" element */
.menu .title::before {
  content: '▶ ';    /* closed */
  font-size: 80%;
  color: green;
}

.menu.open .title::before {
  content: '▼ ';    /* open */
}
```
{% endtab %}

{% tab title="🗺️ 圖表" %}
{% embed url="https://replit.com/@pegasusroe/sliding-menu#index.js" %}
{% endtab %}

{% tab title="📗 參考" %}
* [ ] javascript.info ⟩ [Create a Sliding Menu](https://javascript.info/introduction-browser-events#create-a-sliding-menu)  ⭐️&#x20;
* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Mouse Clicks](https://eloquentjavascript.net/15_event.html#i_D5iwImkmyt)
{% endtab %}

{% tab title="📘 手冊" %}
* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ⟩ [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
* [elem.classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) - add, remove, toggle, replace CSS classes.
{% endtab %}
{% endtabs %}
