Dropdown
Components
Work in progress...
Demo
<x-dropdown class="dropdownDemo">
<x-dropdown-toggle>Click for Fruit</x-dropdown-toggle>
<x-dropdown-content>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</x-dropdown-content>
</x-dropdown>
.dropdownDemo {
max-width: 200px;
display: block;
x-dropdown-toggle {
display: block;
cursor: pointer;
padding: 8px 16px;
border: 1px solid #ccc;
}
x-dropdown-content {
transform: scaleY(0);
transform-origin: top;
transition: transform ease 0.3s;
display: block;
ul {
padding: 0;
list-style: none;
margin: 0;
}
li {
padding: 8px 16px;
border: 1px solid #ccc;
border-top: 0;
}
}
}
.dropdownDemo[active] {
x-dropdown-content {
transform: scaleY(1);
}
}
Click for Fruit