<aside class="block-quicklink">
<h4>Accès rapide</h4>
<nav class="nav-quicklink">
<ul>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="#">
<span>Link</span>
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-submenu">
<a href="#">
Sublink
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">
<span>Link</span>
</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="#">
<span>Link</span>
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<aside class="block-quicklink">
<h4>Accès rapide</h4>
<nav class="nav-quicklink">
<ul>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="#">
<span>Link</span>
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-submenu">
<a href="#">
Sublink
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">
<span>Link</span>
</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="#">
<span>Link</span>
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
/* No context defined for this component. */
.block-quicklink {
max-width: 400px;
.nav-quicklink {
& > ul {
& > li.menu-item--opened {
border-bottom: 1px solid #EBE8DB;
margin-bottom: 5px;
}
& > li.current_page_item > a,
& > li.current-menu-item > a { background: $c-brand-gold-light }
& > li, .menu-item-has-children {
& > a {
display: flex!important;
justify-content: space-between;
align-items: center;
font-weight: 700;
color: $c-font-color;
text-decoration: none;
padding: 5px;
border-radius: 8px;
@include transition;
i { transition: .3s ease }
&:hover {
padding-left: $margin-s
}
&.opened{
i{
transform: rotate(180deg);
}
}
}
& > ul > li > a {
font-weight: 400;
margin-bottom: 0;
padding: .25rem 1rem!important;
margin-right: -1rem;
&:hover { padding: .25rem 1rem; }
}
& > ul {
padding-left: 0;
&[aria-hidden="true"] {
display: none;
}
@include mediaWQuery($media-query-l) {
max-height: 220px;
overflow-y: auto;
overflow-x: hidden;
}
margin-bottom: $margin-s;
& > li {
& > ul {
margin-left: 1rem!important;
> li > a { font-size: rem(16) }
}
&.current_page_item a,
&.current-menu-item a { background: $c-brand-gold-light }
& > a {
display: block;
padding: $margin-xs $margin-m;
border-radius: $border-radius-s;
color: $c-font-color;
text-decoration: none;
@include transition;
&:hover, &:focus {
background: $c-brand-gold-light;
}
@include mediaWQuery($media-query-l) {
padding: $margin-s $margin-l;
}
}
}
}
}
}
}
}
@include mediaWQuery($media-query-l) {
.container--quicklink-right .block-quicklink {
border-left: 1px solid $c-gray-30;
@include mediaWQuery($media-query-l) {
padding-left: $margin-l;
}
}
.container--quicklink-left .block-quicklink {
border-right: 1px solid $c-gray-30;
@include mediaWQuery($media-query-l) {
padding-right: $margin-l;
}
}
}
document.addEventListener('DOMContentLoaded', LetsGo => {
const navQuickLink = document.querySelector('.block-quicklink');
if(navQuickLink) {
const navItems = navQuickLink.querySelectorAll('.nav-quicklink ul > li.menu-item-has-children');
[].slice.call(navItems).forEach(navItem => {
let quickLink = navItem.querySelector('a');
let currentDropdown = navItem.querySelector('ul');
quickLink.onclick = event => {
event.preventDefault();
if(currentDropdown.getAttribute("aria-hidden") == 'false') {
currentDropdown.setAttribute('aria-hidden', 'true');
quickLink.classList.remove('opened');
navItem.classList.remove('menu-item--opened');
} else {
let activeDropdown = navQuickLink.querySelectorAll('ul[aria-hidden="false"]');
let activeMenu = navQuickLink.querySelectorAll('li.menu-item--opened');
if(activeDropdown && activeMenu && !navItem.classList.contains('menu-submenu')) {
activeMenu.forEach(nav => nav.classList.remove('menu-item--opened'));
activeDropdown.forEach(activeDrop => {
activeDrop.setAttribute('aria-hidden', 'true');
activeDrop.previousElementSibling.classList.remove('opened')
})
}
quickLink.classList.toggle('opened');
navItem.classList.toggle('menu-item--opened');
currentDropdown.setAttribute('aria-hidden', 'false');
}
}
})
}
})
There are no notes for this item.