Membuat menu flip dengan css

Masih seputar html dan css, kali ini kita akan membuat menu flip dengan css, plus bonus 3D text, yang sudah Saya include di dalam script css-nya.

Script ini lumayan panjang, sehingga asik untuk di jadikan bahan latihan dasar html dan css yang sudah Anda pelajari sebelumnya.

Langsung saja kita lihat script di bawah

<!DOCTYPE html">
<html>
<head>
    <meta charset="utf-8">
    <title>Membuat menu flip dengan css</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

<!-- begin menu CSS code -->

<style>
body {
    background: #dde;
    font-family: arial;
}
@-keyframes bugfix { 
    from {padding:0;} to {padding:0;} 
}
div.nav{
    position: relative;
    perspective: 1000px;
}
div.nav input{
    display: none;
}
div.nav label.mainlabel, div.nav div.menuflip{
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: all .3s ease-in-out;
}
div.nav label.mainlabel{
    width: 70px;
    background: #f5f5f5;
    font: bold 20px Tahoma;
    color: green;
    position: relative;
    top: 0;
    display: block;
    padding: 5px;
    padding-left: 34px;
    border: 2px solid blue;
    box-shadow: inset 0 0 2px gray, 0 0 3px #555;
    border-radius: 8px;
}
div.nav label.mainlabel:hover{
    color: red;
    cursor: pointer;
}
div.nav label.mainlabel:before{
    content: '';
    position: absolute;
    left: 7;
    top: 7;
    width: 12px;
    height: 12px;
    border:4px solid green;
    box-shadow: inset 0 0 2px gray, 0 0 3px #555;
    border-radius: 30px;
}
div.nav div.menuflip{
    position: absolute;
    margin: 0;
    top: 0;
    padding: 4px;
    background: white;
    transform: rotateY(180deg);
    width: 200px;
    border: 1px solid #555;
    box-shadow: 2px 2px 15px #B5B5B5;
    border-radius: 10px;
    background: #eee;
}
div.nav div.menuflip h4{
    margin: 0;
    margin-bottom: 4px;
    font-size: 20px;
    padding: 4px 0 0 6px;
}
div.nav div.menuflip ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
div.nav div.menuflip ul li{
    border-bottom: 1px inset #555;
}
div.nav div.menuflip ul li:last-of-type{
    border-bottom: none;
}
div.nav div.menuflip ul li:hover{
    border-bottom-color: transparent;
}
div.nav div.menuflip ul li a{
    display: block;
    color: blue;
    text-decoration: none;
    padding: 6px;
    border-radius: 10px 0 10px;
    transition: none;
}
div.nav div.menuflip ul li a:hover{
    background: #515151;
    color: white;
}
div.nav div.menuflip label.close{
    position: absolute;
    right: 5px;
    top: 8px;
    padding-top: 3px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
    color: white;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50px;
    box-shadow: 0 0 5px #555;
    width: 22px;
    height: 20px;
    background: green;
    font-size: 18px;
}
div.nav div.menuflip label.close:hover{
    background: red;
}
div.nav input:checked ~ label.mainlabel{
    transform: rotateY(180deg);
}
div.nav input:checked ~ div.menuflip{
    transform: rotateY(0);
}
.main{
    position: fixed;
    top: 15%;
    left: 0;
    width: 100%;
    border: none;
    text-align: center;
    font-family: Tahoma, sans-serif;
    line-height: 1em;
    color: #fff9d6;
    font-weight: bold;
    font-size: 250%;
    text-shadow: 0px 0px 0 rgb(219,219,219),1px 1px 0 rgb(201,201,201),2px 2px 0 rgb(183,183,183), 3px 3px 0 rgb(165,165,165),4px 4px 3px rgba(0,0,0,0.35),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
    z-index: -1;
}
</style>

<!-- end of CSS code -->

</head>
    <body>

<!-- this content between tag <body>...</body> will be show on browser -->	
<!-- begin menu HTML code -->

        <div class="nav">
            <input type="checkbox" id="togglebox" />
                <label for="togglebox" class="mainlabel">MENU</label>
                    <div class="menuflip" id="menuflip_ie">
                    <h4>NAVIGASI</h4>
                    <ul>
                        <li> <a href="https://my-id.site">» Homepage</a></li>
                        <li> <a href="https://my-id.site/tag/free-script/">» Free script</a></li>
                        <li> <a href="https://my-id.site/html/">» Tutorial html</a></li>
                        <li> <a href="https://my-id.site/html/">» Tutorial css</a></li>
                        <li> <a href="https://my-id.site/download/">» Download</a></li>
                        <li> <a href="https://my-id.site/editor/">» Online editor</a></li>
                    </ul>
                    <label for="togglebox" class="close">x</label>
                    </div>
        </div>
		
        <div class="main">
            Membuat menu flip dengan css
        </div>

<!-- End of body content -->

    </body>
</html>

Script panjang diatas menghasilkan sebuah menu flip beserta dengan text 3D yang cantik, penasaran dengan hasilnya ?

Silahkan buka Realtime HTML Editor ↗ untuk melihat dan mengedit hasil script diatas.

Sampai disini sedikit pembahasan tentang Membuat menu flip dengan css, selamat belajar, dan semoga sukses buat Anda semua.

Mungkin Anda Menyukai