Ad

Bootstrap Responsive Menu - Tabs Into Select List

Is there way to stop tabs wrapping and converting them into a single drop down past a certain breakpoint?

Appreciate javascript would be needed to do the heavy lifting. I cant seem to find a suitable example on the web.

Can anyone point me in the right direction?

Thanks

Ad

Answer

This is working demo , RUN it on code snipset in small and full page length:

    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script type="text/javascript">
            $(document).ready(function () {
                $(".dropdown-menu").on("click", "a", function () {             
                     $('#myTabs a[target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#' + $(this).attr("class") + '"]').tab('show');               
                });

            });
        </script>


    <div class="container">
            <!--Visible only in mobile or xtra small devices-->
            <div class="dropdown visible-xs">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    Menu
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="home">Home</a></li>
                    <li><a class="profile">profile</a></li>
                    <li><a class="messages">messages</a></li>
                    <li><a class="settings">settings</a></li>
                </ul>
            </div>

            <!-- Nav tabs visible only in medium and larger devices-->
            <ul class="nav nav-tabs visible-lg visible-md" role="tablist" id="myTabs">
                <li role="presentation" class="active"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content ">
                <div role="tabpanel" class="tab-pane active" id="home">Home</div>
                <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
                <div role="tabpanel" class="tab-pane" id="messages">Message</div>
                <div role="tabpanel" class="tab-pane" id="settings">Setting</div>
            </div>
        </div>

Ad
source: stackoverflow.com
Ad