Split-button dropdowns within tabs implemented with Bootstrap

Question

Split-button dropdowns within tabs implemented with Bootstrap

I'm looking to create a navigation menu that combines both split buttons and dropdown tabs. I've found examples of each individually, but can't figure out how to merge the two:

"Tabs with dropdowns"

Is it possible to have a tab with a dropdown as well as a split button in the same navigation menu?

Tabs with dropdowns:

<div class="">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab2 <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab3<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </li>
    </ul>
</div>

Split Button:

<div class="btn-toolbar" style="margin: 0;">
          <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
</div>

html css twitter-bootstrap

Answer 1

Answer №1

Have you considered changing the dropdown to a split button for your final result? If not, maybe give it a try and see how it looks! (testing required)

    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <button class="btn dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>

Answer 2

Have you considered changing the dropdown to a split button for your final result? If not, maybe give it a try and see how it looks! (testing required)

    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <button class="btn dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>

Answer 3

Answer №2

Almost there - just a few style adjustments left to make.

Check out the HTML code below:

    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="utf-8">
<title>Test Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="content/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="content/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <div class="container tabbable">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">ProjectName</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active tabbable"><a href="#tab1" data-toggle="tab">tab1</a></li>
                    <li class="tabbable"><a href="#tab2" data-toggle="tab">tab2</a></li>
                    <li class="tabbable" id="tabarea3">
                        <div class="btn-group">
                            <a class="btn" id="tab3" href="#tab3" data-toggle="tab">Tab3</a>
                            <button id="tab3button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="content/bootstrap/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="content/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="content/bootstrap/js/custom.js" type="text/javascript"></script>

A snippet of jQuery code to handle deselecting the split-button tab (from custom.js):

 $(document).ready(function () {
        var $tabs = $('.tabbable li');
        $tabs.on('click', function (sender) {
            if($('#tab3').hasClass('active'))
            {
                $('#tab3').removeClass('active');
            }
        });
    });

Answer 4

Almost there - just a few style adjustments left to make.

Check out the HTML code below:

    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="utf-8">
<title>Test Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="content/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="content/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <div class="container tabbable">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">ProjectName</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active tabbable"><a href="#tab1" data-toggle="tab">tab1</a></li>
                    <li class="tabbable"><a href="#tab2" data-toggle="tab">tab2</a></li>
                    <li class="tabbable" id="tabarea3">
                        <div class="btn-group">
                            <a class="btn" id="tab3" href="#tab3" data-toggle="tab">Tab3</a>
                            <button id="tab3button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="content/bootstrap/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="content/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="content/bootstrap/js/custom.js" type="text/javascript"></script>

A snippet of jQuery code to handle deselecting the split-button tab (from custom.js):

 $(document).ready(function () {
        var $tabs = $('.tabbable li');
        $tabs.on('click', function (sender) {
            if($('#tab3').hasClass('active'))
            {
                $('#tab3').removeClass('active');
            }
        });
    });

Split-button dropdowns within tabs implemented with Bootstrap

Answer №1

Answer №2

Similar questions

Incorrect CSS percentage calculations detected on mobile devices

What is the best way to make a child div's height match its parent's height?

Is there no sign of rails being utilized in production?

Obtaining template attributes in CKEditor: A guide

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

What is the best way to dynamically alter HTML elements on my webpage?

ngSwitchCase provider not found

Generate a loop specifically designed to execute the code following the menu in the script

Interactive jQuery Dropdown Menu with Multiple Divs

Tips for correctly linking JS and CSS resources in Node.js/Express

Can you provide guidance on showcasing mongodb data in a flask template with flask_pymongo?

Creating an X pattern on an HTML5 canvas and detecting intersections with a perimeter

Displaying an image with a JavaScript variable is a common task in web

Issue with Angular JS: Unable to remove uploaded files

Incorporating docsify CSS styling into Markdown within the VScode environment

Creating an .htaccess configuration for managing case-sensitive file names

Display only the spans that contain text or are not empty

Having trouble getting the show/hide div feature to work in a fixed position on the

The mobile menu toggle functionality is malfunctioning on actual mobile devices, however, it is operational when tested on various mobile sim

Guide to dynamically insert rows in HTML using Vue.js based on the selected option