// โญ๏ธ 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 */
}