Material Design | dropdowns

Hide and Show more easy to use them in dropdown buttons.

Color and Styleable.

Clickable Dropdowns

Clickable Dropdown

Click on the button to open the dropdown menu.

<!DOCTYPE html>
<html>
<title>Clickable Dropdowns</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
https://www.cdn.getweb.dev/docs/v1.1/css/getweb_v.1.1.css">
<body>

<div class="gw-container">
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="gw-dropdown-hover">
<button onclick="myFunction()" 
class="gw-button gw-dropdown gw-green">Click Me!</button>
<div id="btn-dropdown-click" 
class="gw-dropdown-content  gw-bar-block gw-border">
<a href="#" class="gw-bar-item gw-button">Link 1</a>
<a href="#" class="gw-bar-item gw-button">Link 2</a>
<a href="#" class="gw-bar-item gw-button">Link 3</a>
</div>
</div>
</div>


</body>
</html>


function myFunction() {
  var x = document.getElementById("btn-dropdown");
  if (x.className.indexOf("gw-show") == -1) {
    x.className += "gw-show";
  } else { 
    x.className = x.className.replace(" gw-show", "");
  }
}

Quick

Dropdowns

Clickable Dropdown

Input Code

getWeb.dev

Docs

Developer Team

Devices

Download