Menus et boutons
IMPORTANT : veuillez cliquer sur les accordéons ci-dessous pour consulter les exemples et les codes sources à réutiliser.
Introduction
Les menus sont utilisés pour guider vos étudiant-es et permettent à simplifier la navigation dans votre espace de cours. Ils donnent un accès rapide aux principaux contenus de votre cours.
Merci de trouver ci-dessous le code HTML de cet exemple de MENU à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<ul style="background-color: rgba(97, 107, 117 , 0.1); list-style-type: none; text-align: center; margin: 0; padding: 4px 8px;">
<li style="display: inline-block; font-size: 20px; padding: 5px 8px;"><!--bouton 1 -->
<div style="text-align: center;"><a class="btn btn-primary" role="button" href="#lien ici"> <strong><i
class="fa-solid fa-list"></i> Introduction</strong></a></div>
</li>
<li style="display: inline-block; font-size: 20px; padding: 5px 8px;"><!--bouton 2-->
<div style="text-align: center;"><a class="btn btn-primary"
role="button" href="#lien ici"><strong> <i class="fa-solid fa-book"></i> Modules</strong></a></div>
</li>
<li style="display: inline-block; font-size: 20px; padding: 5px 8px;"><!--bouton 3-->
<div style="text-align: center;"><a class="btn btn-primary"
role="button" href="#lien ici"><strong><i class="fa-solid fa-circle-check"></i> Travaux</strong></a></div>
</li>
</ul>
Introduction
Les menus secondaires sont également utilisés dans l'espace ou dans une autre page de contenu limitée pour guider vos étudiant-es et permettent à simplifier la navigation dans votre espace de cours. Ils donnent un accès rapide aux contenus de votre cours.
Merci de trouver ci-dessous le code source de cet exemple à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<!--aligner le menu au centre-->
<div style="text-align: center; user-select: auto;">
<div class="btn-group btn-group-lg" role="group" aria-label="Basic outlined example">
<!--bouton 1-->
<a class="btn btn-outline-primary" href="#lienbouton1" type="button"><b>JOUR 1</b></a>
<!--bouton 2-->
<a class="btn btn-outline-primary" href="#lienbouton2" type="button"><b>JOUR 2</b></a>
<!--bouton 3-->
<a class="btn btn-outline-primary" href="#lienbouton3" type="button"><b>JOUR 3</b></a>
</div>
</div>
Introduction
Un menu déroulant permet aux étudiant-e-s d'accéder facilement à un élément du cours dans une liste que vous créez.
Merci de trouver ci-dessous le code source de cet exemple à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
Pour la version Moodle 4 :
<!--Menu déroulant-->
<div style="text-align: center;">
<div class="btn-group"><!--Bouton 1-->
<div class="btn-group"><button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown"> Titre bouton 1 menu principal ici</button><div class="dropdown-menu"><a class="dropdown-item" href="lien bouton sous-menu 1.1 ici">Titre bouton sous-menu 1.1 ici</a> <a class="dropdown-item" href="lien bouton sous-menu 1.2 ici">Titre bouton sous-menu 1.2 ici</a> <a class="dropdown-item" href="lien bouton sous-menu 1.3 ici">Titre bouton sous-menu 1.3 ici</a></div>
</div><!--Bouton 2-->
<div class="btn-group"><button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown"> Titre bouton 2 menu principal ici</button>
<div class="dropdown-menu"><a class="dropdown-item" href="lien bouton sous-menu 2.1 ici">Titre bouton sous-menu 2.1 ici</a> <a class="dropdown-item" href="lien bouton sous-menu 2.2 ici">Titre bouton sous-menu 2.2 ici</a> <a class="dropdown-item" href="lien bouton sous-menu 2.3 ici">Titre bouton sous-menu 2.3 ici</a></div>
</div><!--Bouton 3-->
<button class="btn btn-outline-primary" type="button"><a class="btn btn-light" href="lien bouton 3 menu">Titre bouton 3 menu principal ici</a></button></div>
Pour la version Moodle 5 :
<!--Menu déroulant--><ul
style="background-color: rgba(97, 107, 117 , 0.1); list-style-type: none; text-align: center; margin: 0; padding: 4px 8px;">
<li style="display: inline-block; padding: 5px 8px;">
<div class="btn-group"> <!--Bouton 1--><button id="dropdownMenuButton"
class="btn btn-outline-primary btn-lg dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Titre bouton 1 menu principal </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#lien bouton sous-menu 1.1 ici">Titre bouton sous-menu 1.1 ici</a></li>
<li><a class="dropdown-item" href="#lien bouton sous-menu 1.2 ici">Titre bouton sous-menu 1.2 ici</a></li>
<li><a class="dropdown-item" href="#lien bouton sous-menu 1.3 ici">Titre bouton sous-menu 1.3 ici</a></li>
</ul>
</div>
</li>
<li style="display: inline-block; padding: 5px 8px;">
<div class="btn-group"><!--Bouton 2--><button id="dropdownMenuButton"
class="btn btn-outline-primary btn-lg dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false"> Titre bouton 2 menu principal</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#lien bouton sous-menu 2.1 ici">Titre bouton sous-menu 2.1 ici</a></li>
<li><a class="dropdown-item" href="#lien bouton sous-menu 2.2 ici">Titre bouton sous-menu 2.2 ici</a></li>
<li><a class="dropdown-item" href="#lien bouton sous-menu 2.3 ici">Titre bouton sous-menu 2.3 ici</a></li>
</ul>
</div>
</li>
</ul>
Introduction
Les boutons sont utilisées pour guider vos étudiant-es et permettent à simplifier la navigation dans votre espace de cours, mais également pour partager une information ou une ressource importante. Ils doivent attirer vos étudiant-es pour qu'ils/elles sachent qu'ils/elles doivent cliquer dessus pour accèder rapidement aux informations importantes de votre cours.
Merci de trouver ci-dessous le code source de cet exemple à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :
<!--bouton 1-->
<div style="text-align:center;"> <a class="btn btn-primary btn-lg" href="#lien-bouton-1-ici" role="button"><b>Titre du bouton 1 ici</b></a></div>
<!--bouton 2-->
<div style="text-align:center;"> <a class="btn btn-outline-primary btn-lg" href="#lien-bouton-2-ici" role="button"><b>Titre du bouton 2 ici</b></a></div>
<!--bouton 3-->
<div style="text-align:center;"> <a class="btn btn-outline-primary btn-lg btn-block" href="#lien-bouton-3-ici" role="button"><b>Titre du bouton 3 ici</b></a></div>