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.
<div class="button btn-align has-icon-right primary-btn btn-outlined is-drop">Dropdown <i class="sl sl-icon-arrow-down is-icon-xs"></i>
<div class="dropContain">
<div class="dropOut">
<ul>
<li><i class="drop-icon sl sl-icon-cloud-download"></i> Download invoice</li>
<li><i class="drop-icon sl sl-icon-paper-plane"></i> Send info</li>
<li><i class="drop-icon sl sl-icon-trash"></i> Delete</li>
</ul>
</div>
</div>
</div>
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.
<div class="flex-card light-bordered hover-inset card-overflow">
<div class="flex-card-header">
<div class="header-avatar">
<img src="assets/img/avatars/helen.jpg" alt="">
</div>
<div class="header-info">
<div class="header-title">Helen Miller</div>
<div class="header-subtitle">Sales team</div>
</div>
<div class="header-control ml-auto is-drop drop-sm">
<i class="sl sl-icon-arrow-down"></i>
<div class="dropContain">
<div class="dropOut">
<ul>
<li><i class="drop-icon sl sl-icon-cloud-download"></i> Download invoice</li>
<li><i class="drop-icon sl sl-icon-paper-plane"></i> Send info</li>
<li><i class="drop-icon sl sl-icon-trash"></i> Delete</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body is-small">
<div class="content">
<p class="pb-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
<div class="has-text-right">
<a class="button btn-align btn-outlined accent-btn rounded raised">Follow</a>
</div>
</div>
</div>
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.
<!-- Dropdown trigger -->
<button class="button" data-jq-dropdown="#my-dropdown">Dropdown</button>
<!-- /Dropdown trigger -->
<!-- Dropdown -->
<div id="my-dropdown" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li><a href="#">Account</a></li>
<li><a href="#">Tasks</a></li>
<li><a href="#">Settings</a></li>
<li class="jq-dropdown-divider"></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
<!-- /Dropdown -->
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.
<!-- Dropdown trigger -->
<button class="button btn-align accent-btn btn-outlined raised" data-jq-dropdown="#with-checkboxes-radios"> Dropdown</button>
<!-- /Dropdown trigger -->
<!-- Dropdown -->
<div id="with-checkboxes-radios" class="jq-dropdown">
<ul class="jq-dropdown-menu">
<li>
<label class="checkbox-wrap is-small">
<input id="check1" type="checkbox" class="b-checkbox" onchange="console.log('changed');">
<span></span>
Pro features
</label>
</li>
<li>
<label class="checkbox-wrap is-small">
<input id="check2" type="checkbox" class="b-checkbox" onchange="console.log('changed');">
<span></span>
Auto backup
</label>
</li>
<li>
<label class="checkbox-wrap is-small">
<input id="check3" type="checkbox" class="b-checkbox" onchange="console.log('changed');">
<span></span>
Dedicated support
</label>
</li>
<li class="jq-dropdown-divider"></li>
<li>
<label class="radio-wrap is-small is-primary">
<input type="radio" class="b-radio" name="radio-group">
<span></span>
Starter plan
</label>
</li>
<li>
<label class="radio-wrap is-small is-secondary">
<input type="radio" class="b-radio" name="radio-group">
<span></span>
Pro plan
</label>
</li>
<li>
<label class="radio-wrap is-small is-accent">
<input type="radio" class="b-radio" name="radio-group">
<span></span>
Business plan
</label>
</li>
</ul>
</div>
<!-- /Dropdown -->
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.
<!-- Panel trigger -->
<button class="button btn-align accent-btn btn-outlined raised" data-jq-dropdown="#tip-panel"> Drop panel</button>
<!-- /Panel trigger -->
<!-- Panel -->
<div id="tip-panel" class="jq-dropdown jq-dropdown-tip has-icons">
<div class="jq-dropdown-panel">
Here is some <code>HTML</code> inside of a jq-dropdown. You can put pretty much
anything inside of a jq-dropdown, so have fun with it!
</div>
</div>
<!-- /Panel -->
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.
<!-- Panel trigger -->
<button class="button btn-align success-btn btn-outlined raised" data-jq-dropdown="#notifications-panel"> Notifications</button>
<!-- /Panel trigger -->
<!-- Panel -->
<div id="notifications-panel" class="jq-dropdown jq-dropdown-tip has-icons">
<div class="jq-dropdown-panel">
<article class="media media-notification">
<figure class="media-left">
<p class="image is-32x32">
<img class="img-circle" src="assets/img/avatars/terry.jpg">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<span class="notification-title">Terry Daniels</span> <small class="timestamp pull-right">31 minutes ago</small>
<br>
<span class="notification-text">Added a document to the project library.</span>
</p>
</div>
</div>
</article>
<article class="media media-notification">
<figure class="media-left">
<p class="image is-32x32">
<img class="img-circle" src="assets/img/avatars/carolin.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<span class="notification-title">Marjory Cambell</span> <small class="timestamp pull-right">2 hours ago</small>
<br>
<span class="notification-text">Commented one of your tasks.</span>
</p>
</div>
</div>
</article>
<article class="media media-notification">
<figure class="media-left">
<p class="image is-32x32">
<img class="img-circle" src="assets/img/avatars/henry.jpg">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<span class="notification-title">Henry Rogers</span> <small class="timestamp pull-right">3 hours ago</small>
<br>
<span class="notification-text">Added new tasks to project #122.</span>
</p>
</div>
</div>
</article>
<div class="see-all has-text-centered">
<a href="#">All notifications</a>
</div>
</div>
</div>
<!-- /Panel -->
Here is another example of dropdown panel, this one is used to display previsously added bookmarks.
<!-- Panel trigger -->
<button class="button btn-align warning-btn btn-outlined raised" data-jq-dropdown="#bookmarks-panel"> Bookmarks</button>
<!-- /Panel trigger -->
<!-- Panel -->
<div id="bookmarks-panel" class="jq-dropdown jq-dropdown-tip has-icons">
<div class="jq-dropdown-panel">
<article class="media icon-media">
<figure class="media-left">
<i class="im im-icon-File-Word"></i>
</figure>
<div class="media-content">
<div class="content">
<p>
<span class="notification-title">Project_budget.docx</span> <small class="timestamp pull-right"><i class="sl sl-icon-lock"></i> Locked</small>
<br>
<span class="notification-text">Word document</span>
</p>
</div>
</div>
</article>
<article class="media icon-media">
<figure class="media-left">
<i class="im im-icon-File-Excel"></i>
</figure>
<div class="media-content">
<div class="content">
<p>
<span class="notification-title">Accounts_stakeholders.xlsx</span> <small class="timestamp pull-right"><i class="sl sl-icon-lock-open"></i> Unlocked</small>
<br>
<span class="notification-text">Excel document</span>
</p>
</div>
</div>
</article>
<article class="media icon-media">
<figure class="media-left">
<i class="im im-icon-File-JPG"></i>
</figure>
<div class="media-content">
<div class="content">
<p>
<span class="notification-title">Train_receipts.jpg</span> <small class="timestamp pull-right"><i class="sl sl-icon-lock-open"></i> Unlocked</small>
<br>
<span class="notification-text">Image document</span>
</p>
</div>
</div>
</article>
<div class="see-all has-text-centered">
<a href="#">All bookmarks</a>
</div>
</div>
</div>
<!-- /Panel -->
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
