When you hover over the vertical sidebar menu in Bootstrap material design, a submenu will appear

Looking to create a three-column display that functions as one submenu when hovering over each menu item?

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <ul class="vertical-nav">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a>
          <ul class="sub-menu">
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Below is an image example of the desired menu layout:

https://i.sstatic.net/f38l7.jpg

htmlcsstwitter-bootstrap

Answer №1

Here is the solution provided below for your reference.

$('.vertical-nav li a').mouseover(function() {
    $(this).parent().find('.sub-menu').show();
  })
  .mouseout(function() {
    $(this).parent().find('.sub-menu').hide();
  });
.sub-menu {
  display:none;
}
.vertical-nav li, .sub-menu li {
  list-style:none;
}
.column {
  float:left;
  width: 100px;
}
.title {
 padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <ul class="vertical-nav">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a>
          <ul class="sub-menu">
            <div class='column'>
              <li class='title'>Style</li>
              <li><a href="#">Sub Link 1</a></li>
              <li><a href="#">Sub Link 2</a></li>
            </div>
             <div class='column'>
              <li class='title'>Subject</li>
              <li><a href="#">Sub Link 3</a></li>
              <li><a href="#">Sub Link 4</a></li>
            </div>
             <div class='column'>
              <li class='title'>Medium</li>
              <li><a href="#">Sub Link 5</a></li>
              <li><a href="#">Sub Link 6</a></li>
            </div>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

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

Comparing ASP MVC and PHP for uploading files: which is better?

This article on HTML5 file upload with a progress bar is really impressive: http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/ However, the backend code provided is in PHP. I need assistance converting it to ASP.NET MVC3 or at least a go ...

phpasp.net-mvchtmlfile-upload

pressure exerted on the body

Recently, I've been working on a project for the website . One of the main issues I've encountered is that the <body> element is consistently 20px lower than it should be at the top. This has led to visible problems with the background grad ...

javascripthtmlcss

Searching and manipulating arrays in PHP

<?php include 'database.php'; $sql="SELECT `j_company`,`j_salary`,`j_title` FROM `jobs`"; $query=mysqli_query($conn, $sql); if(!$query) { echo "<h1>Unsuccessful</h1>"; echo("Error description: " . ...

phphtmlsqlarrays

The loading of charts and animations is sluggish on mobile devices

My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...

javascriptjqueryhtmlchartschart.js

Converting data from Random.org into an integer using JavaScript

I have been working on a small web application to experiment with CSS animations. Although it's functioning, I'm seeking more genuine randomness. To achieve this, I am exploring the use of Random.org. How can I import the output from Random.org i ...

javascripthtml

How can one determine the most accurate box-shadow values?

I am trying to extract the precise box-shadow parameters from a CSS style rule generated by the server. My main focus is determining whether the element actually displays a visible shadow or not. There are instances where the shadow rule is set as somethi ...

javascriptcss

How to format values in a textarea using AngularJS

Is there a way to address the following issue without replacing \n with other values? A user can input a description for something in a textarea and include line breaks. In the controller, there is a value called description which includes a string ...

javascripthtmlangularjs

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

After successfully implementing a draggable single circle image when clicking a button, I am now looking to add multiple circle images each time the button is clicked. I'm considering using the append function with the canvas tag for this purpose. Ca ...

jqueryjquery-uicsshtml5-canvas

Rotate object within HTML table

I have a simple data structure as shown below: [ { "ClientId": 512, "ProductId": 7779, "Date": "2019-01-01", "Quantity": 20.5, "Value": 10.5 }, { "ClientId": 512, "ProductId": ...

javascripthtmlangulartypescript

Submitting a form using only input buttons to transfer parameters to an Action in ASP.NET Core

Currently, I am working on my thesis and developing a simple browser game. My project involves having a form with three buttons that need to trigger the same action with different parameters. Here is what I have come up with so far: @using (Html.BeginForm ...

c#htmlasp.net-corerazorrazor-pages

:host background color may be missing, but the font size has been boosted?

Check out this demo where the CSS is applied to the :host element or <hello>. The font size increases but the background color remains unchanged. What do you think? styles: [` :host { font-size: 2rem; background-color: yellow; }`] }) ...

javascriptcssangulartypescript

Guide on integrating an HTML and CSS register form in Django

I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...

javascriptpythonhtmlcssdjango

What is the best way to set inner text using jQuery?

The code snippet below demonstrates a specific issue: <span id="test1">some text</span> <span id="test2">some text</span> Upon loading the content, the following JavaScript is executed: alert($('test1').text(); $(' ...

jquerycss

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

htmlcsstwitter-bootstrapfrontend

Update the content within an HTML tag using JavaScript

I've been attempting to update the text within the li tag using plain javascript. The structure of the HTML will remain consistent: <section id="sidebar-right" class="sidebar-menu sidebar-right sidebar-open"> <div class="cart-sidebar-wrap" ...

javascripthtml

Guide to setting up a horizontal button menu and dropdown submenu beneath the navigation bar using Bootstrap 4

How can I design a horizontal button menu with submenus below the navigation bar in Bootstrap 4? Take a look at the image below to see what I'm aiming for: https://i.sstatic.net/j6b8a.png https://i.sstatic.net/rmtrM.png If you have any ideas or su ...

javascriptjqueryhtmlcssbootstrap-4

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...

htmlcss

Pressing the shortcut key will activate the function specified in ng-click,

I have been searching for a solution to my problem, but I haven't found anything that really helps. What I am looking for is a shortcut within an ng-click directive where there is only an if condition without an else expression. Essentially, I just wa ...

javascripthtmlangularjsif-statementangularjs-ng-click

Is it possible to scale images dynamically using CSS without losing their proper proportions?

http://jsfiddle.net/CJzCA/ Is there a way to resize images using CSS in the above jsfiddle? The keyboard images are currently too big compared to the text, and I usually solve this issue by using Photoshop. It would be more convenient if we could resize t ...

cssimage-resizing