The famous drop-down options are contextual overlays that can be toggled to display lists of links and more. We use hover to activate the visibility of these elements. They are super easy to create and customize with excellent colors and spectacular shadows.
e-dropdown This is the main container.
drop-right Add the class drop-right to have a drop-down menu aligned to the right.
drop-items This is the drop-down menu, hidden by default.
drop-item each item in the drop-down menu, which can be a (a) or a (div)
hr use the hr to separate the drop-down elements.
inverted invierte los colores del elemento (drop-item) utilizado el color como fondo.
<div class="e-dropdown">
Dropdown
<!-- <i class="fas fa-angle-down"></i> Optional -->
<div class="drop-items">
<a class="drop-item">Item</a>
</div>
</div><div class="e-dropdown drop-right">
Drop-right
<div class="drop-items">
<a class="drop-item">Item</a>
</div>
</div>Add the class drop-right to have a drop-down menu aligned to the right.
Use the beautiful colors that are included in almost all the elements and hover over your items to see the changes.
<div class="e-dropdown primary"><!-- Your color -->
Dropdown <!--<i class="fas fa-angle-down"></i> Optional -->
<div class="drop-items">
<a class="drop-item">Item</a>
<hr><!-- here is the hr -->
<a class="drop-item">Item</a>
</div>
</div>Add the class (inverted) to change the background color to the class color, that is if you add (inverted danger) your (drop-item) when hovering over them you will have a background color (danger) and white text.
<div class="e-dropdown inverted danger"><!-- Here -->
Dropdown <!-- <i class="fas fa-angle-down"></i> Optional -->
<div class="drop-items">
<a class="drop-item">Item</a>
<hr><!-- here is the hr -->
<a class="drop-item active">Item</a>
</div>
</div>It can affect the dropdown from a higher container and obtain the same or better result. Example: Adding a dropdown to a navigation container like (e-nav).
In the previous example we use the classes in the main container that is a navigation (e-nav) the dropdown element behaves differently and is affected from the classes of (e-nav).
<nav class="e-nav danger inverted"><!-- Here are the classes -->
<div class="e-menu">
<div class="e-dropdown"><!-- here the drop -->
Dropdown <!-- <i class="fas fa-angle-down"></i> Optional-->
<div class="drop-items shadow-4">
<a class="drop-item">Item</a>
</div>
</div>
</div>
</nav>
Add the container e-drops next to the class unified to obtain unified dropdowns,
create impressive experiences and structured navigations.
It is recommended to use two or three dropdowns per e-drops container so that they are not so extended,
even so you can add as many as you create, although they may break.
Use e-drops unified
<div class="e-toolbar">
<div class="e-drops unified">
<div class="e-dropdown">
More <!-- <i class="fas fa-angle-down"></i> Optional-->
<div class="drop-items">
<a class="drop-item">Item</a>
</div>
</div>
<div class="e-dropdown inverted danger">
Dropdown <!-- <i class="fas fa-angle-down"></i> Optional-->
<div class="drop-items">
<a class="drop-item">Item</a>
</div>
</div>
</div>
<!-- With Button -->
<div class="e-drops unified">
<button class="e-btn">Button</button>
<div class="e-dropdown sky" aria-hidden="true">
<i class="fas fa-angle-down"></i>
<div class="drop-items">
<a class="drop-item">Item</a>
</div>
</div>
</div>
</div>Use the fabulous shadows to highlight the (drop-items) even more, choose the one that best suits your project with 8 predetermined options.
You can add the shadows to the element (drop-items) and equally to (e-dropdown) to give better styles.
<div class="e-dropdown primary"><!-- Your optional shadow -->
Dropdown <!-- <i class="fas fa-angle-down"></i> optional-->
<div class="drop-items shadow-3"><!-- Your shadow -->
<a class="drop-item">Item</a>
</div>
</div>
You can add child elements such as (a) or (div) the class (drop-item) but even better to add buttons outside this class or notes or alerts among others.
<div class="e-dropdown sky">
Dropdown <!-- <i class="fas fa-angle-down"></i> optional-->
<div class="drop-items">
<a class="drop-item">Item</a>
<p>This is a text.</p>
<a class="drop-item active">Item</a>
<hr><!-- here is the hr -->
<a class="e-btn sky">Button</a>
<a class="e-btn sky">Button</a>
</div>
</div>If you are using our framework in a product that generates income,
you can also help its maintenance if you wish, if you frequently help in your company
or personal developments consider making a recurring donation.
If you want to see your company's logo on this site it's time to be a serious Sponsor.
