« 1 (2) 3 4 5 6 »
Re : Ajout megamenu dans nav-menu
Pascal C.
Pascal C.

Re : Ajout megamenu dans nav-menu

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

Re : Ajout megamenu dans nav-menu

Nicolas 71
02/07/2021 17:56
#12
Nicolas 71
02/07/2021 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">Featuredh6>
                  <
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">Relatedh6>
                  
                  <
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 sita>
                  <
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">Designh6>
                  
                  <
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 magnaa>
                  <
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">Programmingh6>
                  <
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 C.
Pascal C.

Re : Ajout megamenu dans nav-menu

Pascal C. 451
02/07/2021 19:34
#13
Pascal C. 451
02/07/2021 19:34
Merci Nicolas
Re : Ajout megamenu dans nav-menu
Alain T
Alain T

Re : Ajout megamenu dans nav-menu

Alain T 727
05/07/2021 10:57
#14
Alain T 727
05/07/2021 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 C.
Pascal C.

Re : Ajout megamenu dans nav-menu

Pascal C. 451
09/07/2021 14:57
#15
Pascal C. 451
09/07/2021 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 727
09/07/2021 15:10
#16
Alain T 727
09/07/2021 15:10
Re : Ajout megamenu dans nav-menu
Pascal C.
Pascal C.

Re : Ajout megamenu dans nav-menu

Pascal C. 451
09/07/2021 15:12
#17
Pascal C. 451
09/07/2021 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 727
09/07/2021 15:16
#18
Alain T 727
09/07/2021 15:16
Voici celui de notre site :

        <
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 C.
Pascal C.

Re : Ajout megamenu dans nav-menu

Pascal C. 451
09/07/2021 15:26
#19
Pascal C. 451
09/07/2021 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.