Is a responsive mega menu with rollover effects available for Bootstrap?

Looking to develop a responsive megamenu for bootstrap 3, I recently came across one that caught my eye:

I decided to implement it into my own project at

However, I encountered a major issue with the menu functionality on desktop devices, as it requires a click to open rather than simply hovering over it.

Therefore, my question has two parts:

  1. Is there a way to make the menu open on hover when using a desktop?
  2. If not, can anyone suggest a bootstrap 3 megamenu solution that meets this requirement?

All the options I've come across so far are designed to open on click rather than hover.

jquerycsstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you're looking for a way to accomplish this using JavaScript, here is an illustration that includes a media query condition specifically targeting viewports larger than 800px.

Check out the live demo: jsfiddle

// Navigation Dropdown Hover with JS
$(function() {

  if ($(window).width() > 800) {

    $(".dropdown").hover(

      function() {
        $('.dropdown-menu', this).stop(true, true).fadeIn("fast");
        $(this).toggleClass('open');
        $('b', this).toggleClass("caret caret-up");
      },

      function() {
        $('.dropdown-menu', this).stop(true, true).fadeOut("fast");
        $(this).toggleClass('open');
        $('b', this).toggleClass("caret caret-up");
      });
  }
});

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

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...

htmlcssinput

How can you determine the checked status of a dynamically generated checkbox?

I am facing an issue with a table that has 16 rows, each containing a checkbox. I need to determine whether the checkbox is checked or not. If it is checked, then I need to perform one action, otherwise another action needs to be taken. However, the logic ...

jquerycheckboxhtml-table

Methods to Maintain Consistent HTML Table Dimensions utilizing DOM

I am facing an issue with shuffling a table that contains images. The table has 4 columns and 2 rows. To shuffle the table, I use the following code: function sortTable() { // Conveniently getting the parent table let table = document.getElementById("i ...

javascripthtmlcssdom

Using Jquery to Modify Information within HTML Table Cells

My dilemma involves an HTML table where each cell will have two data attributes. My goal is to create a button that toggles the value displayed in the table between these two attributes. <table class="table1"> <tbody> <tr> <td data-or ...

javascriptjqueryhtml-table

Tips for formatting text in a way that allows it to flow down a page smoothly as the

Working within a CSS Grid setup, I have an image on the left and a block of text on the right. As I reduce the page width, both the image and text resize accordingly to fit the page width. However, once the width goes below 475px, the layout breaks and the ...

htmlcssresponsive-designcss-gridresponsive-images

Organizing data with Tablesorter and preserving the sorting order

My table contains valuable information that is initially generated from a PHP script and then updated every n-seconds by checking the database. To enhance the functionality of my table, I decided to install the tablesorter plugin. However, I encountered a ...

phpjquerytablesorter

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML cod ...

htmlcssfrontend

Extend and retract within a row of a table

I need help with modifying a dynamically generated table to meet specific requirements. The table currently looks like this. The task involves hiding all columns related to Category B, eliminating duplicate rows for Category A, and displaying entries from ...

javascriptjquerycss

What is the method for connecting a page with a submit button?

<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> I have a code snippet from bootstrap that creates a button. How can I modify this code to add a link to another HTML file while maintaining data val ...

htmlbootstrap-4twitter-bootstrap-3bootstrap-5

How can I enable the assignment of values to $.myPlugin.defaults.key in plugin development?

Challenging question: Note: The plugin pattern showcased here is inspired by the official jQuery documentation. I'm facing a hurdle... How can I modify the plugin pattern below to support the statement $.hooplah.defaults.whoop = 'there it was&a ...

jqueryplugins

Creating a slanted polygon div that adjusts to different screen sizes: a step-by-step

Looking to create a slanted and responsive div similar to the example image provided. Any assistance would be greatly appreciated. ...

htmlcssbootstrap-4

Execute JavaScript function only if it is the final invocation

I'm currently experiencing an issue with a Javascript function that updates a bootstrap spinner. The function works well in general, but the problem arises when I click multiple times. I utilize ajax to update the quantity of selected products in the ...

javascriptjqueryajaxtwitter-bootstrap

Unable to resolve an unresolved issue with a jquery or javascript bug

I am currently facing some issues with my jQuery code in both Firebug and Chrome's developer tools. Any assistance would be greatly appreciated. Kindly make the necessary updates in the provided fiddle. Please follow this link to access the fiddle: ...

javascriptjquery

Prevent Cookie Access from AJAX REST Request in JavaScript

We are in the process of developing a mobile application using web technology. Our endpoint (weblogic 11g) sends both a jessionid cookie and a _wl_authcookie_jessionid_ cookie which are automatically sent back to the server for authentication purposes. How ...

jquerymobilecookiesangularjsweblogic

json How to retrieve the first index value in jQuery

As part of my Ajax loop, I am successfully generating JSON and iterating through the results. My goal is to extract only the first index value of JSON which is name. In jQuery, I have the following code: PHP $jsonRows[] = array( "name" => ...

phpjavascriptjqueryjson

Using AJAX for form submission and managing the response in a Wordpress site

I have a website built on Wordpress. I have created a contact form that is submitted using AJAX. Below is the code snippet: <script type="text/javascript"> jQuery(document).ready(function(){ $("#error_box").hide(); $('#contact_form&ap ...

ajaxwordpressjquerycontact-form

How can I place a submit button on a separate line using CSS?

Is there a way to position an input type=submit below a text area without relying on br tags or div elements? I'd prefer a solution using CSS. ...

cssinputnewlinesubmit

What steps do I need to take to activate this JQuery plugin successfully?

I stumbled upon this amazing silky smooth marquee jQuery plugin online @: Smooth marquee After downloading the latest JQuery and the JQuery marquee plugin as directed on the site above, I am still unable to make it work like they showcased in their demo: ...

jqueryhtml

Sencha Touch sends a beacon to jQuery

I am looking to incorporate a jQuery plugin into my Sencha Touch application. The challenge is making sure that the jQuery plugin is only initialized after Sencha Touch has finished populating the DOM structure. This is necessary because the plugin needs ...

jquerysencha-touch

Conditional Statements in jQuery

Trying to implement a check for the CSS 'display' property being set to "none", then slideDown the element "menuBK". If not, slideUp "menuBK" but encountering an error in my IF statement. $(document).ready(function(){ $("#burger").click(func ...

jquerycssif-statement