HTML - Page

This is a 'MacOS' like dropdown menu. It is a replacement for the classic select element. It is fully customizable and can be used with any element.


      <script src="assets/dropdown.js"> </script>

With html!

Red

Usage:


      <div data-dropdown="true" style="height:20px;width: 100%; visibility: hidden;"> 

        <option value="1" selected="true"><strong>Option 1</strong></option> 

        <option value="2">Option 2</option> 

        <option value="3"> <i>Option 3</i></option> 

        <option value="4" style="display: flex; align-items: center; padding-left: 4px;"> <div style="width: 30px; height: 16px; background-color: red;"></div> <span>Red</span> </option> 

      </div>

Classic select replacement

Works without dom !

Usage:


      <div id="my-dropdown" style="width: 150px; height: 20px;"></div>


      <script> 

    const d = new Dropdown(document.querySelector("#my-dropdown"), [1, 2, 3, 4, 5, "Floppa", () => "x"]); 

    d.enable(); 

    d.onselect = (value) => { console.log(value); }; 

      </script>