mettre un menu fun dans thème enfant cassiopea

[herve]

Salut
Bon j'essaie de passer a de "sérieux"; mettre un menu css fun si possible en bootstap 5
Il y a des codes intéressants sur codepen ; https://codepen.io/rizkykurniawanritonga/pen/rNOgGa ou https://codepen.io/mburakerman/pen/xpZJYL
ou en boostrap sur https://www.tutorialrepublic.com/twi...strap-navs.php comme https://www.tutorialrepublic.com/cod...nav-with-icons

Comment faire, j'imagine en modifiant le fichier php qui contient la navigation ?

[woluweb]

Perso, pour ajouter du javascript ou du css sur toutes les pages ou sur une sélection, je crée un module "custom HTML", je crée un Alternate Layout que je sélectionne dans le module
Et dans cet alternate layout je mets p ex ceci.
Du coup, c'est très propre...

<?php
// https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
// Note: explains also how/when the hash is regenerated
// See whether web assets in Joomla 4 would be helpful to reach the same result
// https://docs.joomla.org/J4.x:Web_Assets
// https://docs.joomla.org/J4.x:Http_Header_Management
// https://www.joomlashack.com/blog/tutorials/web-assets-in-joomla-4/

// with J!4 could apparently also use something like this (see also https://www.webmastros.com/joomla-htmlhelper-class/)
// use Joomla\CMS\HTML\HTMLHelper;
// HTMLHelper::_('script', 'mod_xxx/custom.js', ['version' => 'auto', 'relative' => true]); // Custom JS
// HTMLHelper::_('stylesheet', 'mod_xxx/custom.css', ['version' => 'auto', 'relative' => true]); // Custom CSS
use Joomla\CMS\Factory;
defined('_JEXEC') or die;
$doc = Factory::getDocument();
$doc->addStyleSheet("/media/templates/site/cassiopeia_carine/css/animate.min.css", array('version'=>'auto'));

[lomart]

Bonsoir,

Comment faire, j'imagine en modifiant le fichier php qui contient la navigation ?

Tu as raison, le mod_menu de Joomla ne passe pas les bonnes classes ni la bonne syntaxe HTML

J'ai écrit un module menu personnalisé qui permet de construire le code qui va bien par paramétrage. Il charge aussi les css et js nécessaire.

J'ai différé sa sortie pour cause de présentation de UP au Joomladay (merci Marc )

Si tu as un besoin urgent, avant la mi-juin, je peux t'envoyer le module, mais la doc est très sommaire. Il est compatible J4 et me sert exactement pour ton besoin depuis plusieurs années.

[woluweb]

sinon, pour inspiration, voici un Alternate Layout de mod_menu... pcq mon but était d'avoir un menu off-canvas et que Cassiopeia ne chargeait pas ce qu'il fallait pour cela et qu'il fallait aussi adapter la structure html.

Voici :

https://slides.woluweb.be/cassiopeia/cassiopeia.html#5-1-issue-1-the-hamburger-menu-on-small-screens

[herve]

Bonjour
Merci pour ces pistes que je vais certainement explorer.
Néanmoins je ne suis pas sûr que cela solutionne ma demande. Je pensai avant tout à modifier le rendu HTML plutôt que l'ajout de code css
Exemple code sur cassiopéa

<nav class="navbar navbar-expand-lg"> <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Basculer la navigation"> <span class="icon-menu" aria-hidden="true"></span> </button> <div class="collapse navbar-collapse" id="navbar1"> <ul class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list"> <li class="metismenu-item item-101 level-1 default">﷐<a href="/">Accueil</a></li><li class="metismenu-item item-112 level-1"><a href="/media-web">Médias web</a></li><li class="metismenu-item item-113 level-1 current active"><a href="/livre" aria-current="page">Livres</a></li><li class="metismenu-item item-114 level-1"><a href="/film">Films</a></li><li class="metismenu-item item-115 level-1"><a href="/video">Vidéos</a></li><li class="metismenu-item item-116 level-1"><a href="/audio-podcast">Audio, podcasts</a></li><li class="metismenu-item item-118 level-1"><a href="/autres">Autres</a></li></ul> </div> </nav>

Alors que sur un site avec un menu fun, c'est

<div class="container">
<nav>
<ul class="mcd-menu">
<li>
<a href="">
<i class="fa fa-home"></i>
<strong>Home</strong>
<small>sweet home</small>
</a>
</li>
<li>
<a href="" class="active">
<i class="fa fa-edit"></i>
<strong>About us</strong>
<small>sweet home</small>
</a>
</li>
<li>
<a href="">
<i class="fa fa-gift"></i>
<strong>Features</strong>
<small>sweet home</small>
</a>
</li>
<li>
<a href="">
<i class="fa fa-globe"></i>
<strong>News</strong>
<small>sweet home</small>
</a>
</li>
<li>
<a href="">
<i class="fa fa-comments-o"></i>
<strong>Blog</strong>
<small>what they say</small>
</a>
<ul>
<li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
<li>
<a href="#"><i class="fa fa-group"></i>Our Team</a>
<ul>
<li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
<li>
<a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
<ul>
<li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
<li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
<li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-picture-o"></i>
<strong>Portfolio</strong>
<small>sweet home</small>
</a>
</li>
<li>
<a href="">
<i class="fa fa-envelope-o"></i>
<strong>Contacts</strong>
<small>drop a line</small>
</a>
</li>
<li class="float">
<a class="search">
<input type="text" value="search ...">
<button><i class="fa fa-search"></i></button>
</a>
<a href="" class="search-mobile">
<i class="fa fa-search"></i>
</a>
</li>
</ul>
</nav>
</div>

J'ai essayé d'adapter les termes mais je n'ai pas vraiment le rendu souhaité. Probable que je dois modifier le fichier qui comprends le menu? si oui comment ?

[lomart]

Je pensai avant tout à modifier le rendu HTML plutôt que l'ajout de code css

Tu es obligé d'ajouter le code CSS. mais les difficultés sont au niveau du HTML

• Il faut mettre les bonnes classes dans le HTML ou modifier le CSS pour utiliser celles retournées de Joomla
• dans ton exemple, tu as un titre et un sous-titre. Joomla ne sait pas gérer cela.
  Dans ce cas, j'utilise le caractère tilde pour les séparer dans l'item menu. Exemple : "Portfolio ~ sweet home".
  Ensuite la surcharge de mod_menu fait le code qui va bien pour avoir la forme attendue

[herve]

Bonjour
Très bonne piste si je peux faire une surcharge en mettant mon code HTML
J'ai donc généré un site enfant de cassiopéa puis je l'ai activé et j'ai créee une surcharge
/templates/cassiopeia_test/html/mod_menu/
J'ai une floppé de fichiers créees:
collapse-default.php
default.php
default_component.php
default_heading.php
default_separator.php
default_url.php

j'ai trouvé le code html dans collapse-default.php
j'ai ajoutté un terme juste pour voir si je pointer dans le bon dossier
<nav class="navbar navbar-expand-md" aria-label="<?php echo htmlspecialchars($module->title, ENT_QUOTES, 'UTF-8'); ?>">
....
<p>test</p>
</nav>
Rien n'apparait dans le rendu et pas de cache !
Une idée?

[lomart]

C'est plutôt dans default_url.php

[herve]

re
c'est du pur code php et je ne vois pas ce qui génère le rendu html ?

[lomart]

re
c'est du pur code php et je ne vois pas ce qui génère le rendu html ?

On prépare les variables qui sont assemblées et retournées à la dernière ligne

[herve]

ok c'est plus compliqué que je ne pensai . je ne vois pas comment je peux m'approcher de l'html des codes exemples. Je vais chercher une alternative en attendant peut-être de confier ce travail a un dev. Je veux bien aussi tester ton module sans attendre 1 mois

[lomart]

herve
Je t'ai envoyé un MP

[woluweb]

Mmmh, même mon exemple d Alternate Layout pour avoir un menu off canvass ne t aide pas ??

[herve]

Bonjour
@woluweb

Mmmh, même mon exemple d Alternate Layout pour avoir un menu off canvass ne t aide pas ??

Ben j'ai un doute ou incompréhension car je veux pouvoir faire un beau menu principal (voir mes exemples au début du fil vs le menu principal que je trouve assez basique sur les cms dont joomla!)
Je ne vois pas comment un custom module peut remplacer le menu principal. Je parlai de surcharger le fichier qui contient la navigation du menu principal

Finalement si ce n'est pas si courant, peut-être que ce besoin est peut-être un peu compliqée a mettre en oeuvre.

Je suis parti sur le test du module de@lomart
A suivre

[woluweb]

j'ai pas le temps de faire le test pour toi, mais voici le paragraphe que je visais dans ma présentation :

See https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

There are two Alternate Layouts: one for “default” menu and one for “metismenu”:

• The files should be copied into /templates/cassiopeia/html/mod_menu
• There are a few lines of css to be added to /media/templates/site/cassiopeia/css/user.css in J4.1+ (was /templates/cassiopeia/css/user.css in J4.0)

Avec le lien Gist, tu as un exemple concret de code qui fait que mon menu "normal" devient un menu offcanvas sur smartphone