Ajout megamenu dans nav-menu [Design et CSS] - Mon XOOPS (https://www.monxoops.fr)

Register

Ajout megamenu dans nav-menu

Pascal C. 431
2021/7/2 12:22

#1

Pascal C. 431
2021/7/2 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">



    <a 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>

                <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="nav-item dropdown"><b>Techno</b></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="nav-item dropdown"><b>Outils</b></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 class="nav-item dropdown"><b>Outils</b></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>

<!-- end MEGAMENU -->

Re : Ajout megamenu dans nav-menu

Alain T 608
2021/7/2 12:40

#2

Alain T 608
2021/7/2 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 608
2021/7/2 12:49

#3

Alain T 608
2021/7/2 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 C. 431
2021/7/2 15:02

#4

Pascal C. 431
2021/7/2 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 608
2021/7/2 15:07

#5

Alain T 608
2021/7/2 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 608
2021/7/2 15:09

#6

Alain T 608
2021/7/2 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 C. 431
2021/7/2 15:12

#7

Pascal C. 431
2021/7/2 15:12

Ha super, vais voir ça

A quoi correspond "mt-0" ?

Re : Ajout megamenu dans nav-menu

Alain T 608
2021/7/2 15:15

#8

Alain T 608
2021/7/2 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 C. 431
2021/7/2 15:18

#9

Pascal C. 431
2021/7/2 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 608
2021/7/2 15:22

#10

Alain T 608
2021/7/2 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.

Ajout megamenu dans nav-menu

Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Re : Ajout megamenu dans nav-menu

Recent forum posts

Recent Comments