Menu principal: Horizontal (par défaut ) ou vertical
Par défaut le menu principal est horizontal. Vous pouvez la basculer en "vertical" en cochant "Menu vertical" dans les propriétés du "Thème Paris.fr" en Back Office.
Menu principal
Menu principal vertical
La macro @cMainNav permet de générer la barre de navigation principale du site. Elle est utilisée par défaut dans le thème Paris.fr.
Elle permet de générer un menu horizontal ou vertical, avec des sous-menus, un champ de recherche et un menu utilisateur.
Paramètres
Exemple
Paramètres
Voici la liste des différents paramètres de la macro :
- id (string) optionnal - identifiant unique de la bannière
- title (string) optionnal- titre de la bannière
- class (string) optionnal - classe(s) css de la bannière
- titleClass (string) optionnal Classe CSS à ajouter au titre de la bannière - par défaut vide
- onlyHome (boolean)optionnal - si true, le site affiche la bannière que sur la première page Configurable en BO
- imageSrc (string) optionnal - Chemin vers une image. Attention cette image sera placée en fond et couvrira la totalité de taille de la bannière. Configurable en BO
- params (string) optionnal - permet d'ajouter des paramètres HTML à la bannière
Aide
Image bannière sur page principale. Par défaut l'image affichée est définie dans le BO. Accéder aux propriétés du site ( menu "Administration du site / Propriétés du site" ou bouton ), onglet "Configuration du Thème Parisfr ". Dans l'onglet le champs "Image du bandeau" contient le chemin de l'image affichée.
Plusieurs options permettent de gérer l'affichage de ce bandeau Configurable en BO:
- Afficher l'image sur le bandeau sur la page d'accueil du site : Afficher l'image définie dans le champs "Image du bandeau" bandeau sur la page d'accueil du site
- Afficher le bandeau sur toutes les pages : Si n'est pas coché affiche seulement le bandeu sur la home page
- Afficher l'image du site sur le bandeau : Si coché affiche l'image
- Crédit de l'image du site sur le bandeau : Si rempli affiche le crédit pour l'image du bandeau
@cBreadCrumb
Exemple
Paramètres
Voici la liste des différents paramètres de la macro :
- home (string) required - Titre de la page Home. Par défaut clé Fil d'ariane disponible dans le fichier "themeparisfr_messages_fr.properties"
- items (list) required - Objet JSON list avec liste d'item de page. L'objet contient un attribut 'titre' et un attribut 'url'.
- class (string) optionnal - classe(s) css de la bannière
- params (string) optionnal - permet d'ajouter des paramètres HTML au fil d'ariane
Aide
Fil d'ariane
@cOffcanvas
Exemple
Afficher le menu gauche
Afficher le menu gauche
Afficher le menu haut
Afficher le menu haut
Afficher le menu de droite
Afficher le menu de droite
Menu Offcanvas
- Menu 1
- Menu 2
Menu Offcanvas - Top
- Menu 1
- Menu 2
Menu Offcanvas - Right
- Menu 1
- Menu 2
<@cOffcanvas id='off1'>
<@chList>
<@chItem>Menu 1</@chItem>
<@chItem>Menu 2</@chItem>
</@chList>
</@cOffcanvas>
<a id="btn-off-end" class="btn btn-primary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#off-end" role="button" aria-controls="off-end" title="Afficher le menu gauche">
Afficher le menu gauche
<span class="visually-hidden">Afficher le menu gauche</span>
</a>
<div class="offcanvas offcanvas-end w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="off-end" aria-labelledby="off-endLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 pe-xl m-0 me-xl" id="off-endLabel">Menu Offcanvas</h2>
<button type="button" class="border btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close mt-xs"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg> </button>
</div>
<div id="offcanvas-body-off-end" class="offcanvas-body text-break ps-xl">
<ul >
<li>
Menu 1</li>
<li>
Menu 2</li>
</ul>
</div>
</div>
<a id="btn-off-top" class="btn btn-secondary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#off-top" role="button" aria-controls="off-top" title="Afficher le menu haut">
Afficher le menu haut
<span class="visually-hidden">Afficher le menu haut</span>
</a>
<div class="offcanvas offcanvas-top w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="off-top" aria-labelledby="off-topLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 pe-xl m-0 me-xl" id="off-topLabel">Menu Offcanvas - Top </h2>
<button type="button" class="border btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close mt-xs"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg> </button>
</div>
<div id="offcanvas-body-off-top" class="offcanvas-body text-break ps-xl">
<ul >
<li>
Menu 1</li>
<li>
Menu 2</li>
</ul>
</div>
</div>
<a id="btn-off-start" class="btn btn-primary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#off-start" role="button" aria-controls="off-start" title="Afficher le menu de droite">
Afficher le menu de droite
<span class="visually-hidden">Afficher le menu de droite</span>
</a>
<div class="offcanvas offcanvas-start w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="off-start" aria-labelledby="off-startLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 pe-xl m-0 me-xl" id="off-startLabel">Menu Offcanvas - Right </h2>
<button type="button" class="border btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close mt-xs"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-close"></use>
</svg> </button>
</div>
<div id="offcanvas-body-off-start" class="offcanvas-body text-break ps-xl">
<ul >
<li>
Menu 1</li>
<li>
Menu 2</li>
</ul>
</div>
</div>Paramètres
Voici la liste des différents paramètres de la macro :
- id (string) required - l'ID du composant hors-canvas.
- position (string) optionnal - la position du composant hors-canvas "start", "end", "top", ou "bottom".
- title (string) optionnal - le titre du composant hors-canvas.
- btnTitle (string) optionnal - le texte sur le bouton de bascule.
- btnColor (string) optionnal - la couleur du bouton de bascule.
- btnIcon (string) optionnal - l'icône pour le bouton de bascule.
- btnClass (string) optionnal - classes supplémentaires pour le bouton de bascule.
- bodyClass (string) optionnal - classes supplémentaires pour le corps du hors-canvas.
- backdrop (boolean) optionnal - si un arrière-plan doit être affiché lorsque le composant hors-canvas est ouvert.
- size (string) optionnal - la taille du composant hors-canvas "full", "half", "auto", ou "sm".
- btnSize (string) optionnal - la taille du bouton de bascule.
- targetUrl (string) optionnal - l'URL pour charger le contenu lorsque le composant hors-canvas est ouvert.
- targetElement (string) optionnal - l'ID de l'élément dans lequel charger le contenu.
- redirectForm (boolean) optionnal - si le formulaire doit être redirigé lors de la soumission.
- badgeContent (string) optionnal - le contenu du badge sur le bouton de bascule.
- badgeColor (string) optionnal - la couleur du badge.
Aide
Génère un composant hors-canvas pour un panneau coulissant en superposition.
Exemple
<@cGoToTop />
<button class="btn btn-primary fadein btn-gototop" type="button">
<span class="btn-label ">Top of the page</span>
<span class="main-info-color">
↑</span>
</button>
<script>
const gototop = document.querySelector('.btn-gototop');
document.addEventListener( "DOMContentLoaded", () => {
document.addEventListener("scroll", (e) => {
// Check regular scroll behavior
if (document.documentElement.scrollTop > 100) {
gototop.classList.add('active');
} else {
gototop.classList.remove('active');
}
// Calculate distance from bottom of page
const scrollHeight = document.documentElement.scrollHeight;
const viewportHeight = window.innerHeight;
const scrollPosition = document.documentElement.scrollTop;
const distanceFromBottom = scrollHeight - (scrollPosition + viewportHeight);
// Get root font size for rem conversion (typically 16px)
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
const threshold = 15 * rootFontSize; // 15rem in pixels
// Adjust bottom property when near page bottom
if (distanceFromBottom <= threshold) {
if( document.querySelector('footer.social') ) {
gototop.style.bottom = "26rem"; // Adjust for social footer
} else {
gototop.style.bottom = "22rem"; // Default bottom position
}
} else {
gototop.style.bottom = "3rem"; // Reset to default from CSS
}
// Hide/show span with class .btn-label based on scrolling state
const btnLabel = gototop.querySelector('.btn-label');
if (btnLabel) {
// Clear existing timeout
clearTimeout(window.scrollTimeout);
// Hide label while scrolling
btnLabel.style.display = 'none';
// Show label when scrolling stops
window.scrollTimeout = setTimeout(() => {
btnLabel.style.display = '';
}, 500);
}
});
gototop.addEventListener( 'click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
left: 0,
});
});
});
</script>Paramètres
Configurable en BO
L'affichage du bouton "Retour en haut de page" est disponible dans le propriété du site, "Thème Paris.fr", bouton "Ajouter le bouton "Retour en haut"
Voici la liste des différents paramètres de la macro :
- scrollLabel (string) optionnal - Nom du menu par défaut - Top of the page / Haut de page -
- scrollClass (string) optionnal - Classe CSS de l'effet de scroll sur le bouton. Par défaut "primary fadein"
- scrollBtnClass (list) optionnal - Classe CSS du bouton. Par défaut "btn-gototop"
- scrollTop (string) optionnal - Offset top par défaut pour apparition du bouton. Par défaut 100
Paramètres
Configurable en BO
Accéder aux propriétés du site ( menu "Administration du site / Propriétés du site" ou bouton ), onglet "Configuration du Thème Parisfr ".
Le bouton "Afficher / masquer le menu du plan du site" peremt de gérer l'apparition du lien du "Plan du site" dans le pied de page.
Le plan du site par défaut est géré par une feuille de style XSL.
Il est possible de surcharger le plan du site en modifiant la XSL qui est téléchargeable depuis le BO du site, menu 'Charte / Gestion des feuilles de style XSL'.
Le fichier est téléchargé est nommé "site_map_theme.xsl". Vous pourrez le mettre à jour et le ré-uploader.