Différences

Ci-dessous, les différences entre deux révisions de la page.

--- ateliers:robotique:echange_de_code [2024/06/03 13:55] – 109.133.206.189
+++ ateliers:robotique:echange_de_code [2025/02/17 18:49] (Version actuelle) – portouverte
@@ Ligne 1: / Ligne 1: @@
 ====== Ici on échange nos microdes ======
+<code>
+  <script>
+    $(document).ready(function() {
+      const $subMenu = $('.sub-menu ul'); // Cacher le sous-menu par défaut
+      $subMenu.hide();
+      $(".sub-menu > a").click(function(event) {
+        event.preventDefault(); // Empêche le comportement par défaut du lien
+        $subMenu.slideToggle(50); // Affiche ou masque le sous-menu
+        $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down"); // Change l'icône
+      });
+      // Gestion de l'affichage du menu principal et du sous-menu
+      $("#menu-toggle").click(function() {
+        $subMenu.slideUp(50); // Ferme le sous-menu
+        $(".sub-menu > a i.fa").removeClass("fa-angle-up").addClass("fa-angle-down"); // Réinitialise l'icône
+      });
+    });
+  </script>
+  ===== CSS =====
+  /******** SUB MENU ********/
+.sub-menu ul {
+  display: none;
+  position: absolute;
+  border-radius: 5px;
+  z-index: 100;
+  left: 200px;
+}
+.sub-menu li {
+  display: block;
+  padding: 10px;
+  color: #333;
+  text-decoration: none;
+}
+.sub-menu li input {
+  color: #333;
+  width: 20px;
+  height: 20px;
+  left: -35px;
+  position: absolute;
+  transform: rotate(-45deg);
+  top: 40px;
+}
+.sub-menu li label {
+  color: white;
+  position: absolute;
+  left: -25px;
+  font-size: 1.3rem;
+  transform: rotate(-45deg);
+  left: 33px;
+  top: -10px;
+}
+.sub-menu li:hover {
+  background-color: #f0f0f0; /* Couleur de fond au survol */
+}
+/*********** /SUB MENU *************/
+</code>
 <code>