Utilizing Bootstrap 4: Opting for <select> over tabs (<li>)

Is there a way to customize the appearance of Bootstrap tabs by replacing them with a dropdown select menu instead of the standard tab layout created with <ul> and <li> elements?

I am working with a relatively small area (such as col-3) where I need to display a large number of tabs (around 7-10), but the layout looks unappealing on smaller screens as it extends onto multiple rows.

I would prefer to use a select dropdown menu (potentially utilizing jQuery plugins for customization) that allows me to always select tabs from the dropdown list.

The solution must involve using <select> as I want the currently selected tab to be visible at all times (unlike the standard Bootstrap dropdown which only shows available options without displaying the selected one).

javascripthtmljquerycssbootstrap-4

Answer №1

To simplify your layout, consider hiding the <ul> and <li> elements and replacing them with a <select> trigger instead.

Take a look at this implementation:

<ul class="nav nav-tabs">
  <li hidden><a href="#" id="a1">Menu 1</a></li>
  <li hidden><a href="#" id="a2">Menu 2</a></li>
  <li hidden><a href="#" id="a3">Menu 3</a></li>
</ul>

<select onchange="selectTab(this.value)">
  <option value="1">Menu 1</option>
  <option value="2">Menu 2</option>
  <option value="3">Menu 3</option>
</select>

Below is an example of JavaScript functionality to accompany this setup:


    function selectTab(e){
      switch(e){
        case 1:
            $('#a1').click();
        break;
        case 2:
            $('#a2').click();
        break;
        case 3:
            $('#a3').click();
        break;
        default:

      }
    }

For a live demo, you can view the jsfiddle here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Struggling with the 2-Column Layout Glitch

I attempted to follow a tutorial for creating a 2 column layout from this person: Here is the result of my implementation: / http://jsfiddle.net/WrpA8/ The CSS: #container { width: 800px; margin: 40px auto; border: 1px solid black; } #header ...

csslayout

The JQuery button fails to activate the service call through Ajax

I'm facing an issue with my JSON service while trying to make an AJAX call using jQuery on a webpage. Even though I have created a button and attempted to trigger the click event, I am not receiving any alert message and the service call itself is not ...

c#jqueryajaxwcf

AngularJS single-page application with model-view-controller style designs

Hey there, I'm relatively new to AngularJS and currently on a steep learning curve. I've been working on developing an AngularJS SPA and have grasped the basics. I'm using ngRoute for routing and have put together a basic application framew ...

javascriptangularjslayoutngroute

Change the Background of Your Body?

Here's the deal. I'm looking to create a cool effect where the background of the body slowly fades out and changes periodically in a loop using CSS and jQuery. Any suggestions on how I can make this happen? Appreciate your help! ...

javascriptjquerycssbackgrounddocument-body

Angular: The function t(...) does not support success - TypeError

My code is generating the error TypeError: t(...).success is not a function. I have tried searching for a solution but haven't been able to figure out why this error is happening in my specific case. Here is a snippet of my JS code. Can anyone point ...

javascriptangularjs

"The combination of Node.js, Express, and Angular is causing a continuous loop in the controller when a route is

Currently, I am utilizing node js alongside Express. Angular js files are being loaded through index.html. The code for app.js is as follows: app.use(bodyParser.json()); // for parsing application/json app.use(bodyParser.urlencoded({ extended: true })); ...

javascriptangularjsnode.js

Leveraging JSON data with jQuery's ajax function

Utilizing jQuery to retrieve data from this API () has been a success. I have successfully fetched the main details such as "name", "height", and "mass". However, I am facing a challenge when trying to access the values of "homeworld", "films", "species", ...

javascriptjqueryhtmljsonajax

What is the best way to activate a click event within an ng-repeat loop in AngularJS

Is there a way to trigger an event click handler in angular where clicking the button will also trigger the span element? I've tried using the nth-child selector without success. Any suggestions on how to achieve this? I also attempted to use jQuery s ...

javascriptjqueryangularjs

The CSS code designed to limit the display to only a two-line sentence is failing to work properly in Internet Explorer

I've implemented the following CSS code to ensure that the display sentence doesn't exceed 2 lines, with the remaining text being replaced by "...". .bell-notification-max-words-display { overflow: hidden; display: -webkit-box; ...

cssinternet-explorer

Creating a custom string subtype in TypeScript

I am currently working on developing a game called Risk using TypeScript and React hooks. This game is played on a map, so my first step was to design a MapEditor. The state of the Map Editor is as follows: export interface IMapEditorState { mousePos: ...

javascripttypescriptreact-hooks

How can I line up the bootstrap datepicker with a bootstrap column?

I currently have Bootstrap 3.3.7 and a bootstrap datepicker version 1.6.4 integrated into my project. However, I am facing an issue where the datepicker does not fill up the designated column within a div with the class col-md-6. Here is the HTML code sni ...

htmlcsstwitter-bootstrapdatepicker

Javascript Leap Year Determination using nested if-else statements

I am facing an issue with the nested if statement where all conditions have been provided. Some leap years like 2016 and 2020 are not being recognized as Leap years even though they should be. Can someone please assist me in fixing this error? var y = p ...

javascriptif-statementnested-if

The middleware for JQuery File Upload is experiencing an issue with generating image versions

My implementation of the jquery-file-upload-middleware is set up following the instructions in a straightforward example of usage: // configuration of upload middleware upload.configure({ uploadDir: './public/uploads', upload ...

jquerynode.jsexpressjquery-file-upload

Using jQuery to toggle the menu

I've been brainstorming ways to add a toggle menu on my website and finally stumbled upon a solution that works great! http://jsfiddle.net/hhcsz5cr/ <div> <h1><button class="button" data-circle="travel"> <i cl ...

htmljquerycsstoggle

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Recently, I have been working on implementing a dark mode toggle switch in React Typescript. In the past, I successfully built one using plain JavaScript along with useState and window.matchmedia('(prefers-color-scheme dark)').matches. However, w ...

javascriptreactjstypescriptnext.js

What steps should I take to make jQuery compatible with a Greasemonkey 0.8 script on Firefox 2, without internet access on the computer?

Currently using Firefox 2.0.0.11, Greasemonkey 0.8.x, and the latest version of jQuery (1.3.2) that is compatible with Greasemonkey 0.8. Attempting to load this Userscript: // ==UserScript== // @name TEST // @include * // @require jquery. ...

javascriptjqueryuserscriptsfirefox2

Access data from previous request and transmit it to another request in a Node.js environment

I am facing a situation where I need to extract the parsed json response from a variable in a POST request, store it in a new variable, and then pass that variable in the headers for a subsequent GET request. However, my current approach is not yielding th ...

javascriptnode.jsexpresshttpsrequest

What is the best way to show dropdown list items above the row they are in?

In this HTML snippet, there is a dropdown menu within a row with a height of 3.7rem. Unfortunately, when the dropdown is clicked, the list items are hidden behind the row because the height is not sufficient. I tried giving the dropdown a z-index of 1, but ...

bootstrap-4

Ensuring scope safety in jQuery AJAX requests

My intuition suggests that if I am on a laggy server and the user triggers two events quickly enough, the value of c in the success function will be based on the most recent event, potentially causing func1 to use the incorrect value. This is merely a hypo ...

javascriptjquery

`@keyup.enter event listener will only be triggered upon pressing the Enter key if the focus is on

My login button only seems to work when I press the tab button after entering my email and password. I would like it to work whenever I press the enter key while on the Login page of this VueJS application. This is the HTML template: <template> ...

javascriptvue.jsenter