CODEWITHSUNDEEP
twitter-bootstrapsplitnavbar
trejder
trejder

Reputation: 17505

Twitter Bootstrap's navbar with split buttons

Is there any (fairly easy) way to get Twitter Bootstrap's navbar filled with split button dropdowns?

I'm looking for any way to separate so called main button from a dropdown menu containing items that belongs to that main button or are somehow related to it.

I tried to add two navbar items per each one -- first containing only main button (with caption and icon) and second containing only dropdown (without caption and icon):

enter image description here

enter image description here

But result is not much acceptable. Mainly because:

Are there any other options, possibilities or workarounds for this problem? Or am I expecting too much?

Upvotes: 3

Views: 4156

Answers (2)

trejder
trejder

Reputation: 17505

Font Awesome page has exactly, what I've been looking for, without need to put extra code or CSS.

I'm reffering to "Icons" and "Example" buttons that are perfect split buttons dropdowns, i.e. it can be clicked as single button, and you can open dropdown next to it, without touching the main button.

However, this is done via separate elements, which means huge space between main button and dropdown arrow.

Here is a Bootply example, that replicates this code and this behaviour.

Upvotes: 3

Bass Jobsen
Bass Jobsen

Reputation: 49054

I don't understand why you want to split the main button from the drop down. It are separate structures already (bind by the button-group class). I don't see the small bug. About the gutter .btn, .navbar .btn and .btn-navbar have different css rules. For hovering the button and dropdown once add / remove a extra css class and add this on mouseenter and mouseleave, see: http://bootply.com/66352

extra css rule for hover a .btn-danger button:

.buttonhover-danger
{
  color: #ffffff;
  background-color: #bd362f;
  background-image: none;
  *background-color: #a9302a;
}

hover all button / dropdowns with the .btn-danger class:

$('.btn-danger').mouseenter(function(){$('.btn-danger').addClass('buttonhover-danger')});
$('.btn-danger').mouseleave(function(){$('.btn-danger').removeClass('buttonhover-danger')});

Upvotes: 3

Related Questions