Fragmento de código HTML para menú hamburguesa

728 LittlleSquirtle

Abrir en el editor Video Publica tu código

Fragmento de código HTML para menú hamburguesa

Recomendado

10 February 2025

Un código de bachir123

14 June 2025

Un código de Metehan

3 February 2026

Puerto de juego HTML5 de Yume Nikki con controles táctiles

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%;
}

Recomendado

Un código de bachir123

Un código de Metehan

Puerto de juego HTML5 de Yume Nikki con controles táctiles

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS