Skip to content

Instantly share code, notes, and snippets.

@annelyse

annelyse/header

Created June 14, 2023 13:26
Show Gist options
  • Save annelyse/c97a6e95992b3c58f57a65bfcc1092b6 to your computer and use it in GitHub Desktop.
Save annelyse/c97a6e95992b3c58f57a65bfcc1092b6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
header
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- <div class="top-bar top-bar--warning">
<div class="close-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" fill="none">
<path fill="#000" d="M15.275 1.69 9.465 7.5l5.81 5.81-1.465 1.465L8 8.965l-5.81 5.81L.724 13.31l5.81-5.81-5.81-5.81L2.189.224 8 6.035l5.81-5.81 1.465 1.464Z" />
</svg>
</div>
<p>Ceci est un message d’alerte, ceci est un message d’alerte, ceci est un message d’alerte Sur une ou plusieurs lignes, il permet au besoin de renvoyer sur une page, en savoir plus</p>
</div> -->
<div class="wrapper-sticky-header">
<header class="main-header ">
<div class="navOverlay"></div>
<div class="container wrapper-header">
<a class="logo" href="<?= esc_url(get_home_url()) ?>" title="accueil">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 205 77" fill="none">
<path fill="currentcolor" d="M62.2 3.4H51.42v3.22h3.78V23h3.22V6.62h3.78V3.4ZM67.381 23v-8.344h4.76V23h3.22V3.4h-3.22v8.036h-4.76V3.4h-3.22V23h3.22Zm17.55-20.44L86.694.712h-3.36L82.187 2.56h2.743Zm3.444 4.06V3.4h-9.94V23h9.94v-3.22h-6.72v-5.152h6.16v-3.192h-6.16V6.62h6.72Zm7.453-4.06.84-.952.784.952h2.604L98.432.628h-3.528l-1.68 1.932h2.604ZM93 23l1.064-4.48h5.124L100.28 23h3.22L98.6 3.4h-3.92L89.78 23H93Zm1.848-7.7 1.792-7.336 1.764 7.336h-3.556Zm18.731-11.9h-10.78v3.22h3.78V23h3.22V6.62h3.78V3.4ZM118.76 23v-7.532h2.072c1.344 0 2.408 1.148 2.408 2.492V23h3.22v-5.068c0-1.512-.504-3.052-1.764-3.976 1.316-.896 2.044-2.52 2.044-4.2v-.672c0-3.136-2.548-5.684-5.712-5.684h-5.488V23h3.22Zm2.268-10.752h-2.268V6.62h2.268a2.498 2.498 0 0 1 2.492 2.492v.644a2.498 2.498 0 0 1-2.492 2.492Zm18.315-5.628V3.4h-9.94V23h9.94v-3.22h-6.72v-5.152h6.16v-3.192h-6.16V6.62h6.72ZM62.2 29.4H51.42v3.22h3.78V49h3.22V32.62h3.78V29.4ZM67.381 49v-8.344h4.76V49h3.22V29.4h-3.22v8.036h-4.76V29.4h-3.22V49h3.22Zm17.55-20.44 1.764-1.848h-3.36l-1.148 1.848h2.743Zm3.444 4.06V29.4h-9.94V49h9.94v-3.22h-6.72v-5.152h6.16v-3.192h-6.16V32.62h6.72Zm8.097 16.66c3.164 0 5.712-2.436 5.712-5.852v-8.484c0-3.416-2.548-5.824-5.712-5.824-3.164 0-5.712 2.408-5.712 5.824v8.484c0 3.416 2.548 5.852 5.712 5.852Zm0-3.22c-1.372 0-2.492-.98-2.492-2.632v-8.456c0-1.652 1.12-2.632 2.492-2.632 1.372 0 2.492.98 2.492 2.632v8.456c0 1.652-1.12 2.632-2.492 2.632ZM112.414 49l1.064-4.48h5.124l1.092 4.48h3.22l-4.9-19.6h-3.92l-4.9 19.6h3.22Zm1.848-7.7 1.792-7.336 1.764 7.336h-3.556Zm13.686 7.7v-7.532h2.072c1.344 0 2.408 1.148 2.408 2.492V49h3.22v-5.068c0-1.512-.504-3.052-1.764-3.976 1.316-.896 2.044-2.52 2.044-4.2v-.672c0-3.136-2.548-5.684-5.712-5.684h-5.488V49h3.22Zm2.268-10.752h-2.268V32.62h2.268a2.498 2.498 0 0 1 2.492 2.492v.644a2.498 2.498 0 0 1-2.492 2.492ZM144.023 42h2.492v1.428c0 1.652-1.12 2.632-2.492 2.632-1.372 0-2.492-.98-2.492-2.632v-8.456c0-1.652 1.12-2.632 2.492-2.632 1.372 0 2.492.98 2.492 2.632v1.988h3.22v-2.016c0-3.416-2.548-5.824-5.712-5.824-3.164 0-5.712 2.408-5.712 5.824v8.484c0 3.416 2.436 5.852 5.46 5.852 2.24 0 3.416-1.512 3.416-1.512l.476 1.232h2.072V38.808h-5.712V42Zm18.453-9.38V29.4h-9.94V49h9.94v-3.22h-6.72v-5.152h6.16v-3.192h-6.16V32.62h6.72ZM177.602 49V29.4h-3.22v12.88l-5.6-12.88h-3.64V49h3.22V36.148l5.6 12.852h3.64Zm10.995-12.04h3.22v-2.016c0-3.416-2.548-5.824-5.712-5.824-3.164 0-5.712 2.408-5.712 5.824v8.484c0 3.416 2.548 5.852 5.712 5.852 3.164 0 5.712-2.436 5.712-5.852V41.16h-3.22v2.268c0 1.652-1.12 2.632-2.492 2.632-1.372 0-2.492-.98-2.492-2.632v-8.456c0-1.652 1.12-2.632 2.492-2.632 1.372 0 2.492.98 2.492 2.632v1.988Zm15.961-4.34V29.4h-9.94V49h9.94v-3.22h-6.72v-5.152h6.16v-3.192h-6.16V32.62h6.72ZM63.404 69.568c0-2.52-1.792-4.48-3.808-5.432l-2.716-1.288c-.84-.392-1.568-1.148-1.568-2.268 0-1.428 1.008-2.24 2.38-2.24 1.372 0 2.492.98 2.492 2.632v.868h3.22v-.896c0-3.416-2.548-5.824-5.712-5.824-3.164 0-5.6 2.268-5.6 5.572 0 2.52 1.764 4.396 3.724 5.32l2.716 1.288c.812.392 1.652 1.232 1.652 2.352 0 1.512-1.12 2.408-2.492 2.408-1.372 0-2.492-.98-2.492-2.632V68.28h-3.22v1.148c0 3.416 2.548 5.852 5.712 5.852 3.164 0 5.712-2.296 5.712-5.712ZM67.871 75l1.064-4.48h5.124L75.151 75h3.22l-4.9-19.6h-3.92l-4.9 19.6h3.22Zm1.848-7.7 1.792-7.336 1.764 7.336H69.72ZM83.405 75V55.4h-3.22V75h3.22Zm15.529 0V55.4h-3.22v12.88l-5.6-12.88h-3.64V75h3.22V62.148L95.294 75h3.64Zm12.731-19.6h-10.78v3.22h3.78V75h3.22V58.62h3.78V55.4Zm8.882 10.416h-8.596v2.94h8.596v-2.94ZM126.58 75v-6.972h2.268a5.718 5.718 0 0 0 5.712-5.712v-1.232c0-3.136-2.548-5.684-5.712-5.684h-5.488V75h3.22Zm0-16.38h2.268a2.498 2.498 0 0 1 2.492 2.492v1.204a2.498 2.498 0 0 1-2.492 2.492h-2.268V58.62ZM140.033 75v-7.532h2.072c1.344 0 2.408 1.148 2.408 2.492V75h3.22v-5.068c0-1.512-.504-3.052-1.764-3.976 1.316-.896 2.044-2.52 2.044-4.2v-.672c0-3.136-2.548-5.684-5.712-5.684h-5.488V75h3.22Zm2.268-10.752h-2.268V58.62h2.268a2.498 2.498 0 0 1 2.492 2.492v.644a2.498 2.498 0 0 1-2.492 2.492ZM153.897 75V55.4h-3.22V75h3.22Zm13.009-16.38V55.4h-9.94V75h9.94v-3.22h-6.72v-5.152h6.16v-3.192h-6.16V58.62h6.72Zm13.529 10.948c0-2.52-1.792-4.48-3.808-5.432l-2.716-1.288c-.84-.392-1.568-1.148-1.568-2.268 0-1.428 1.008-2.24 2.38-2.24 1.372 0 2.492.98 2.492 2.632v.868h3.22v-.896c0-3.416-2.548-5.824-5.712-5.824-3.164 0-5.6 2.268-5.6 5.572 0 2.52 1.764 4.396 3.724 5.32l2.716 1.288c.812.392 1.652 1.232 1.652 2.352 0 1.512-1.12 2.408-2.492 2.408-1.372 0-2.492-.98-2.492-2.632V68.28h-3.22v1.148c0 3.416 2.548 5.852 5.712 5.852 3.164 0 5.712-2.296 5.712-5.712ZM192.602 55.4h-10.78v3.22h3.78V75h3.22V58.62h3.78V55.4Z" />
<path fill="#020203" d="m15.775 68.164 2.968-11.863h2.372l2.968 11.863h-1.947l-.662-2.71h-3.102l-.645 2.71h-1.952Zm5.222-4.662-1.07-4.441-1.086 4.441h2.156ZM38 72.9H2.41v1.955H38V72.9ZM38 49.61H2.41v1.955H38V49.61ZM38 26.32H2.41v1.955H38V26.32ZM38 3.03H2.41v1.956H38V3.03ZM23.19 11.668h-2.287v9.916h-1.95V11.67h-2.287V9.72h6.524v1.947ZM23.19 34.954h-2.287v9.916h-1.95v-9.916h-2.287v-1.947h6.524v1.947Z" />
</svg>
</a>
<div class="menu-mobile">
<nav>
<?php
wp_nav_menu(
array(
'theme_location' => 'main-menu',
'container' => 'ul', // prevent to have extra div container
'depth' => 2
)
);
?>
</nav>
<?php require('inc/socials/socials.php'); ?>
</div>
<!-- To do : lien à mettre -->
<a class="btn-round" href="" target="_blank">Billetterie</a>
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</header>
</div>
<main>
Raw
header-css
header {
position: relative;
padding-top: rem-calc(17px);
margin-left: auto;
margin-right: auto;
z-index: 1;
color: #000;
&.submenu-open {
color: #fff;
}
.wrapper-header {
display: flex;
align-items: center;
gap: rem-calc(40px);
margin: 0;
width: 100%;
@include media-breakpoint-up(md) {
margin-left: auto;
margin-right: auto;
}
}
//logo
.logo {
width: rem-calc(161px);
height: rem-calc(59px);
color: currentColor;
margin-right: auto;
svg {
width: 100%;
height: auto;
}
}
// menu burger mobile
.hamburger {
position: relative;
z-index: 200;
@include media-breakpoint-up(md) {
display: none;
}
}
a {
text-decoration: none;
}
.menu-mobile {
flex-grow: 1;
display: flex;
align-items: center;
gap: rem-calc(40px);
justify-content: center;
//sur mobile
@include media-breakpoint-down(md) {
background: #fff;
padding: rem-calc(16px);
position: fixed;
right: 0;
top: 0;
width: 100%;
transform: translate(100%);
flex-direction: column;
z-index: 100;
gap: rem-calc(11px);
padding-top: rem-calc(117px);
justify-content: space-between;
align-items: flex-start;
height: 100vh;
}
}
.navOverlay {
height: 0; // height apply in js
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
pointer-events: none;
//add
transition: all ease 600ms;
background: #000;
height: 0;
}
nav {
display: flex;
align-items: center;
margin-left: auto;
@include media-breakpoint-down(md) {
margin-left: 0;
width: 100%;
}
ul,
li {
list-style: none;
padding: 0px;
}
.menu {
display: flex;
flex-direction: column;
align-items: flex-start;
@include media-breakpoint-up(md) {
gap: rem-calc(42px);
flex-direction: row;
margin: 0;
align-items: flex-end;
}
// ----------------------------------------------------------------
// first level item
// ----------------------------------------------------------------
>li {
display: inline-block;
// position: relative;
// don't active relative
font-weight: 500;
font-size: rem-calc(14px);
letter-spacing: rem-calc(0.2px);
@include media-breakpoint-down(md) {
font-weight: 700;
display: flex;
flex-direction: column;
align-items: flex-start;
}
// indicator submenu
&.menu-item-has-children {
>a {
align-items: center;
gap: rem-calc(7px);
&:before {
content: "";
order: 2;
display: inline-block;
height: rem-calc(10px);
width: rem-calc(10px);
color: currentColor;
// background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="5" fill="none"><path fill="currentColor" d="m7.371.361.879.88L4.5 4.99.75 1.24l.879-.88L4.5 3.232 7.371.362Z"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-color: currentColor;
-webkit-mask: url(./../img/arrow-black.svg) no-repeat center;
mask: url(./../img/arrow-black.svg) no-repeat center;
}
}
}
>a {
text-decoration: none;
padding: rem-calc(7px) 0;
position: relative;
display: flex;
color: currentColor;
@include media-breakpoint-down(md) {
padding: rem-calc(11px) 0;
}
&:hover,
&.active {
&:after {
max-width: 100%;
}
}
// decoration border bottom on hover or active
&:after {
content: '';
width: 100%;
max-width: 0;
height: rem-calc(2px);
background: currentColor;
position: absolute;
bottom: 0;
left: 0;
transition: all ease 500ms;
}
}
}
// ----------------------------------------------------------------
// second level - sub menu
// ----------------------------------------------------------------
.sub-menu {
overflow: hidden;
transition: all ease 600ms;
margin-left: rem-calc(30px);
&.is-active {
max-height: 100%;
margin: rem-calc(13px) rem-calc(30px);
}
@include media-breakpoint-up(md) {
display: none;
position: absolute;
left: 0;
margin: 0;
width: 100%;
height: auto;
// opacity: 0;
padding: rem-calc(62px) 0 rem-calc(65px) 0;
}
>li {
display: block;
@include media-breakpoint-up(md) {
opacity: 0;
}
a {
padding: 0;
color: currentColor;
display: inline-block;
transition: opacity ease 300ms;
font-weight: 400;
@include media-breakpoint-up(md) {
font-weight: 700;
font-size: rem-calc(24px);
margin: rem-calc(10px) 0;
}
&:hover {
opacity: 0.7;
}
}
}
}
}
}
}
// social media
.socials {
list-style: none;
padding: 0;
align-items: center;
display: flex;
gap: rem-calc(15px);
li {
a {
display: block;
color: currentColor;
transition: all ease 500ms;
margin: 0;
&:hover {
opacity: 0.6;
}
img,
svg {
height: rem-calc(18px);
width: rem-calc(18px);
}
}
}
}
Raw
menu
import { gsap, Expo } from "gsap";
import calculHeightHeader from "./calculHeightHeader";
const submenuToggle = () => {
const header = document.querySelector(".main-header");
const menuWrapper = document.querySelector(".menu-mobile");
const items = menuWrapper.querySelectorAll(".menu > li ");
const socials = menuWrapper.querySelectorAll(".socials > li ");
const triggerElements = menuWrapper.querySelectorAll(".menu-item-has-children");
// ----------------------------------------------------------------
// on mobile
// ----------------------------------------------------------------
let breakPointToggleMenu = window.matchMedia("(max-width: 1024px)");
if (breakPointToggleMenu.matches) {
// toggleMenuMobile();
const hamburger = document.querySelector(".hamburger");
let timelineMenuMobile = gsap.timeline({
pause: true,
reversed: true,
ease: Expo.easeInOut,
});
gsap.set(menuWrapper, { x: "-100%" });
gsap.set(items, { x: "-100%", opacity: 0 });
timelineMenuMobile.to(menuWrapper, { translateX: 0, overwrite: true });
timelineMenuMobile.fromTo(
[socials],
{ x: "-100%", opacity: 0 },
{ x: 0, opacity: 1, stagger: 0.2 },
0.1
);
timelineMenuMobile.fromTo(
[items],
{ x: "-100%", opacity: 0 },
{ x: 0, opacity: 1, stagger: 0.2 },
0.1
);
//---------------------------//
// EFFET sur bouton burger pour ouvrir et fermer le menu
//---------------------------//
// menu burger click
hamburger.addEventListener("click", function () {
hamburger.classList.toggle("is-active");
header.classList.toggle("is-active");
timelineMenuMobile.reversed()
? timelineMenuMobile.play()
: timelineMenuMobile.reverse();
});
const linksParent = menuWrapper.querySelectorAll(
".menu-item-has-children > a"
);
linksParent.forEach((el) => {
// submenu
let timelineSubMenuMobile = gsap.timeline({
pause: true,
reversed: true,
ease: Expo.easeInOut,
});
const subMenuEl = el.parentNode.querySelector(".sub-menu");
if (subMenuEl) {
subMenuEl.setAttribute(
"data-height",
subMenuEl.offsetHeight
);
subMenuEl.style.height = 0;
}
// el.preventDefault();
el.addEventListener("click", function (e) {
e.preventDefault();
const currentSubMenu =
e.target.parentNode.querySelector(".sub-menu");
currentSubMenu.classList.toggle("is-active");
if (currentSubMenu.classList.contains("is-active")) {
currentSubMenu.style.height = currentSubMenu.getAttribute("data-height") + "px";
} else {
currentSubMenu.style.height = 0;
}
});
});
} else {
// on desktop
const navOverlay = document.querySelector(".navOverlay");
const nav = header.querySelector("nav");
const navPositionLeft = nav.offsetLeft;
let headerHeight = calculHeightHeader();
// when we are outside the menu
menuWrapper.addEventListener("mouseleave", (e) => {
// console.log("leave menu completely");
navOverlay.style.height = 0 + "px";
header.classList.remove("submenu-open");
});
menuWrapper.querySelectorAll(".menu > li.menu-item").forEach((el) => {
el.addEventListener("mouseenter", (e) => {
if (
e.target.classList.contains("menu-item-has-children") === false
) {
// console.log("menu doesn't have children");
navOverlay.style.height = 0 + "px";
header.classList.remove("submenu-open");
}
});
});
triggerElements.forEach((toggler) => {
// ----------------------
// place menu items correctlty
//------------------------------
// sub menu and its children
let subMenu = toggler.querySelector(".sub-menu");
// pass to block, before taking height
// position the submenu
subMenu.style.left = navPositionLeft + "px";
subMenu.style.paddingTop = headerHeight[0] + "px";
// -----------------------------------------
toggler.addEventListener("mouseenter", (e) => {
let currentSubMenu = toggler.querySelector(".sub-menu");
console.log("enter");
currentSubMenu.style.display = "block";
let subMenuHeight = currentSubMenu.offsetHeight;
let navOverlayHeight = subMenuHeight + headerHeight[0];
let subMenuItem = toggler
.querySelector(".sub-menu")
.querySelectorAll("li");
//-------------timeline sub menu -------------
let tlItems = gsap.timeline({ paused: true });
header.classList.add("submenu-open");
tlItems.to([currentSubMenu, subMenuItem], {
autoAlpha: 1,
stagger: 0.2,
duration: 0.5,
});
//-------------end-------------
navOverlay.style.height = navOverlayHeight + "px";
tlItems.play();
});
//-------------HIDE SUBMENU WHEN LEAVING MENU ITEM -------------
toggler.addEventListener("mouseleave", (e) => {
console.log("leave");
let currentSubMenu = toggler.querySelector(".sub-menu");
let subMenuItem = toggler
.querySelector(".sub-menu")
.querySelectorAll("li");
let tlItems = gsap.timeline({ paused: true });
tlItems
.to(subMenuItem, {
autoAlpha: 0,
stagger: 0.1,
duration: 0.5,
})
.add(function () {
currentSubMenu.style.display = "none";
});
tlItems.play();
});
});
}
};
export default submenuToggle;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment