Bootstrap mega menu on hover ” is the keyword for which many people search when creating a mega menu. It is simply understood that the menu is created with bootstrap and its submenu items appear on hover instead of click effect. Usually, click effect is just applied on mobile because there is no way to hover on mobile devices. Conversely, hover effect is popularly applied on desktop since it reduces user operations.

Bootstrap mega menu on hover

If you are interested in our previous article “ bootstrap mega menu full width ”, the example in this article will be similar to the previous one. You are able to create the hover effect by using css or js. Regarding CSS, you can use this syntax :hover, for instance,

<li class=”menu”><a href=”#”>Menu</a><ul class=”sub-menu”><li><a href=””>Sub menu</a></li></ul></li>

If the submenu is hidden by default and appears on hover, you can use the following css: Menu:hover .sub-menu {display:block}

Besides using css, you can also use js by detecting mouse hover events. Here we have two more methods to deal with the submenu appearance. The first way is when hovering on a menu item, a class will be added and when hovering over the menu item, this class will be removed. In addition, CSS is in use as well to show and hide submenus.

$(“menu”).hover(function(){
$(this).addClass(“active”);
}, function(){
$(this).removeClass(“active”);
});

.menu .sub-menu {display:none}

.menu.active  .sub-menu {display:block}

The second technique is when hovering on a menu item, some attributes of js such as .show() will be applied.

For example,

$(“menu”).hover(function(){
$(“ sub-menu”).show();
}, function(){
$(“ sub-menu”).hide();
});

Now, we will come back to our primary task related to creating a “ bootstrap mega menu on hover ”. An integral tool in this article, as well as the previous one, is a bootstrap plugin.You can download this plugin here. We will not spend more time on integrating this plugin because there are various articles as well as detailed guidance on this taskon its homepage. In this article, we will introduce to you about how to use attributes ofcss and js so you will have options applied to different cases. You can download the file we share below. The whole code snippet is put in index.html file, please open this file and check.

đây là một đoạn code đơn giản, bạn có thể copy  cho vào dự án của bạn

This is just a simple code snippet, you can copy and paste in your project.

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
}

.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}

.dropdown:hover .dropdown-content {
display: block;
}

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}

.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}

.column a:hover {
background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}

/* Responsive layout – makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>

<div class=”navbar”>
<a href=”#home”>Home</a>
<a href=”#news”>News</a>
<div class=”dropdown”>
<button class=”dropbtn”>Dropdown
<i class=”fa fa-caret-down”></i>
</button>
<div class=”dropdown-content”>
<div class=”header”>
<h2>Mega Menu</h2>
</div>
<div class=”row”>
<div class=”column”>
<h3>Category 1</h3>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
<div class=”column”>
<h3>Category 2</h3>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
<div class=”column”>
<h3>Category 3</h3>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
</div>
</div>
</div>
</div>

<div style=”padding:16px”>
<h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
<p>Hover over the “Dropdown” link to see the mega menu.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>

This code can be used for your projects but not your customers who have no experience in html. For these clients, you should create a plugin that allows them to configure such as editing images, text content, etc. If you are using Prestashop source code, I suggest that you should use PrestaShop Mega Menu module. When using this module, you can create different menu types such as dropdown, html, image, or products. There is no problem if you are not skillful in code. The only thing you need to do is combining your creativity and the plugin’s configurations to build up your own menu. If you encounter any problem when using the module, the support team is always willing to help you using the plugin in the most satisfying way.