Feat: Menu naviguation dropDown #4

pierrickmartinet · Mar 29, 2021 · 1be6df7 · 1be6df7
1 parent d136694
commit 1be6df7
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -35,26 +35,14 @@
         <div class="titleHeader">
             <h2 class="textWhite titleFont">Javascript Project</h2>
         </div>
-       <!-- <div>
-            <nav>
-                <div>
-                    <a href="index.html">Accueil</a>
-                </div>
-                <div>
-                    <a href="gallerie.html">Gallerie</a>
-                </div>
-                <div>
-                    <a href="jeu.html">Jeu</a>
-                </div>
-            </nav>
-        </div> -->
-        <div class="dropdown">
-            <button onclick="myFunction()">Menu</button>
-            <div>
-              <a href="index.html">Index</a>
-              <a href="gallerie.html">Gallerie</a>
-              <a href="jeu.html">Jeu</a>
-            </div>
+        <!-- Menu dropdown -->
+        <div class="dropdown closed">
+            <h2 class="icon">Menu<span>∆</span></h2>
+            <ul class="menu">
+              <li><a href="index.html">Accueil</a></li>
+              <li><a href="gallerie.html">Gallerie</a></li>
+              <li><a href="jeu.html">Jeu</a></li>
+            </ul>
           </div>
 
     </header>
@@ -64,7 +52,6 @@ <h2 class="textWhite titleFont">Javascript Project</h2>
         <h1 id="titleJavascriptProject">Accueil</h1>
 
         <!-- Carrousel d'image -->
-
 <div class="fotorama" data-transition="slide" data-loop="true" data-autoplay="3000">
     <img src="images/chuckjoke1.jpg">
     <img src="images/chuckjoke3.jpg">

diff --git a/scriptIndex.js b/scriptIndex.js
@@ -1,6 +1,7 @@
 $(document).ready(function () {
     console.log('Je peux maintenant écrire du code jQuery');
 
+
     // Appelle et traitement API par requête Ajax
 
     $.getJSON("http://api.icndb.com/jokes/random/20")
@@ -12,7 +13,7 @@ $(document).ready(function () {
             let data = response;
             console.log(data);
 
-            while (index < data.value.length){
+            while (index < data.value.length) {
                 // Récupère dans l'objet data la propriété joke, la place dans une div et place cette div dans la div "feed"
                 $('<div class="blagues"></div>').append(data.value[index].joke).prependTo('#feed');
                 index += 1;
@@ -21,13 +22,29 @@ $(document).ready(function () {
         })
 
         // En cas d'échec de la requête Ajax
-        .fail(function(error){
+        .fail(function (error) {
             alert("La requête s'est terminée en échec. Infos:" + JSON.stringify(error));
         })
 
         // Toujours exécuté que se soit succés ou échec
-        .always(function(){
+        .always(function () {
             //alert("Requête effectuée");
         });
 
+
+
+    // Menu dropDown
+
+    // Séléction de la div de la classe dropdown 
+    let dropdown = document.querySelector('.dropdown')
+
+    // Au clic si fermé: ouvre sinon ferme
+    dropdown.addEventListener('click', (e) => {
+        if (dropdown.classList.contains('closed')) {
+            dropdown.classList.remove('closed')
+        } else {
+            dropdown.classList.add('closed')
+        }
+    })
+
 });
diff --git a/style.css b/style.css
@@ -30,13 +30,6 @@ header{
 padding-left: 30px;
 }
 
-nav{
-    padding: 30px;
-    display: flex;
-    justify-content: space-evenly;
-    width: 500px;
-}
-
 
 /* Lien */
 a{
@@ -96,8 +89,53 @@ main{
     border-radius: 20px;
 }
 
+/* Caroussel */
+
 .fotorama{
 display: flex;
 justify-content: center;
+}
 
-}
+/* Menu DropDown */
+
+.dropdown {
+    transition: all 0.2s ease-in-out;
+    overflow: hidden;
+    background: #CCDAD1;
+    border: solid 1px #000F08;
+    width: 200px;
+    margin: 5px;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+  }
+  .icon {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 25px 0 10px;
+  }
+  .menu {
+
+    height: 160px;
+  }
+  .menu li {
+    font-size: 20px;
+    padding: 14px 10px;
+    border-top: solid 1px #000F08;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  a {
+    text-decoration: none;
+    color: #000F08;
+  }
+
+  .dropdown.closed .menu {
+    height: 0px;
+  }
+  .dropdown.closed .icon span {
+    transform: rotate(180deg);
+  }