Tuxjm el sitio de jmedina

Category: pretashop

Bootstrap mega menu on hover

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.

 

 

 

Bootstrap mega menu full width in your website

Bootstrap mega menu full width has been a popular keyword searched by a huge number of users since it fully meets their demand. On the one hand, a mega menu plays an important role in helping customers find out their expected products with ease. On the other hand, bootstrap is a well-known framework of TW which is accountable for making websites responsive.

Building a “ bootstrap mega menu full width ” is not a difficult task. To begin with, you should define which components will be included in your mega menu. It will be just a monotonic menu with dropdowns or an attractive one with stunning images making your website livelier. The menu content can also be trending or featured products, through which primary products are easy to be found. As a result, your sales and revenues go up dramatically. After having a detailed plan, you can start building up your ideal menu using html and css.

Bootstrap mega menu full width

One small thing that you should notice is that being experienced in html and cssis required to create a menu. If you do not have technical knowledge about this field, there is a suggested mega menu file at the end of this article for you to download.

If you are working with open source codes such as WordPress, Prestashop, Shopify, there will exist an available menu. For instance, in Prestashop system, if you use the default theme menu, bootstrap will be applied to make the menu responsive. Then you just need to drag and drop to add your menu items in the administration interface. Nevertheless, we all understand that the default functions are never enough to satisfy your wishes and creativity. That’s why you need a powerful tool, combining with just a mouse and a keyboard to complete a wonderful menu without any technical knowledge. If your thought is the same as mine, I am happy to share with you the plugin which I have tried using and really enjoy. It is Prestashop Mega Menu module. Notably, after installing this module, you are kindly supported by a support team if any issue incurs.

<code class=”html”><div class=”navbar navbar-default navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
</div>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li><a href=”#”>Home</a></li>
<li class=”dropdown menu-large””>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”> Product Listing <b class=”caret”></b> </a>
<ul class=”dropdown-menu megamenu row”>
<li>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
</li>
</ul>
</li>

<li class=”dropdown menu-large”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Categories <b class=”caret”></b></a>
<ul class=”dropdown-menu megamenu row”>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Glyphicons</li>
<li><a href=”#”>Available glyphs</a></li>
<li class=”disabled”><a href=”#”>How to use</a></li>
<li><a href=”#”>Examples</a></li>
<li class=”divider”></li>
<li class=”dropdown-header”>Dropdowns</li>
<li><a href=”#”>Example</a></li>
<li><a href=”#”>Aligninment options</a></li>
<li><a href=”#”>Headers</a></li>
<li><a href=”#”>Disabled menu items</a></li>
</ul>
</li>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Button groups</li>
<li><a href=”#”>Basic example</a></li>
<li><a href=”#”>Button toolbar</a></li>
<li><a href=”#”>Sizing</a></li>
<li><a href=”#”>Nesting</a></li>
<li><a href=”#”>Vertical variation</a></li>
<li class=”divider”></li>
<li class=”dropdown-header”>Button dropdowns</li>
<li><a href=”#”>Single button dropdowns</a></li>
</ul>
</li>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Input groups</li>
<li><a href=”#”>Basic example</a></li>
<li><a href=”#”>Sizing</a></li>
<li><a href=”#”>Checkboxes and radio addons</a></li>
<li class=”divider”></li>
<li class=”dropdown-header”>Navs</li>
<li><a href=”#”>Tabs</a></li>
<li><a href=”#”>Pills</a></li>
<li><a href=”#”>Justified</a></li>
</ul>
</li>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Navbar</li>
<li><a href=”#”>Default navbar</a></li>
<li><a href=”#”>Buttons</a></li>
<li><a href=”#”>Text</a></li>
<li><a href=”#”>Non-nav links</a></li>
<li><a href=”#”>Component alignment</a></li>
<li><a href=”#”>Fixed to top</a></li>
<li><a href=”#”>Fixed to bottom</a></li>
<li><a href=”#”>Static top</a></li>
<li><a href=”#”>Inverted navbar</a></li>
</ul>
</li>
</ul>

</li>
</ul>
</div>
</div>
</div><

code css

.navbar-default{
color: #fff;
background-color: #232323;
border-color: #aca1a2;
}
.navbar-default .navbar-nav > li > a{
color:#fff;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
color:#fff;
}
.menu-large {
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:100%;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;

}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}

code jquery

// Use this if wants to open menu on honver not click,
jQuery(document).ready(function(){
$(“.dropdown”).hover(
function() { $(‘.dropdown-menu’, this).stop().fadeIn(“slow”);
},
function() { $(‘.dropdown-menu’, this).stop().fadeOut(“slow”);
});
});

Come back to the task creating a mega menu using html, you need to download bootstrap to your device then unzip this file. Next, copy and paste the following code snippet to file menu.html. After that, you open and run file index.html on the browser such as Chrome or Firefox. You will receive the result like the screenshot above. If you would like to add bootstrap mega menu full width code snippet to your website, just open your project and insert the given code. Remember to back up your project before adding new code snippets because the added css may have effects on your website interface. Please share this article if it is helpful. If you have any suggestion or better tactics, please leave a comment so we can improve this article and the next ones in the future. Thanks for reading!

Copyright © 2019 Tuxjm el sitio de jmedina

Theme by Anders NorenUp ↑