Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 278
02/07 15:24
#11
Pascal Coulougnon 278
02/07 15:24
Oui merci... je continue ma quête
Re : Ajout megamenu dans nav-menu
Nicolas
Nicolas

Re : Ajout megamenu dans nav-menu

Nicolas 59
02/07 17:56
#12
Nicolas 59
02/07 17:56
Attention,
le lien de Alain pointe sur la version BT5 de mdbootsrap.
J'utilise énormément ce Framework et en version 4, c'est une version payante qui est nécessaire.

Voici le lien en version BT4 : https://mdbootstrap.com/docs/b4/jquery/navigation/mega-menu/#v-1

Voici le code du dropdown mais forcément il manque le code CSS
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3 show" aria-labelledby="navbarDropdownMenuLink4">
              <
div class="row">
                <
div class="col-md-6 col-xl-3 sub-menu mb-4">
                  <
h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
                  <
ul class="list-unstyled">
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
                      
</a>
                    </
li>
                  </
ul>
                </
div>
                <
div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">
                  <
h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
                  <!--
Featured image-->
                  <
a href="#!" class="view overlay z-depth-1 p-0 mb-2 waves-effect waves-light">
                    <
img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid" alt="First sample image">
                    <
div class="mask rgba-white-slight"></div>
                  </
a>
                  <
class="news-title font-weight-bold pl-0 waves-effect waves-light" href="#!">Lorem ipsum dolor sit</a>
                  <
class="font-small text-uppercase white-text">
                    <
class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 172017 / <class="far fa-comments px-1" aria-hidden="true"></i20
                  
</p>
                </
div>
                <
div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
                  <
h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
                  <!--
Featured image-->
                  <
a href="#!" class="view overlay z-depth-1 p-0 mb-2 waves-effect waves-light">
                    <
img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid" alt="First sample image">
                    <
div class="mask rgba-white-slight"></div>
                  </
a>
                  <
class="news-title font-weight-bold pl-0 waves-effect waves-light" href="#!">Ut labore et dolore magna</a>
                  <
class="font-small text-uppercase white-text">
                    <
class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 162017 / <class="far fa-comments px-1" aria-hidden="true"></i25
                  
</p>
                </
div>
                <
div class="col-md-6 col-xl-3 sub-menu mb-0">
                  <
h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
                  <
ul class="list-unstyled">
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi architecto
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
                      
</a>
                    </
li>
                    <
li>
                      <
class="menu-item pl-0 waves-effect waves-light" href="#!">
                        <
class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
                      
</a>
                    </
li>
                  </
ul>
                </
div>
              </
div>
            </
div>


Je ne pourrais pas donner le CSS qui correspond malgré que j'ai la licence PRO
Nicolas (ForMuss)
Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 278
02/07 19:34
#13
Pascal Coulougnon 278
02/07 19:34
Merci Nicolas
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 360
05/07 10:57
#14
Alain T 360
05/07 10:57
Oui oui, je l'avais bien indiqué Citation :

Alain T a écrit :
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.

et oui, maintenant, même sur Bootstrap, on arrive par défaut sur la version BT5.
Pour atteindre la version 4.x : https://getbootstrap.com/docs/versions/
ou plus directement :
https://getbootstrap.com/docs/4.5/getting-started/introduction/
ou
https://getbootstrap.com/docs/4.6/getting-started/introduction/
selon la version que tu utilises dans ton thème.
Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 278
09/07 14:57
#15
Pascal Coulougnon 278
09/07 14:57
Bon, suis suis toujours en train de me battre avec mon menu, et j'ai finalement opté pour acheter le script ruby menu visible sur mon site test ICI

Après avoir bien galéré, j'ai encore 2-3 petits trucs qui me bloquent mais j'avance plutôt pas mal...

Par contre, je ne parviens pas à intégrer le moteur de recherche Xoops dans mon menu qui est pourtant doté la fonction recherche.

Dans mon menu, j'ai ce script :
<li class="ruby-menu-right ruby-menu-social ruby-menu-search"><a href="#"><class="fa fa-search" aria-hidden="true"></i><span><input type="text" name="search" placeholder="Search.."></span></a></li>


Je pense que je dois le combiner avec celui de xoops ICI :
<form class="form-inline my-2 my-lg-0" role="search" action="<{xoAppUrl search.php}>" method="get">
                        <
div class="input-group mb-3">
                            <
input class="form-control" type="text" name="query" placeholder="<{$smarty.const.THEME_SEARCH_TEXT}>">
                            <
div class="input-group-append">
                                <
button class="btn btn-secondary" type="submit"><class="fa fa-search" aria-hidden="true"></i></button>
                            </
div>
                        </
div>
                        <
input type="hidden" name="action" value="results">
                    </
form>


Mais je n'y parviens pas. J'arrive simplement a afficher "chercher dans la barre de recherche" mais pas à intégrer l'exécution de la recherche. J'en suis là :
<li class="ruby-menu-right ruby-menu-social ruby-menu-search"><a href="#"><class="fa fa-search" aria-hidden="true"></i><span><input type="text" name="search" placeholder="<{$smarty.const.THEME_SEARCH_TEXT}>">


J'ai tenté d'Integer le reste du script xoops de plein de manières différentes sans succès. Une idée de la manière de fusionner les codes pour que ma recherche s'exécute ?
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 360
09/07 15:10
#16
Alain T 360
09/07 15:10
Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 278
09/07 15:12
#17
Pascal Coulougnon 278
09/07 15:12
Oui Alain.
Le script est complet et bien foutu...

Ensuite, avec mes compétences.... ça reste assez complexe pour l'intégrer à mon header
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 360
09/07 15:16
#18
Alain T 360
09/07 15:16
Voici celui de notre site :
<!-- Champs de recherche -->
        <
form class="form-inline d-none d-sm-block mr-3" role="search" action="<{xoAppUrl search.php}>" method="get">
            <
div class="form-row">
                <
div class="col-9">
                    <
input class="form-control form-control-sm" type="text" name="query" placeholder="<{$smarty.const.THEME_NAV1_KEYWORD}>">
                </
div>
                <
div class="col-3">
                    <
input type="hidden" name="action" value="results">
                    <
button class="btn btn-primary btn-sm" type="submit"><span class="mx-auto xoopsinactive-color fas fa-search fa-lg"></span></button>
                </
div>
            </
div>
        </
form>
Re : Ajout megamenu dans nav-menu
Pascal Coulougnon
Pascal Coulougnon

Re : Ajout megamenu dans nav-menu

Pascal Coulougnon 278
09/07 15:26
#19
Pascal Coulougnon 278
09/07 15:26
Le tiens est très proche de celui de mon thème originel.

Mais celui de mon menu est vraiment diffèrent :
<li class="ruby-menu-right ruby-menu-social ruby-menu-search"><a href="#"><class="fa fa-search" aria-hidden="true"></i><span><input type="text" name="search" placeholder="Search.."></span></a></li>


Et je ne parviens pas a combiner les 2.
Je voudrais conserver le visuel de mon menu mais pouvoir l'exécuter.
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 360
09/07 15:36
#20
Alain T 360
09/07 15:36
Comprends-tu le code,
car sur ce que tu donnes, je lis :
<a href="#">
et derrière, il faut bien que tu actives des actions.

Ton modèle est vide, il est juste là pour l'exemple, il faut ensuite renseigner les bonnes valeurs.
Reprends ce que je t'ai copié.

Toi, dans ton modèle, tu as un input "vide", il faut bien l'extraire et effectuer une action dessus sans quoi, effectivement, il ne se passera rien.