Mega Menu With Bootstrap 4 Code Example


Example 1: mega menu with card bootstrap


reference : https://jsfiddle.net/Lokesh003Coding/qL7j5ytg/

Example 2: bootstrap mega menu responsive


<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">
Mega Dropdown
</a>

<div class="dropdown-menu pt-0" aria-labelledby="navbarDropdown">

<img src="./img/cover.jpg" class="img-fluid" alt="" >

<div class="d-flex align-items-start flex-column flex-sm-row p-3">

<div>
<div class="dropdown-header">Services</div>
<a class="dropdown-item" href="#" >Développement web</a>
<a class="dropdown-item" href="#" >Développement mobile</a>
<a class="dropdown-item" href="#" >UX et Design</a>
<a class="dropdown-item" href="#" >Infographie</a>
</div>

<div>
<div class="dropdown-header">Technologies</div>
<a class="dropdown-item" href="#" >HTML et CSS</a>
<a class="dropdown-item" href="#" >BOOTSTRAP</a>
<a class="dropdown-item" href="#" >PHP et LARAVEL</a>
<a class="dropdown-item" href="#" >JAVASCRIPT et VUE.JS</a>
</div>

<div>
<div class="dropdown-header">Outils</div>
<a class="dropdown-item" href="#" >Visual Studio Code</a>
<a class="dropdown-item" href="#" >Laragon</a>
<a class="dropdown-item" href="#" >Google Chrome</a>
<a class="dropdown-item" href="#" >Windows 10</a>
</div>

</div>

</div>

</li>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable