Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Ajout megamenu dans nav-menu

Pascal Coulougnon 205
02/07 12:22
#1
Pascal Coulougnon 205
02/07 12:22
Bonjour,

Je souhaite intégrer un mega-dropdown dans la barre nav-menu, comme celui-ci : https://bootstrap-menu.com/demos/megamenu.html

J'arrive a le structurer avec plusieurs colonnes, mais je ne parviens pas à l'afficher sur toute la largeur comme vous pouvez le voir sur le screen joint.

Cela semble de passer par ici :
<div class="d-flex align-items-start flex-column flex-sm-row p-3">


il faut certainement indiquer un "left:0; right:0; width:100%;" a ce niveau, mais je ne vois pas comment.

Ci-dessous la partie megamenu au complet :

<!-- begin custom menus customize these for your system -->
                                
                        <!-- 
MEGAMENU -->
                <
li class="nav-item dropdown">

    <
class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    
Megamenu
    
</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="nav-item dropdown"><b>Services</b></div>
                <
class="dropdown-item" href="#" >Développement web</a>
                <
class="dropdown-item" href="#" >Développement mobile</a>
                <
class="dropdown-item" href="#" >UX et Design</a>
                <
class="dropdown-item" href="#" >Infographie</a>
            </
div>

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

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


        </
div>

    </
div>

</
li>
<!-- 
end MEGAMENU -->
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 278
02/07 12:40
#2
Alain T 278
02/07 12:40
Bonjour,
regarde la doc du VRAI site
https://getbootstrap.com/docs/4.5/components/navbar/
en 4.5 car ce thème utilise bt4.

https://getbootstrap.com/docs/4.5/examples/#navbars
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 278
02/07 12:49
#3
Alain T 278
02/07 12:49
Pour répondre à ta question,
ce n'est plus le framework Bootstrap 4 qui est utilisé mais un autre...
Celui que tu as choisi est payant : https://bootstrap-menu.com/menukit/all.html

C'est donc normal que ça ne fonctionne pas avec bt4 lol

En gros, c'est une base de Bootstrap mais avec la fonctionnalité supplémentaire indiquée.
Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 205
02/07 15:02
#4
Pascal Coulougnon 205
02/07 15:02
Je ne suis pas parti de ce code mais de divers autres que j'ai bricolé en fait.
C'était juste pour l'exemple du rendu que j'espérais.

Merci, je vais donc aller voir au bon endroit
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 278
02/07 15:07
#5
Alain T 278
02/07 15:07
Pour info, j'avais déjà vu ce genre de menu,
ici d'ailleurs : https://mdbootstrap.com/docs/standard/extended/mega-menu/

et je pense qu'il y a une part en java pour atteindre cet objectif, donc le codage css ne sera pas suffisant à mon avis...
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 278
02/07 15:09
#6
Alain T 278
02/07 15:09
... ou pas

le code est ici peut-être :
<div
            
class="dropdown-menu w-100 mt-0"
            
aria-labelledby="navbarDropdown"
            
style="
              border-top-left-radius: 0;
              border-top-right-radius: 0;
            "
          
>


ça serait donc uniquement class="dropdown-menu w-100 mt-0" ?
w-100 pour dire "toute la largeur"
A tester...
Tu nous tiens informé ?
Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 205
02/07 15:12
#7
Pascal Coulougnon 205
02/07 15:12
Ha super, vais voir ça

A quoi correspond "mt-0" ?
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 278
02/07 15:15
#8
Alain T 278
02/07 15:15
en version bt, ça veut dire margin-top 0

on peut voir dans les exemples que je t'indique qu'ensuite il définit un container.
Exemple avec Mixed content :

<div class="container">
              <
div class="row my-4">
                <
div
                  
class="col-md-6 col-xl-3 mb-3 mb-xl-0"
                
>
...
Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 205
02/07 15:18
#9
Pascal Coulougnon 205
02/07 15:18
Jai donc remplacé
<div class="d-flex align-items-start flex-column flex-sm-row p-3">


par
<div class="dropdown-menu w-100 mt-0">


Mais je me retrouve avec un bloc vide.
C'est bien là que devait se faire la modif?

[edit]
Merci Alain pour ton explication du mt
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 278
02/07 15:22
#10
Alain T 278
02/07 15:22
A toi de tester, mais comme indiqué précédemment, je ne suis pas sur que tu puisses faire cela juste avec du css,
ils ont sans doute ajouté quelques lignes en java dans leur Framework.

Sinon, en tâtonnant, tu trouveras certainement !
Bon courage.