Drop into sleek navigation with nested tabs - Twitter Bootstrap

Is it possible to create a dropdown menu using Bootstrap? I want to make one but don't know where to start. Currently, I only have the following code snippet:

<li data-toggle="dropdown"><a href="#">Vehicles</a>

    <ul class="dropdown-menu nav-tabs" role="menu">

        <hr/>
        <li class=" active"><a data-toggle="tab" href="#cars">Cars</a></li>
        <li><a data-toggle="tab" href="#vans">Vans & Pick-Up</a></li>
        <li><a data-toggle="tab" href="#mpv">MPVs</a></li>
        <li><a data-toggle="tab" href="#suv">Crossover & SUVs</a></li>
        <li><a data-toggle="tab" href="#hybrid">Hybrid</a></li>
        <li><a data-toggle="tab" href="#performance">Performance</a></li>

    </ul>
javascriptjquerycsstwitter-bootstraptabs

Answer №1

Here is a code snippet that may align with your requirements:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="menu" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu">
      <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu1">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu2">CSS</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu3">JavaScript</a></li>
    </ul>
  </div>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

Please note that the href attribute of the data-toggle="tab" should match the ID of the external content.

I hope this information proves useful to you! :)

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

Using AJAX with Rails to add data to multiple items in a one-to-many association

In my Rails application, I have set up a one-to-many association where a Song has many Channels, and each Channel belongs to a Song. The challenge I am facing is when trying to create a new Song with 6 Channels. Below is a snippet of the form in the fronte ...

javascriptjqueryruby-on-railsajaxparameters

What is the best way to update input elements within a session using Vue.js?

Upon opening the input screen, the input items are populated with session information. However, when jQuery switches display based on the input item's value, it refers to the initial value in the program rather than the session information. This sugge ...

javascriptlaravelvue.js

Each loop iteration results in the array being randomly ordered

My goal is to store multiple objects in an array and then render them out in a specific order. This is my process: app.js var allOdds = []; var count = 0; // ===================================== /* Database Configuration and Error Handling */ // ====== ...

javascriptnode.jsexpressejs

Issues encountered with Angular POST requests

I have established a registration and login system using passport.js. Additionally, I am incorporating Angular.js in the front-end. However, when Angular is used, the user signup process does not work as expected. Below you can find the code snippets for b ...

javascriptangularjsnode.jsmongodbexpress

Ways to clear the time attribute from an ISO DateTime in date format

How can I remove the time attribute from a date in the format 2016-05-24T05:07:57.756Z and set it to something like 2016-05-25T00:00:00.000Z? Any assistance would be greatly appreciated. ...

javascriptnode.jsdatetime

What are the implications of implementing this particular CSS code?

One common thing I come across on websites is this snippet of code: body:before { content: ""; width: 0; height: 100%; float: left; margin-top: -31700px; } What happens when this CSS is implemented? ...

htmlcss

Using CSS to create shape gradients

I've been attempting to replicate the shape gradient found on Laracasts for hours, but unfortunately, my code isn't displaying anything. Can anyone lend a hand? a{ background: linear-gradient(118deg,#328bf2,#1644ad); border-radius: 54% ...

htmlcss

What could be causing my Font Awesome 6.1.1 icons to not show up after loading?

I'm currently enrolled in Brad Traversy's 50 Projects 50 Days course. On Day 26, which focuses on the Double Vertical Slider project, I noticed that the Font Awesome CDN being used is version 5.15.1, an outdated version. I have updated it to vers ...

htmlcss

Looking to add a dynamic drop-down menu to my search bar, similar to Google search

Is there a way to create a dynamic drop-down list where, when a user enters the first letter of a country name, the list displays countries with names starting with that letter? It's similar to the functionality of a Google search bar. The country nam ...

javascriptjqueryjsonajax

Allow the table headers to be flexible and accommodate extended names in the rows

<div class="container"> <div class="table-responsive"> <table class="table" width="100%" > <thead> <tr> <th class= "style6" >Year</th> <th class="styl ...

htmlcss

Node.js allows you to seamlessly upload multiple images from various form fields or input types simultaneously

<form action="/upload-images" method="post" enctype="multipart/form-data"> <input type="file" name="image1" /> <input type="file" name="image2" /> <input type= ...

javascriptnode.jsexpressfile-uploadmulter

Having trouble with a jQuery Ajax post to retrieve a PDF file - firebug shows no sign of a post request being made

I am attempting to make an ajax post request to a jsp page, which will then embed a paragraph in it and send back a PDF file that I want to display within a specific div. However, after checking with Firebug, I noticed that no ajax posts are occurring. ...

jqueryajaxjsppdfpost

jQuery is consistently lagging one step behind when calculating the sum with keypress

I am currently working on developing a calculator that adds up the values entered with each key press. Here is the code snippet I have been using: $('#padd').keypress(function() { var ypoints = "200"; var points = parseInt( $(th ...

javascriptjquerymath

jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work. Any thoug ...

jquerycsslabel

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

I have set up my next.config.js file with the following configuration: const withSass = require('@zeit/next-sass'); const withCss = require('@zeit/next-css'); module.exports = withSass(withCss({ webpack (config) { config.module. ...

cssreactjssassnext.js

Reorganize array elements in a different sequence utilizing JavaScript

I possess an array const arr = [ {label: 'a', width: 200}, {label: 'b', width: 200}, {label: 'c', width: 200}, {label: 'd', width: 200}, {label: 'e', width: 200} ]; provided with another arr ...

javascriptarraysreorderlist

Can you designate a specific Google font for each language on a webpage?

Is there a way to use two different Google fonts, one for English characters and another for Thai characters, on a single page? While it's possible to achieve this using the @font-face syntax by specifying unicode character ranges, Google fonts do no ...

cssunicodegoogle-fonts

How can you efficiently cache a component fetching data from an API periodically in React?

I have a situation where I need to continuously fetch data from an API at intervals because of API limitations. However, I only want to update the state of my component if the API response is different from the previous one. This component serves as the m ...

javascriptreactjsreact-hooksmemoization

Using JQuery Templates to pass an html parameter as an argument in a function

I am currently utilizing this JQuery template: $.tmpl('<p>${text}</p>', { text: 'cool text' }).appendTo('div'); Initially, everything worked as expected. However, now I am trying to pass an HTML parameter into it ...

jqueryhtmlparametersjquery-templates

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

htmlcsssvghigh-contrast