Frammento di codice del menu HTML per hamburger

726 LittlleSquirtle

Apri nell'Editor Video Pubblica il Tuo Codice

Frammento di codice del menu HTML per hamburger

Consigliato

10 January 2026

Modello HTML del pannello di amministrazione dei visitatori

19 January 2026

Codice sorgente HTML del gioco Little Alchemy 2

16 May 2025

Un codice di Maxi-Digital

HTML

CSS

*, ::before, ::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu_burger input{
    display: none;
}

.burger{
    position: relative;
    display: flex;
    /* justify-content: space-between;
    flex-direction: column; */
    width: 100px;
    height: 70px;
    cursor: pointer;
}

.burger span{
    position: absolute;
    display: block;
    width: 100%;
    height: 4px;
    background-color: black;
    transition: all 0.4s ease;
}

.burger span:nth-child(1){
    top: 0;
}

.burger span:nth-child(2){
    top: 50%;
    transform: translateY(-50%);
}

.burger span:nth-child(3){
    bottom: 0;
}

/* tranformer en croix */
.menu_burger input:checked + .burger span:nth-child(1){
    transform: rotate(45deg);
    top: 50%;
}

.menu_burger input:checked + .burger span:nth-child(2){
    opacity: 0;
}

.menu_burger input:checked + .burger span:nth-child(3){
    transform: rotate(-45deg);
    top: 50%;
}

Consigliato

Modello HTML del pannello di amministrazione dei visitatori

Codice sorgente HTML del gioco Little Alchemy 2

Un codice di Maxi-Digital

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS