The Split Button Dropdown

5.31.13
Design

SplitDropButton is a simple and easily styleable, split button dropdown jQuery plugin similar to those you can find on Twitter Boostrap or Zurb Foundation.

You can find the code on Github and a no frills demo here.

Raison d’être

The split drop down button isn’t a novel widget concept, so why re-invent the wheel? As a theoretical wise man once said, the space between between Photoshop and the screen is a fountain of invention.Google didn’t reveal any good standalone implementations that fit the bill, and both the Bootstrap and Foundation versions weren’t easily styleable. Besides,I didn’t want to include big chuncks of either framework just for a simple widget.jQuery.SplitDropButton only takes one option: the text or html content for the toggle div. In the above example, I used Font-Awesome for both the links and the toggle div and applied some custom color, sizing and padding css. But enough words, let’s get to the code.

HTML

<div class="split-btn"><a href="#">Primary Link</a><a href="#">Secondary Link</a><a href="#">Secondary Link</a><a href="#">Secondary Link</a></div>

JavaScript

$(document).ready(function(){  $('.split-btn').splitdropbutton({    toggleDivContent: '<i class="icon-reorder"></i>' // optional html content for the clickable toggle div  })});Caveat: Since this plugin calculates element widths on page load, if you are using font-face (for example,Font-Awesome) or images within your links, you should use $(window).load() instead of$(document).ready().See thisStack Overflow answer for why.

Generated HTML

<div class="split-btn"><div class="spb-toggle"><i class="icon-reorder"></i></div><div class="spb-primary"><a href="#">Primary Link</a></div><div class="spb-secondary"><a href="#">Secondary Link</a><a href="#">Secondary Link</a><a href="#">Secondary Link</a></div></div>

Stylesheet

.split-btn .spb-toggle {  font-size: 24px;  padding: 7px 9px;  background: #ccc;  color: black;}// it's important to style the links with .split-btn a instead of '.spb-primary a' or// '.spb-secondary a' because those divs have widths based on the length of '.split-btn a'.split-btn a {  padding:  10px;  background: black;  color: white;}.split-btn a:hover {  background: white;  color: black;}It’s important to style the links with ‘.split-btn a’ instead of ‘.spb-primary a’ or ‘.spb-secondary a’ because those divs have widths based on the length of ‘.split-btn a’.If you have any comments, issues or feature requests, please post under issues on Github. Otherwise, enjoy!Smashing Boxes is a web and mobile app development company know for creating a lasting experience through bold design and disrupting the status quo. We are entrepreneurs and craftsmen first, and a digital creative agency second. Inspired by our visionary clients, we transform ideas into innovative web and mobile applications. Take a look at our work.

SUBSCRIBE TO SMASHING BOXES BLOG UPDATES.

Follow Smashing Boxes on TWITTER, LINKEDIN, and FACEBOOK.

Smashing Boxes is a creative technology lab that partners with clients, taking an integrated approach to solving complex business problems. We fuse strategy, design, and engineering with a steady dose of entrepreneurial acumen and just the right amount of disruptive zeal. Simply put, no matter what we do, we strive to do it boldly. Let's talk today!

Related Posts

Keen Decision Systems, a Smashing Boxes client, helps marketing leaders make data-driven decisions that build winning brands. Based out of North Carolina’s Research Triangle Park, the quickly growing company helps beloved brands reach customers more efficiently.
5.8.21

Smashing Boxes Aids Keen Decision Systems’ Continued Growth

Design
Smashing Boxes Chat

Keen Decision Systems, a Smashing Boxes client, helps marketing leaders make data-driven decisions that build winning brands. Based out of North Carolina’s Research Triangle Park, the quickly growing company helps beloved brands reach customers more efficiently.

Learn more about Keen Decision Systems, a Smashing Boxes client that is helping brands reach customers more efficiently.
30.6.21

Keen Decision Systems: Using Data to Help Brands Grow

Design
Smashing Boxes Chat

Learn more about Keen Decision Systems, a Smashing Boxes client that is helping brands reach customers more efficiently.

From Artificial Intelligence and implicit bias to vocal interface design, here are key takeaways and insights from the 2019 UX Y’all Conference.
8.10.19

6 Insights on Innovation from UX Y'all 2019

Design
Smashing Boxes Chat

From Artificial Intelligence and implicit bias to vocal interface design, here are key takeaways and insights from the 2019 UX Y’all Conference.

Let's Make
Something
Together
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
>

Featured on

Upcity partnership logo

top mobile app development company

Good Frims partnership logo
LinkedIn logo iconDribble logo iconTwitter logo icon
L
E
T'
S

C
H
A
T