Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
mass media
All-in-one Marketing app
If you dont want to use any javascript for your dropdowns, Bulkit
ships with handy hover dropdowns. Any element can be a hover
dropdown trigger. You just need to add the
.is-drop class to it. Then insert the dropdown
structure inside the trigger element. Note that it is better if the
trigger element has a defined width, like a button, else your
dropdown might not behave as expected. Check the code sample for
more details.
A hover dropdown menu items can have icons on the left. Simply add the icons you want inside the item markup. Check the code example.
Hover dropdowns can be positioned in 3 ways : left, wich is default,
center and right. For a centered dropdown, add the
.is-centered class to the .is-drop trigger
element. For a right positioned dropdown, use the
is-right class.
You can change the dropdown items color on hover. For primary color,
add the .is-primary class to the
.dropOut element. For secondary color, add the
.is-secondary class to the
.dropOut element. For accent color, add the
.is-accent class to the .dropOut element.
Hover dropdowns can be very handy for context menus like in this example. Hover over the small arrow on the right side of the card to make the dropdown appear. Check the code example for more details
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
You can have more control on dropdowns by using click dropdown. In
this case the trigger has to be clicked for the dropdown to show up.
Bulkit click dropdowns are based on
Jquery Dropdown. Click dropdowns are handled with the
data-jq-dropdown="#myDropdownId", pointing to a
separate dropdown div elsewhere on the page. Click
dropdowns can have a small arrow if you add the class
.jq-dropdown-tip to the dropdown parent container.
Click dropdowns menu items can have icons as well. Just add the desired icons inside the menu items elements.
If you need to display a very long content inside your dropdown, you
can use a scroll dropdown. To make your dropdown scroll
automatically when there is enough content, add the
.jq-dropdown-scroll class to the dropdown parent
element.
You can easily add controls inside click dropdowns. You can add either checkboxes or radio buttons. Check the code to see a live example.
Click dropdowns menu items can have different colors on hover.
Available classes are .is-primary,
.is-secondary and .is-accent. Add one of
these classes to the .jq-dropdown container.
A variant of Jquery dropdowns are panels. Panels can contain regular html markup and serve many purposes. All jquery dropdown options also apply to panels.
Here is an example of what you can do with a dropdown panel. this panel shows a user notifications panel, like you can find in many apps. Notification items rely on a modified Bulma Media object.
Here is another example of dropdown panel, this one is used to display previsously added bookmarks.
Terry Daniels Added a document to the project library. 31 minutes ago
Marjory Cambell Commented one of your tasks. 2 hours ago
Henry Rogers Added new tasks to project #122. 3 hours ago
