✨sliding menu

browser ⟩ event ⟩ type ⟩ mouse ⟩ click ⟩ example ⟩ sliding menu

click to show/hide the dropdown menu.

💈範例

• replit ⟩ sliding menu , require ⟩ Node+ext

// ⭐️ 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

/* -------- 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 */
}

🗺️ 圖表

📗 參考

• javascript.info ⟩ Create a Sliding Menu ⭐️

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Mouse Clicks

📘 手冊

• Event ⟩ UIEvent ⟩ MouseEvent ⟩ click event

• elem.classList - add, remove, toggle, replace CSS classes.