html-selectMenu

Simple tools to create drop down menu or select menu

Usage

// html element created using l library from html-dom.jsimport{l}from"https://deno.land/x/html_dom@v1.0.2/html-dom.js"import{selectMenu}from'https://deno.land/x/html_selectmenu/mod.js'// please change with the latest version// sample of select menu// in this sample the button text will be adjusted based on selectionconsttheselectMenu=selectMenu({title:'Select Me',// optionallist:[// required{value:'First Menu',active:true},// active should be only one{value:'Second Menu'},{value:'Third Menu'}],fn:(val)=>alert(`You select Menu of ${val}`)// required})// sample of drop menu// in this sample the button text remain fixedconstthedropMenu=selectMenu({title:'Select Me',// optionalbutton:l.div('button'),// required for drop menu list:[// required{value:'First Menu'},// no need to put active in any of these items{value:'Second Menu'},{value:'Third Menu'}],fn:(val)=>alert(`You click drop Menu of ${val}`)// required})// sample of drop menu// in this sample using icon that can toggle to cross using the help of 'data-icon' and 'data-click'// attribute to store icon nameconstthedropMenu=selectMenu({title:'Select Me',// optionalbutton:l.div([],{'data-icon':'menu','data-click':'cross'}),// required for drop menu list:[// required{value:'First Menu'},// no need to put active in any of these items{value:'Second Menu'},{value:'Third Menu'}],fn:(val)=>alert(`You click drop Menu of ${val}`)// required})

Preview

• Drop Menu preview

• Select Menu preview

Demo

Demo is available by calling > deno run --allow-read --allow-net serve.js