PS Web Concepts: Mega Menu css

Demo : https://bootsnipp.com/snippets/orE6Z

Css:
/* menu css*/
/* adds some margin below the link sets */
.navbar .dropdown-menu div[class*="col"] {
margin-bottom:1rem;
}

.navbar .dropdown-menu {
border:none;
background-color:#fff!important;
}

.nav .readmore{ color: #546DFD!important; }
/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {

/* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
padding-top:0px;
padding-bottom:0px;
}

/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
padding:1px;
margin:0 .25rem;
}
.navbar .nav-item a:hover {
color: #546DFD!important;
}
.nav .readmore{ color: #546DFD!important; }
/* makes the dropdown full width */
.navbar .dropdown {position:static;}

.navbar .dropdown-menu {
width:100%;
left:0;
right:0;
/* height of nav-item */
top:45px;
}

/* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
display:block!important;
}

.navbar .dropdown-menu {
border: 1px solid rgba(0,0,0,.15);
background-color: #fff;
}

}

.navbar-dark .navbar-nav .nav-link {
color: #000!important;
}
.navbar-dark .navbar-nav .nav-link : hover{
color: #5672F9!important;
font-weight: normal;
}

.navbar-dark .navbar-nav .readmore {
color: #546DFD!important;
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover> ul{display:block}
.mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0; left:100%; min-width:250px; display:none; z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
}

/* menu css*/
Js :

<script type="text/javascript">
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready

// breakpoint and up
$(window).resize(function(){
if ($(window).width() >= 980){

// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
});

// hide the menu when the mouse leaves the dropdown
$( ".navbar .dropdown-menu" ).mouseleave(function() {
$(this).removeClass("show");
});

// do something here
}
});

// document ready
});

</script>

Html :
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('public/front/images/logo.png') }} " alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url('/') }}">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<div class="container">
<div class="row">
<div class="col-md-2">

<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"><b> Category 1</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link readmore" href="#" >Read more...</a>
</li>
</ul>
</div>

<div class="col-md-2">

<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"><b> Category 2</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link readmore" href="#">Read more...</a>
</li>
</ul>
</div>

<div class="col-md-2">

<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"><b> Category 2</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link readmore" href="#">Read more...</a>
</li>
</ul>
</div>

<div class="col-md-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"><b> Category 3</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Link item</a>
</li>
</ul>
</div>


<div class="col-md-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"><b> Category 4</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>


<div class="col-md-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"><b> Category 5</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>


<div class="col-md-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"><b> Category 6</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link item</a>
</li>
</ul>
</div>


<div class="col-md-2">
<a href="#">
<img src="http://apnasanpur.in.net/classified/public/front/images/products-2.jpg" alt="" class="img-fluid">
</a>
</div>

</div>
</div>


</div>
</li>

<li class="nav-item">
<a class="nav-link" href="{{ route('plan.membership') }}">Membership</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('cmspage','privacy-policy') }}">Privacy Policy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('cmspage','area-of-services') }}">Area of services</a>
</li>

</ul>

<ul class="navbar-nav ml-auto mt-10">

@if (Route::has('login'))

@auth
<li class="nav-item">
<a class="nav-link login-button" href="{{ route('dashboard') }}">Dashboard</a>
</li>
<li class="nav-item">
<a title="Logout" class="nav-link logout-button" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-formicon').submit();">

Logout
</a>
<form id="logout-formicon" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
@else
<li class="nav-item">
<a class="nav-link login-button" href="{{ route('login') }}">Login</a>
</li>

@if (Route::has('register'))

<li class="nav-item">
<a class="nav-link add-button" href="{{ route('register') }}"> Register</a>
</li>
@endif

@endauth

@endif


</ul>

</div>

</nav>

PS Web Concepts

Tuesday, 12 May 2020

Mega Menu css

No comments:

Popular Posts