HTML बर्गर मेनू कोड स्निपेट

535 LittlleSquirtle

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

16 September 2025

TikTok सिक्का प्रेषक फ़ॉर्म HTML टेम्पलेट

21 January 2024

3डी सोशल आइकन कोड

5 May 2025

रोबक्स टैक्स कैलकुलेटर HTML 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%;
}

अनुशंसित

TikTok सिक्का प्रेषक फ़ॉर्म HTML टेम्पलेट

3डी सोशल आइकन कोड

रोबक्स टैक्स कैलकुलेटर HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS