> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/type/mouse/click/sliding-menu.md).

# sliding menu

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ [mouse](/web/browser/event/type/mouse.md) ⟩ [click](/web/browser/event/type/mouse/click.md) ⟩ 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](/web/browser/dom/type/node/+ext.md)

```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 %}