header menu propre

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

@@ -1989,45 +1989,35 @@ a {
       display: flex;
       flex-direction: row;
       width: 100%; }
-      #header-top .region-header-top-left ul :is(.sous-liste) {
+      #header-top .region-header-top-left ul .is-active {
+        color: #009ee3; }
+      #header-top .region-header-top-left ul ul {
         display: flex;
         flex-direction: column;
         padding: 1rem; }
-      #header-top .region-header-top-left ul li a {
+        #header-top .region-header-top-left ul ul .is-active {
-        color: black; }
-      #header-top .region-header-top-left ul li .is-active {
-        color: #009ee3; }
-      #header-top .region-header-top-left ul li :hover {
-        color: #009ee3; }
-    #header-top .region-header-top-left ul div:first-child li div {
-      display: none; }
-    #header-top .region-header-top-left ul div:nth-child(2) li div {
-      display: none; }
-    #header-top .region-header-top-left ul:is(.ul1 .sous-liste .ul2) {
-      display: none; }
-    #header-top .region-header-top-left :hover ul div:first-child li div {
-      display: block;
-      background-color: white;
-      padding: 0.2rem; }
-      #header-top .region-header-top-left :hover ul div:first-child li div a {
-        color: black; }
-        #header-top .region-header-top-left :hover ul div:first-child li div a:hover {
           color: #009ee3; }
-    #header-top .region-header-top-left :hover ul div:nth-child(2) li div {
+      #header-top .region-header-top-left ul li {
-      display: block;
+        display: flex;
-      background-color: white;
+        flex-direction: column;
-      padding: 0.2rem; }
+        padding: 1rem; }
-      #header-top .region-header-top-left :hover ul div:nth-child(2) li div a {
+        #header-top .region-header-top-left ul li a {
-        color: black; }
+          color: black; }
-        #header-top .region-header-top-left :hover ul div:nth-child(2) li div a:hover {
+        #header-top .region-header-top-left ul li .is-active {
           color: #009ee3; }
-    #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) {
+        #header-top .region-header-top-left ul li :hover {
+          color: #009ee3; }
+    #header-top .region-header-top-left ul ul {
+      display: none; }
+    #header-top .region-header-top-left :hover ul ul {
       display: block;
       background-color: white;
       padding: 0.2rem; }
-      #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) a {
+      #header-top .region-header-top-left :hover ul ul .is-active {
+        color: #009ee3; }
+      #header-top .region-header-top-left :hover ul ul a {
         color: black; }
-        #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) a:hover {
+        #header-top .region-header-top-left :hover ul ul a:hover {
           color: #009ee3; }
   #header-top #block-socialnetwork-2 {
     position: relative;

web/themes/custom/eql/scss/partials/_header.scss

@@ -78,16 +78,22 @@
             list-style: none;
             display: flex;
             flex-direction: row;
-            // padding-left: 1rem;
-            // justify-content: space-between;
             width: 100%;
-            :is(.sous-liste){
+            .is-active{
+                color:$blue-light;
+            }
+            ul{
                 display: flex;
                 flex-direction: column;
                 padding: 1rem;
+                .is-active{
+                    color:$blue-light;
+                }
             }
             li{
-
+                display: flex;
+                flex-direction: column;
+                padding: 1rem;
                 a {
                     color: $black;
                 }
@@ -99,53 +105,28 @@
                 }
             }
         }
-        ul div:first-child li div{
-            display: none;
-        }
-        ul div:nth-child(2) li div{
-            display: none;
-        }
-        ul:is(.ul1 .sous-liste .ul2){
-            display: none;
-        }
-        :hover  ul{
-            div:first-child li div{
-                display: block;
-                background-color: $white;
-                padding: 0.2rem;
-                a{
-                    color: $black;
-                    &:hover{
-                        color: $blue-light;
-                    }  
-                }
-            }
-        }    
-        :hover ul {
-            div:nth-child(2)  li div{
-                display: block;
-                background-color: $white;
-                padding: 0.2rem;
-                a{
-                    color: $black;
-                    &:hover{
-                        color: $blue-light;
-                    }  
-                }
-            }
-        }
-        :hover  ul:is(.ul1 .sous-liste .ul2){
-                display: block;
-                background-color: $white;
-                padding: 0.2rem;
-                a{
-                    color: $black;
-                    &:hover{
-                        color: $blue-light;
-                    }  
-                }
 
+        ul ul {
+            display: none;
         }
+
+        :hover ul{
+            ul{
+                display: block;
+                background-color: $white;
+                padding: 0.2rem;
+                .is-active{
+                    color:$blue-light;
+                } 
+                a{
+                    color: $black;
+                    &:hover{
+                        color: $blue-light;
+                    } 
+                }
+            }
+        }
+
     } 
 
     // reseaux sociaux

web/themes/custom/eql/templates/partials/menu.html.twig

@@ -1,67 +0,0 @@
-{#
-/**
- * @file
- * Default theme implementation to display a menu.
- *
- * Available variables:
- * - menu_name: The machine name of the menu.
- * - items: A nested list of menu items. Each menu item contains:
- *   - attributes: HTML attributes for the menu item.
- *   - below: The menu item child items.
- *   - title: The menu link title.
- *   - url: The menu link url, instance of \Drupal\Core\Url
- *   - localized_options: Menu link localized options.
- *   - is_expanded: TRUE if the link has visible children within the current
- *     menu tree.
- *   - is_collapsed: TRUE if the link has children within the current menu tree
- *     that are not currently visible.
- *   - in_active_trail: TRUE if the link is in the active trail.
- *
- * @ingroup themeable
- */
-#}
-{% import _self as menus %}
-{%
-  set classes = [
-    'sous-liste',
-  ]
-%}
-
-{%
-  set ulClasses = [
-    'ul1',
-    'ul2'
-  ]
-%}
-{#
-  We call a macro which calls itself to render the full tree.
-  @see https://twig.symfony.com/doc/1.x/tags/macro.html
-#}
-{{ menus.menu_links(items, attributes, 0) }}
-
-{% macro menu_links(items, attributes, menu_level) %}
-  {% import _self as menus %}
-  <div class="menuOpen">
-  {% if items %}
-    {% if menu_level == 0 %}
-      <ul{{ attributes.addClass(ulClasses, 'ul1') }}{{attributes.removeClass(classes, 'sous-liste')}}{{ attributes }}>
-    {% else %}
-      <ul{{ attributes.addClass(ulClasses, 'ul2') }}{{attributes.removeClass(classes, 'sous-liste')}}{{ attributes }}>
-
-    {% endif %}
-    {# <div{{ attributes.addClass('sous-liste') }}{{attributes.removeClass(ulClasses, 'ul1')}}> #}
-      {% for item in items %}
-          <div{{ attributes.addClass('sous-liste') }}{{attributes.removeClass(ulClasses)}}>
-              <li{{ item.attributes }}>
-                  {{ link(item.title, item.url) }}
-                  {% if item.below %}
-                  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
-                  {% endif %}
-              </li>
-          </div>  
-      {% endfor %}
-    {# </div>  #}
-    </ul>
-  {% endif %}
-  </div>
-{% endmacro %}