/MagicMenu

Magic menu made with javascript, html, and css

Primary LanguageHTML

About

I made this to learn more of css after see a video, i tried to no copy the max of code that i can, so my code is my own version.

How to use

For use thie magic menu on your project, you can copy this css file, change the variables in the :root selector and add this html code on your body:

<div class="magic-menu" --type="footer">
    <!--I maked the --type to alow to create left/right menus, bud i will not implement it.-->
    <ul class="options">
        <!--OPTIONS-->
    </ul>
</div>

The option need to have this format:

<li class="opt">
<span class="opt-icon" style="--accent: <OPTION BACKGROUND>; --accent-dark: <OPTION ICON COLOR (if supported my your icon provider...)>;"><!--The option icon--></span>
    <span class="opt-title"><!--Your option title--></span>
</li>

Finally you will need to add this script:

var options = document.querySelectorAll('.opt')
function setOption() {
    options.forEach((item) => item.classList.remove('active'))
    this.classList.add('active')
}
options.forEach((item) => item.addEventListener('click', setOption))