Fragmento de código HTML para menú hamburguesa

31 LittlleSquirtle

Abrir en el editor Publica tu código

Fragmento de código HTML para menú hamburguesa

Recomendado

25 June 2025

Un código de Mete

12 October 2025

Estructura HTML de la animación de carga CSS

29 June 2024

Plantilla de formulario de inicio de sesión de materiales

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 Mete

Estructura HTML de la animación de carga CSS

Plantilla de formulario de inicio de sesión de materiales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS