bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header menu propre

Browse Source
This commit is contained in:
ouidade
2021-12-21 11:56:01 +01:00
parent ef6405e72a
commit c9d59bec1c
3 changed files with 40 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/css-compiled/styles.css
+20 -30
View File
@@ -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 {
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 {
#header-top .region-header-top-left ul ul .is-active {
color: #009ee3; }
#header-top .region-header-top-left :hover ul div:nth-child(2) li div {
display: block;
background-color: white;
padding: 0.2rem; }
#header-top .region-header-top-left :hover ul div:nth-child(2) li div a {
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 {
display: flex;
flex-direction: column;
padding: 1rem; }
#header-top .region-header-top-left ul li a {
color: black; }
#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
+20 -39
View File
@@ -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{
ul ul {
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{
:hover ul{
ul{
display: block;
background-color: $white;
padding: 0.2rem;
.is-active{
color:$blue-light;
}
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;
}
}
}
}
// reseaux sociaux
web/themes/custom/eql/templates/partials/menu.html.twig
-67
View File
@@ -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 %}