Fork me on GitHub




(1) 2 3 »


theme xwatch4 - nav-menu.tpl
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
bonjour, autre question sur le thème xwatch4.
La structure des menus n'est pas la même que xbootstrap.
J'arrive a implémenter mes menus principaux, en suivant l'exemple dans le thème fourni avec la version xoops 2.5.11.
Par contre je ne trouve pas d'information sur comment implémenter les sous-menus.
ça doit pas être bien compliqué, mais je ne trouve pas de doc sur le sujet.
Quelqu’un aurait-il un exemple de sous menu avec xswatch4 ?
JJDai

Posté le : 10/12/2021 17:35

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
salut JJDai

le menu est géré par un tpl à part. J'ai eu un peu de mal à trouver où tout été rangé, trop l'habitude des anciens thèmes, ahah.

<div class="navbar navbar-default global-nav">
        <
div class="container">
            <
div class="navbar-header">
                <
button data-target="#main-navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                    <
span class="icon-bar"></span>
                    <
span class="icon-bar"></span>
                    <
span class="icon-bar"></span>
                </
button>
                <
a href="<{$xoops_url}>" class="navbar-brand xlogo" title="<{$xoops_sitename}>">
                    <
img src="<{$xoops_url}>/uploads/logo/logo-150.png" alt="<{$xoops_sitename}>">
                </
a>
            </
div>
            <
div class="navbar-collapse collapse"  id="main-navbar-collapse">
                <
ul class="nav navbar-nav">
                    <
li><a href="<{$xoops_url}>"><{$smarty.const.THEME_HOME}></a></li>
                    <
li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="javascript:;"><{$smarty.const.THEME_ACCOUNT}><b
                                    
class="caret"></b></a>
                        <
ul id="xswatch-account-menu" class="dropdown-menu">
                            <{if 
$xoops_isuser|default:false}>
                            <
li><a href="<{$xoops_url}>/user.php"><{$smarty.const.THEME_ACCOUNT_EDIT}></a></li>
                            <
li><a href="<{$xoops_url}>/viewpmsg.php"><{$smarty.const.THEME_ACCOUNT_MESSAGES}> <span class="badge"><{xoInboxCount}></span></a></li>
                            <
li><a href="<{$xoops_url}>/notifications.php"><{$smarty.const.THEME_ACCOUNT_NOTIFICATIONS}></a></li>
                            <
li><a href="<{$xoops_url}>/user.php?op=logout"><{$smarty.const.THEME_ACCOUNT_LOGOUT}></a></li>
                            <{if 
$xoops_isadmin|default:false}>
                            <
li><a href="javascript:xswatchToolbarToggle();"><{$smarty.const.THEME_ACCOUNT_TOOLBAR}> <span id="xswatch-toolbar-ind"></span></a></li>
                            <{/if}>
                            <{else}>
                            <
li><a href="<{$xoops_url}>/user.php"><{$smarty.const.THEME_ACCOUNT_LOGIN}></a></li>
                            <
li><a href="<{$xoops_url}>/register.php"><{$smarty.const.THEME_ACCOUNT_REGISTER}></a></li>
                            <{/if}>
                        </
ul>
                    </
li>
                    <!-- 
begin custom menus customize these for your system -->
                    <
li><a href="javascript:;"><{$smarty.const.THEME_MODULE1}></a></li>
                    <
li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="javascript:;"><{$smarty.const.THEME_MODULE2}><b
                                    
class="caret"></b></a>
                        <
ul class="dropdown-menu">
                            <
li><a href="javascript:;">Topic 1</a></li>
                            <
li><a href="javascript:;">Topic 2</a></li>
                            <
li><a href="javascript:;">Topic 3</a></li>
                            <
li><a href="javascript:;">Topic 4</a></li>
                            <
li><a href="javascript:;">Topic 5</a></li>
                        </
ul>
                    </
li>
                    <
li><a href="<{$xoops_url}>/modules/newbb"><{$smarty.const.THEME_MODULE3}></a></li>
                    <
li><a href="<{$xoops_url}>/modules/contact"><{$smarty.const.THEME_MODULE4}></a></li>
                    <!-- 
end custom menus -->
                </
ul>
                <{if 
$xoops_search|default:false}>
                <
