Frammento di codice del menu HTML per hamburger

529 LittlleSquirtle

Apri nell'Editor Pubblica il Tuo Codice

Frammento di codice del menu HTML per hamburger

Consigliato

24 June 2025

Un codice di Mete

7 August 2025

Esempio di piè di pagina e intestazione HTML

10 July 2025

Esempio HTML della schermata di caricamento animata CSS

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

Un codice di Mete

Esempio di piè di pagina e intestazione HTML

Esempio HTML della schermata di caricamento animata CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS