"Menu JavaScript - Lenize"
Bootstrap 4.1.1 Snippet by psd06t

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <h2>Menu de Trabalho</h2> <body> <label for="weather">Selecione a função: </label> <select id="weather"> <option value="">--Selecione uma função--</option> <option value="1">Cadastrar Automóvel</option> <option value="2">Cadastrar Pessoa</option> <option value="3">Cadastrar Venda</option> <option value="4">Sair</option> </select> <p></p> <script> var select = document.querySelector('select'); var para = document.querySelector('p'); select.addEventListener('change', setWeather); function setWeather() { var choice = select.value; if (choice === '0') { para.textContent = 'Selecione'; } else if (choice === '1') { para.textContent = 'Cadastro do automóvel.'; automovel(); } else if (choice === '2') { para.textContent = 'Cadastro de pessoa.'; pessoa(); } else if (choice === '3') { para.textContent = 'Hora de ganhar uma comissão.'; venda(); } else if (choice === '4') { para.textContent = 'Ao sair, apague a luz.'; sair(); } } function automovel() { alert("Preencha com as informações do automóvel!"); automovel["Nome"] = window.prompt('Nome do automóvel'); automovel["Modelo"] = window.prompt('Modelo'); automovel["Ano"] = window.prompt('Ano de Fabricação'); } function pessoa() { alert("Cadastre uma Pessoa!"); pessoa["Nome"] = window.prompt('Nome do comprador'); pessoa["Sobrenome"] = window.prompt('Sobrenome do comprador'); pessoa["idade"] = window.prompt('idade do comprador'); } function venda() { alert("Cadastre uma Venda"); venda["Nome"] = window.prompt('Nome do comprador'); venda["Sobrenome"] = window.prompt('Sobrenome do comprador'); venda["idade"] = window.prompt('idade do comprador'); } function sair() { alert("Ao sair, apague a luz."); } </script> </body> </html>

Related: See More

Black Dashboard
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: