Prévisualisation Style guide @cMainNav [New window]
Paris
Thème Paris.fr
Macro
<@cMainNav hasMenu=false isSidebar=false isSibebarCollapsible=false title='Paris'>
<#-- Add your own Main Menu Content here with @cMainNavItem macro -->
</@cMainNav>
Html
<style>#main{min-height: 6vh;}</style>
<header class="theme-main-header is-fixed has-banner" id="main-banner-themeparisfr" role="banner">
<div class="main-header" style="position:static">
<nav class="navbar navbar-paris navbar-light" aria-labelledby="main-nav-title">
<a class="navbar-brand" href=".">
<img src="themes/skin/parisfr/images/header-logo-paris.svg" class="logo" alt="Paris">
<hr aria-hidden="true">
<span id="main-nav-title" class="main-service-title">Paris </span>
</a>
<span class="navbar-menu-button">
<button class="navbar-toggler" data-toggle="offcanvas" data-target="#navbarMainMenu" aria-label="Show menu" aria-controls="navbarMainMenu">
<span id="navbar-icon" >
<span></span>
<span></span>
<span></span>
</span>
</button>
</span>
<div class="navbar-collapse offcanvas-collapse align-items-center" id="navbarMainMenu" tabindex="-1" aria-labelledby="main-nav-title" >
<div class="navbar-main" aria-label="Main menu" role="navigation">
<ul id="main-site-menu" class="navbar-nav navbar-main">
<li class="nav-item navbar-mon-paris ml-auto" aria-label="Mon Paris">
<ul id="monparis-wrapper" class="navbar-nav mon-paris">
<li class="nav-item dropdown" >
<a class="nav-link" id="dropdownMenuMonParisUser" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" focusable="false" >
<title>Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect</span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMonParisUser">
<div class="dropdown-content d-flex flex-column align-items-center">
<h2 class="h3">Votre compte Mon Paris</h2>
<p class="mt-xl pb-l">Vous avez déjà un compte Mon Paris ?</p>
<a class="btn btn-primary btn-user btn-default-user" href="https://moncompte.rec.apps.paris.mdp/moncompte/" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" focusable="false" >
<title>Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span>Connect to Mon Paris</span>
</a>
<p class="py-m lh-sm">Mon Paris vous permet d'accéder à tous les<br> services de la Ville et suivre vos demandes.</p>
<a class="btn btn-outline-primary btn-user btn-outline-user" href="jsp/site/Portal.jsp?page=myluteceusergu&view=createAccount" aria-label="Link to connect to Mon Paris Account">
<svg class="paris-icon paris-icon-user user-logo" focusable="false" >
<title>Connect</title>
<use xlink:href="#paris-icon-user"></use>
</svg>
<span> Mon Paris</span>
</a>
<p class="mt-5 text-center">
<a href="https://www.paris.fr/pages/mentions-legales-235" title="Credits [New window]" target="_blank" >
<span class="link-label">Credits</span>
</a>
</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="main-service-title"><span>Paris</span></div>
</div>
<div class="banner bg-banner page-" id="main-banner" style="background-image:url(images/local/skin/banner.jpg);" >
<h1>Thème Paris.fr</h1>
</div>
</header>
<main id="main" role="main">
</main>Les paramètres
- @param - id - string - optional - identifiant unique de la barre de navigation
- @param - class - string - optional - classe(s) css de la barre de navigation
- @param - title - string - required - Titre du site. Par défaut récupère le nom de la variable "favorite".
- @param - logoImg - string - required - url de l'image utilisée comme logo pour le titre du site
- @param - href - string - required - url de redirection sur le logo du titre du site
- @param - hasMenu - boolean - required - si true, le site possède un menu
- @param - isSidebar - boolean - required - si true, le menu sera vertical calé à gaucheConfigurable en BO
- @param - isSibebarCollapsible - boolean - required - si true, le menu pourra être masquéConfigurable en BO
- @param - showDefaultMenu - boolean - required - si true, affiche le menu
- @param - hasSearchMenu - boolean - required - si true, ajoute la rercherche au menu
- @param - typeSearch - string - required - Si Field, ajoute le champs de rercherche sinon un lien paramètre sur l'url de recherche précisée dans les paramètres les propriétés du site. Si la valeur est button une icone de recherche sera positionnée après le menu.
- @param - searchUrl - string - required - Url pour l'icone de recherche. Par défaut récupère la valeur de l'url de recherche précisée dans les paramètres les propriétés du site.
- @param - searchAction - string - required - Url d'action pour le formulaire nécessite typeSearch='field'
- @param - searchSolr - boolean - required - si "true" fait la recherche sur Solr et non sur le moteur de recherche par défaut.
- @param - searchParams - string - optional - tous champs à ajouter au formulaire nécessitent typeSearch='field'
- @param - hasLogin - boolean - required - si true, le site est authentifié et propose un bouton de login (connexion Mon Paris)
- @param - loginClass - string - optional - classe CSS pour le bouton de login
- @param - role - string - required - role aria par défaut
- @param - params - string - optional - permet d'ajouter des paramètres HTML à la barre de navigation
Aide
Navigation principale configurée par défaut dans le template "WEB-INF\templates\skin\site\themeparisfr_frameset_main_nav.html"