Home Pricing About

.hover-menu {
position: relative;
overflow: hidden;
margin: 8px;
min-width: 340px;
max-width: 480px;
max-height: 290px;
width: 100%;
background: #000;
text-align: center;
box-sizing: border-box;
}

.hover-menu * {
box-sizing: border-box;
}

.hover-menu img {
position: relative;
max-width: 100%;
top: 0;
right: 0;
opacity: 1;
transition: 0.3s ease-in-out;
}

.hover-menu div {
position: absolute;
top: 0;
left: -120px;
width: 120px;
height: 100%;
padding: 8px 4px;
background: #000;
transition: 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
}

.hover-menu div a {
display: block;
line-height: 2;
color: #fff;
text-decoration: none;
opacity: 0.8;
padding: 5px 15px;
position: relative;
transition: 0.3s ease-in-out;
}

.hover-menu div a:hover {
text-decoration: underline;
}

.hover-menu:hover img {
opacity: 0.5;
right: -120px;
}

.hover-menu:hover div {
left: 0;
opacity: 1;
}

Un fix pour le problème des ancres quand on a un menu fixe en haut de la page : l’élément ancré se retrouve bien en haut de la page, mais il est invisible parce qu’il est caché par le menu fixe.

Cette astuce résout le problème de manière invisible (pas de marge visible).

Il s’agit d’appliquer un ::before sur le :target. La hauteur du ::before est égale (ou supérieure) à la hauteur du menu, et on lui met aussi un margin-top négatif égal à sa hauteur.

De cette façon, l’ancre s’applique sur le ::before, c’est donc lui qui est caché par le menu et le vrai élément ciblé (celui qu’on veut voir) est visible.

C’est très astucieux.

(merci à Aeris pour avoir déniché l’astuce !)

Via Timo.

This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.

Un menu adaptatif sans jquery, en javascript (~1Kb) et css3.