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

Turn off hover effect for MUI DataGrid

Ways to customize decoration in Material UI TextField

How to show a button within a table cell using AngularJS?

The function view() is not displaying the CSS and JS files properly

Need Some Help Reversing the Direction of This CSS Mount Animation?

Can you identify the language of this HTML include code snippet?

What is the best way to ensure that custom JavaScript and CSS files in Sphinx are always loaded with the most recent changes

The alignment of the submit button is consistently off when placed alongside two input boxes within a table

HTML/CSS flowchart illustration

Does strip_tags() have vulnerabilities to scripting attacks?

Empty gaps separating two divs nested within another div within a div (unable to function)

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Ways to implement schema.org and JSON-LD for data labeling on a homepage of a website

The inputs are not responding to the margin-left: auto and margin-right: auto properties as expected

Switch to display only when selected

Can a person select a characteristic like "height" using Javascript?

Retrieving & Refreshing Data with ajax and Jquery

Automatically add shimmer with CSS styling

Encountering issues with styling the search bar using CSS and unable to see any changes reflected