Hamburgera izvēlne – WEB programmēšana

<body>
    <section id="header">
        <div class="hamburger">
            <div class="bar"></div>
        </div>
    </section>
</body>

Hamburgera izvēlnes trīs līnijas veido .bar klases elements kopā ar diviem pseido elementiem. Pseido elements nav īsts elements, tos galvenokārt izmanto dažādiem stila trikiem.

Elementiem uzstāda position: relative, bet pseido elementiem uzstāda position: absolute. Tādējādi pseido elementus var novietot attiecībā pret tā elementu ar top, bottom, left, right īpašībām.

<div class=“bar”></div> elements tiek izveidots jau HTML kodā, bet tā pseido elementi tiek radīti CSS:

.hamburger .bar::after,
.hamburger .bar::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    background-color: white;
    transition: 0.3s ease;
    transition-property: top, bottom;
}
.hamburger .bar::after {
    top: 8px; /* no vecāka elementa augšas 8px uz leju */
}
.hamburger .bar::before {
    bottom: 8px; /* no vecāka elementa lejas 8px uz augšu */
}

Pulsējošais efekts panākts, izmantojot .hamburger pseido elementu:

#header .hamburger::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 3px solid white;
    animation: hamburger_pulse 1s ease infinite;
}

hamburger_pulse animācija tiek definēta šādi, izmantojot @keyframes:

@keyframes hamburger_pulse {
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

hamburger.html kods:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #header {
            color: white;
            height:120px;
            width: 100%;
            background-color: #29323c;
            position: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /***** Hamburgera aplis *****/
        #header .hamburger {
            height: 50px;
            width: 50px;
            display: inline-block;
            border: 3px solid white;
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        #header .hamburger::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 3px solid white;
            animation: hamburger_pulse 1s ease infinite;
            /* Hamburger pseido elements - aplis, veido pulsējošo animāciju */
        }
        /***** Beidzas Hamburgera aplis *****/

        /***** 3 līnijas iekšā aplī *****/
        .hamburger .bar {
            height: 2px;
            width: 28px;
            background-color: white;
            position: relative;
        }
        .hamburger .bar::after,
        .hamburger .bar::before {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            background-color: white;
            transition: 0.3s ease;
            transition-property: top, bottom;
        }
        .hamburger .bar::after {
            top: 8px; /* no vecāka elementa augšas 8px uz leju */
        }
        .hamburger .bar::before {
            bottom: 8px; /* no vecāka elementa lejas 8px uz augšu */
        }
        /***** Beidzas 3 līnijas iekšā aplī *****/

        /***** Animācijas *****/
        @keyframes hamburger_pulse {
            100% {
                opacity: 0;
                transform: scale(1.4);
            }
        }
        /***** Beidzas Animācijas *****/
    </style>
</head>
<body>
    <section id="header">
        <div class="hamburger">
            <div class="bar"></div>
        </div>
    </section>
</body>
</html>