form class="navbar-form navbar-right" role="search" action="<{xoAppUrl search.php}>" method="get">
                    <
div class="input-group">
                        <
input type="text" class="form-control" placeholder="<{$smarty.const.THEME_SEARCH_TEXT}>" name="query">
                        <
span class="input-group-btn"><button type="submit" class="btn btn-default" aria-label="<{$smarty.const.THEME_SEARCH_TEXT}>">
                                <
span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></span>
                    </
div>
                    <
input type="hidden" name="action" value="results">
                </
form>
                <{/if}>
            </
div>
        </
div>
    </
div>


c'est le /tpl/nav-menu.tpl
avec des sous-menus

Posté le : 10/12/2021 17:54
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
Merci, mais ça ne ressemble pas à la structure que j'ai vu dans le theme xswatch4E.
Mais bon comme je ne maitrise pas le sujet je regarde ça de plus près.
par exemple la balise ul n'englobe pas la même chose, nav-menu.tpl on dirait que c'est tout le menu qui est englobé dans la balise ul alors qu'avant c'était chaque sous-menu.

Posté le : 10/12/2021 18:06

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
Toute les constantes commençant par THEME sont dans /language/english ou /language/french

Posté le : 10/12/2021 18:11
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
la première partie correspond au menu burger (quand l'écran est rétréci).
Sinon, tu as une structure plus ou moins classique de <ul><li>menu</li>
<li><ul><li>sous-menu</li>/<ul></li></ul>

Posté le : 10/12/2021 18:14
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
pour les constantes pas de soucis, c'est pour générer un sous-menu.
L'ancienne structure fonctionne à ceci prés que les classe css ne sont pas les même du coup les marges notamment ne sont pas bonnes.
Je vais laisser ça de côté pour ce soir, je vais revoir ça demain matin avec des idées plus claires.

Posté le : 10/12/2021 18:17

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
theme xwatch4 - nav-menu.tpl
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
Bonjour,
J'arrive à faire ça:
Open in new window

Mettre le sous-menu dans la même liste, mais impossible de la mettre dans un autre bloc comme ci-dessous:
Open in new window


je re précise j'utilise le thème xwatch4 de xoops 2.5.11
Avec xbootstrap pas de soucis, mais la structure n'est pas la même.

La structure par défaut dans le thème ne donne que le 1er niveau comme exemple à savoir :
<li class="nav-item dropdown">
                        <
class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="xswatch-custom-menu"><{$smarty.const.THEME_MODULE2}> <span class="caret"></span></a>
                        <
div class="dropdown-menu" aria-labelledby="xswatch-custom-menu">
                            <
class="dropdown-item" href="javascript:;">Topic 1</a>
                            <
class="dropdown-item" href="javascript:;">Topic 2</a>
                            <
class="dropdown-item" href="javascript:;">Topic 3</a>
                            <
class="dropdown-item" href="javascript:;">Topic 4</a>
                            <
class="dropdown-item" href="javascript:;">Topic 5</a>
                        </
div>
                    </
li>

Mais pas comment ajouter un sous-menu pour un des items ???

JJDai

Posté le : 11/12/2021 12:46

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
Regarde ça : https://getbootstrap.com/docs/5.0/components/navbar/

ca t'expliquera comment faire des navbar.

Perso je les ai réécrit pour que ça fonctionne correctement en me basant sur cette page.
Là je suis pris pour la journée, je te répond en coup de vent.
Je regarderai plus attentivement demain

Posté le : 11/12/2021 18:01
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
oui je suis aussi tombé sur cette page, mais ce n'est pas très clair pour moi, et je ne vois rien sur les sous-menus.
JJDai

Posté le : 11/12/2021 18:11

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: theme xwatch4 - nav-menu.tpl
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
pour mettre dans un autre bloc à coté comme tu appelle, il faut normalement appliquer une marge gauche positive (pour la figure que tu as montré) de la largeur de ton menu. Tu peux aussi adjoindre un marge haute négative pour que le bloc "sous-menu" se centre par rapport au "menu principal". Mais attention qu'avec la marge négative tu te retrouve pas avec une partie hors écran.
Demain, ce serai journée off pour moi donc j'aurais un peu plus de temps

Posté le : 11/12/2021 23:06
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 3 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

26 Personne(s) en ligne (22 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 26 | Plus ...