BasBas



Re : Ajout megamenu dans nav-menu
Pascal C.
Pascal C.

Re : Ajout megamenu dans nav-menu

Pascal C. 431
02/07/2021 19:34
Pascal C. 431
02/07/2021 19:34
Merci Nicolas


Re : Ajout megamenu dans nav-menu
Pascal C.
Pascal C.

Re : Ajout megamenu dans nav-menu

Pascal C. 431
02/07/2021 15:24
Pascal C. 431
02/07/2021 15:24
Oui merci... je continue ma quête


Re : Ajout megamenu dans nav-menu
Pascal C.
Pascal C.

Re : Ajout megamenu dans nav-menu

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

Re : Ajout megamenu dans nav-menu

Pascal C. 431
02/07/2021 15:12
Pascal C. 431
02/07/2021 15:12
Ha super, vais voir ça

A quoi correspond "mt-0" ?


Re : Ajout megamenu dans nav-menu
Pascal C.
Pascal C.

Re : Ajout megamenu dans nav-menu

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


Ajout megamenu dans nav-menu
Pascal C.
Pascal C.

Ajout megamenu dans nav-menu

Pascal C. 431
02/07/2021 12:22
Pascal C. 431
02/07/2021 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 : Modif css
Pascal C.
Pascal C.

Re : Modif css

Pascal C. 431
01/07/2021 10:14
Pascal C. 431
01/07/2021 10:14
Rhooo, c'est pas possible d'être si peu appliqué !!! Je suis désolé Alain

La bonne nouvelle est tout de même que j'avais compris le principe même si je l'ai mal écrit. C'est déjà ça.
(on se rassure comme l'on peut hein)...


Re : Modif css
Pascal C.
Pascal C.

Re : Modif css

Pascal C. 431
01/07/2021 10:03
Pascal C. 431
01/07/2021 10:03
Oui, j'ai bien tout vidé.
Je me suis d'ailleurs bien aperçu que la ligne slogan avait perdu ses propriétés. Donc de ce coté là c'est bon.


Re : Modif css
Pascal C.
Pascal C.

Re : Modif css

Pascal C. 431
01/07/2021 09:43
Pascal C. 431
01/07/2021 09:43
Bon, plus difficile, je voudrais attribuer une taille de caractere différente pour le sitename et le slogan.
Je pensais simplement pouvoir faire ainsi

dans le CSS
.mon-slidetext1{
    
font-size48px;
    
text-shadow6px 5px 2px #000000;
    
color#FFFFFF;

.mon-slidetext2{
    
font-size24px;
    
text-shadow6px 5px 2px #000000;
    
color#FFFFFF;


dans le slider.tpl
<h2 class="mon-slidetext1"><{$xoops_sitename}></h2>
<
class="mon-slidetext2"><{$xoops_slogan}></p>
<
class="btn btn-primary" href="#"><{$smarty.const.THEME_LEARNMORE}></a>


mais mon-slidetext2 n'est pas pris en compte.
A chaque fois que je pense avoir compris la démarche... bien non en fait


Re : Modif css
Pascal C.
Pascal C.

Re : Modif css

Pascal C. 431
01/07/2021 08:51
Pascal C. 431
01/07/2021 08:51
Super Alain, je vais ben potasser tout ça. ça va m'être fort utile.
Va falloir que je bosse aussi le fonctionnement des menus bootstrap pour les rendre plus "visuels"

Pour info, Je me suis aperçu que le module xmcontent de Greg gère hyper bien l'import de code html.

mon idée finale est en fait de passer a terme sous Xoops tout le site html qui commence à prendre un coup de vieux, et probablement même le fusionner avec notre extranet.

C'est pas pour demain, mais je pense que je peux assez facilement exporter toutes les pages en utilisant ce module.

Ca va me permettre d'appréhender petit a petit le principe de fonctionnement de bootstrap qui comme tu peux le voir me pose beaucoup de soucis.



« 1 ... 24 25 26 (27) 28 29 30 ... 43 »