瀏覽代碼

dropdown menu header

ouidade 3 年之前
父節點
當前提交
e2bf468ed9

+ 3 - 3
web/themes/custom/eql/css-compiled/styles.css

@@ -2836,7 +2836,6 @@ a {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      background-color: white;
       width: 100%;
       padding: 1rem; }
       #header-top .region-header-top-left ul .is-active {
@@ -2844,7 +2843,8 @@ a {
       #header-top .region-header-top-left ul ul {
         display: flex;
         flex-direction: column;
-        display: none; }
+        display: none;
+        background: white; }
         #header-top .region-header-top-left ul ul .is-active {
           color: #009ee3; }
       #header-top .region-header-top-left ul li {
@@ -2862,7 +2862,7 @@ a {
           color: #009ee3; }
         #header-top .region-header-top-left ul li :hover {
           color: #009ee3; }
-      #header-top .region-header-top-left ul:hover ul {
+      #header-top .region-header-top-left ul li:hover ul {
         display: block; }
   #header-top #block-socialnetwork-2 {
     position: relative;

+ 6 - 160
web/themes/custom/eql/scripts/main.js

@@ -97,6 +97,12 @@ ressource.classList.add('opened');
 // fleche qui tourne faq
 
 // var questions = document.getElementsByClassName("field--name-field-question");
+// var paragraph = document.querySelector('.field--name-field-question p')
+// console.log(element)
+// var styles = window.getComputedStyle(element,':after')
+// var content = styles['content']
+// console.log(content)
+
 
 // for (let i = 0; i < questions.length; i++) {
 //   const question = questions[i]
@@ -111,49 +117,6 @@ ressource.classList.add('opened');
 
 //////////////////////////////////////////
 // block collection reste bleu quand actif
-// idée: lorsque la div description du parent collection est en vue, appliquer 
-// la classe .activ{background-color:$blue-dark}
-// OU if class
-
-// $(function() {
-//   $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
-// });
-
-// jQuery(function($) {
-//   $('nav a[href^="/' + ressources/bdd/"30".split("/")[1] + '"]').addClass('active');
-// });
-
-// jQuery(function($) {
-//   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
-//   console.log(path);
-//   var nameCollection = document.querySelectorAll(".view-id-collections .view-content .views-row")
-//   console.log(nameCollection);
-//   $('.view-id-collections.view-content.views-row').each(function() {
-    
-//    if (this.href === path) {
-//     console.log(this);
-//     $(this).addClass('active');
-//    }
-//   });
-//  });
-
-// jQuery(function($) {
-//   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
-//   console.log(path);
-
-//   var nameCollection = document.querySelectorAll(".view-id-collections .view-content .views-row a")
-//   console.log(nameCollection);
-
-//  function inView() {
-
-//   let lienPave = document.querySelectorAll(".view-id-collections .view-content .views-row a")
-//     if (this.href === path) {
-
-      
-//     this.classList.add('active');
-//     }
-// };
-// }); 
      
 jQuery(function($) {
     var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
@@ -166,58 +129,6 @@ jQuery(function($) {
  });
 
 
-// const Autre = document.getElementsByClassName("");
-// const Historique = document.getElementsByClassName("");
-
-// var descriptionAutre = document.getElementsByClassName("js-view-dom-id-b65e57a8672654a3b2a59e71c9f5ccfb730d7879c2c0096e324b0ce29b2a3b74").value
-// console.log(descriptionAutre);
-// // const descriptionHistorique = document.getElementsByClassName("js-view-dom-id-5c891f37126eb689016ea6da376ca1a15cc90c3dbcb394d063fb43dc16ec5250");
-
-
-// var nameCollection = document.querySelectorAll(".path-ressources .basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections .view-content .views-row a").value
-// console.log(nameCollection);
-
-// // var descriptionCollection = document.getElementsByClassName("");
-
-// // let nameCollection = { Autre: "Autres contributions sur la qualité du logement", Historique: "Histoire des expérimentations du logement depuis les années 1950 en Europe"};
-
-// var Autre = "Autres contributions sur la qualité du logement"
-// var Historique = "Histoire des expérimentations du logement depuis les années 1950 en Europe"
-// console.log(Autre, Historique);
-
-// function getValue(){
-//   for (const nameCollection = Autre ){}
-
-//   if (nameCollection === Autre){
-//     return "Autres contributions sur la qualité du logement";
-//   }
-  
-// }
-
-// function blueBackground(){
-//   // console.log('nameCollection')
-//   // var descriptionCollection = document.getElementsByClassName("");
-// // if (descriptionCollection === descriptionAutre) 
-// //   nameCollection.addClass('blue');
-// if (getvalue === "Autres contributions sur la qualité du logement")
-// nameCollection.addClass('blue');
-// }
-
-
-// let inView = addEventListener("inView", blueBackground);
-// console.log(inView)
-
-// function blueBackground(event){
-//   console.log(event, this);
-
-// }
-
-//
-
-
-
-
-
 
 // /////////////////
 //// ancre dans texte
@@ -252,68 +163,3 @@ jQuery(function($) {
 // } 
 
 ///////////////////
-
-// document.addEventListener('click', function(e) {
-//   if (e.target.classList.contains('rect_white_left') {
-//     e.target.parentNode.nextElementSibling.classList.toggle('opened');}
-//   }
-
-
-// fonction pour attribuer la class du parents
-
-// var fields = document.getElementsByClassName("field--name-field-titre");
-// var paragraphs = document.getElementsByClassName("paragraph--type--texte");
-// for  (let i = 0; i < fields.length; i++) {
-//   const field = fields[i]
-// }
-// function giveIdParent(){
-//   document.field.classList="paragraphs";
-// }
-
-// Function mouseOut ()
-// {
-//     document.getelementbyid("flashdiv").classname="flash-I";
-// }
-
-// open external link in new window
-// $(".ext").each(
-//   function(i,e){
-//      window.open(e, '_blank');
-//   }
-// );
-// var target = document.getElementsByClassName("ext");
-
-// document.addEventListener("click", function(e) {
-//   if (e.target == true )
-//   {
-//       e.target.setAttribute("target", "_blank");
-//   }
-// });
-
-// add id to field
-
-   // Add data-extlink attribute.
-//    $links_to_process.attr('data-extlink', '');
-
-//    var i;
-//    var length = $links_to_process.length;
-//    for (i = 0; i < length; i++) {
-//      var $link = $($links_to_process[i]);
-//      if (drupalSettings.data.extlink.extUseFontAwesome) {
-//        if (class_name === drupalSettings.data.extlink.mailtoClass) {
-//          $link[icon_placement]('<span class="fa-' + class_name + ' extlink"><span class="' + drupalSettings.data.extlink.extFaMailtoClasses + '" aria-label="' + drupalSettings.data.extlink.mailtoLabel + '"></span></span>');
-//        }
-//        else {
-//          $link[icon_placement]('<span class="fa-' + class_name + ' extlink"><span class="' + drupalSettings.data.extlink.extFaLinkClasses + '" aria-label="' + drupalSettings.data.extlink.extLabel + '"></span></span>');
-//        }
-//      }
-//      else {
-//        if (class_name === drupalSettings.data.extlink.mailtoClass) {
-//          $link[icon_placement]('<svg focusable="false" class="' + class_name + '" role="img" aria-label="' + drupalSettings.data.extlink.mailtoLabel + '" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 70 20"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><sliceSourceBounds y="-8160" x="-8165" width="16389" height="16384" bottomLeftOrigin="true"/><optimizationSettings><targetSettings targetSettingsID="0" fileFormat="PNG24Format"><PNG24Format transparency="true" filtered="false" interlaced="false" noMatteColor="false" matteColor="#FFFFFF"/></targetSettings></optimizationSettings></sfw></metadata><title>' + drupalSettings.data.extlink.mailtoLabel + '</title><path d="M56 14H8c-1.1 0-2 0.9-2 2v32c0 1.1 0.9 2 2 2h48c1.1 0 2-0.9 2-2V16C58 14.9 57.1 14 56 14zM50.5 18L32 33.4 13.5 18H50.5zM10 46V20.3l20.7 17.3C31.1 37.8 31.5 38 32 38s0.9-0.2 1.3-0.5L54 20.3V46H10z"/></svg>');
-//        }
-//        else {
-//          $link[icon_placement]('<svg focusable="false" class="' + class_name + '" role="img" aria-label="' + drupalSettings.data.extlink.extLabel + '" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><sliceSourceBounds y="-8160" x="-8165" width="16389" height="16384" bottomLeftOrigin="true"/><optimizationSettings><targetSettings targetSettingsID="0" fileFormat="PNG24Format"><PNG24Format transparency="true" filtered="false" interlaced="false" noMatteColor="false" matteColor="#FFFFFF"/></targetSettings></optimizationSettings></sfw></metadata><title>' + drupalSettings.data.extlink.extLabel + '</title><path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"/><path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"/></svg>');
-//        }
-//      }
-//    }
-//  };

+ 6 - 73
web/themes/custom/eql/scss/partials/_header.scss

@@ -75,7 +75,6 @@
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-            background-color: white;
             width: 100%;
             padding: 1rem;
 
@@ -83,11 +82,12 @@
                 color:$blue-light;
             }
             ul{
+
                 display: flex;
                 flex-direction: column;
-                // padding: 1rem;
-                // padding: 0.5rem;
                 display: none;
+                background:$white;
+                
                 .is-active{
                     color:$blue-light;
                 }
@@ -97,7 +97,6 @@
                 flex-direction: column;
                 background-color: $white;
                 padding-bottom: 0.8rem;
-                // align-items: center;
                 min-width: 30%;
                 align-items: center;
                 .menuOpen{
@@ -105,8 +104,6 @@
                 }
                 a {
                     color: $black;
-                    // text-align: center;
-
                 }
                 .is-active{
                     color:$blue-light;
@@ -115,75 +112,11 @@
                     color: $blue-light;
                 }
             }
-            &:hover{
-                ul{
-                    display: block;
-                } 
+
+            li:hover ul {
+                display: block;
             }
         }
-
-        // ul ul {
-        //     display: none;
-        // }
-
-        // :hover ul{
-        //     ul{
-        //         display: flex;
-        //         justify-content: space-between;
-        //         padding: 1rem;
-        //         background-color: white;
-                
-        //         .is-active{
-        //             color:$blue-light;
-        //         } 
-
-        //         a{
-        //             color: $black;
-        //             &:hover{
-        //                 color: $blue-light;
-        //             } 
-        //         }
-        //     }
-        // }
-
-    //     :hover div:first-of-type{
-    //         .menuOpen ul{
-    //             display: flex;
-    //             justify-content: space-between;
-    //             padding: 1rem;
-    //             background-color: white;
-                
-    //             .is-active{
-    //                 color:$blue-light;
-    //             } 
-
-    //             a{
-    //                 color: $black;
-    //                 &:hover{
-    //                     color: $blue-light;
-    //                 } 
-    //             }
-    //         }
-    //     }
-    //     :hover ul div:nth-of-type(2){
-    //         .menuOpen ul{
-    //             display: flex;
-    //             justify-content: space-between;
-    //             padding: 1rem;
-    //             background-color: white;
-                
-    //             .is-active{
-    //                 color:$blue-light;
-    //             } 
-
-    //             a{
-    //                 color: $black;
-    //                 &:hover{
-    //                     color: $blue-light;
-    //                 } 
-    //             }
-    //         }
-    //     }
     } 
 
     // reseaux sociaux