Membuat Hover Menu Menggunakan Transition Delay Part 1

Hallo teman-teman DUmet school, kembali lagi dengan saya di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Hover Menu Menggunakan Transition Delay Part 1 pada css. Dimana transition delay berfungsi untuk menghilangkan atau memunculkan suatu objek dengan waktu delay yang kita tentukan.

Langsung saja untuk Membuat Hover Menu Menggunakan Transition Delay Part 1 pada css kita langsung membuat struktur htmlnya sebagai berikut. Teman-teman bisa salin scriptnya di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title></title>
<body>
    <h1>Membuat Hover Menu Menggunakan Transition Delay Pada CSS</h1>
    <ul class="menu">
    <li><a href="#">Menu 1</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li class="active"><a href="#">Menu 2</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

Jika sudah selesai maka teman-teman bisa langsung membuat style cssnya terlebih dahulu seperti pada script di bawah ini untuk Membuat Hover Menu Menggunakan Transition Delay Part 1. Style css teman-teman bisa letakkan di dalam tag head yang ada di html.

<style type="text/css">
    .menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .menu {
        height: 58px;
    }
    .menu li {
        background:blue;
        min-width: 160px;
    }
    .menu > li {
        display: block;
        float: left;
        position: relative;
    }
    .menu > li:first-child {
        border-radius: 0;
    }
    .menu a {
        color: #fff;
        display: block;
        font-family: 'Lucida Console';
        font-size: 18px;
        line-height: 54px;
        padding: 0 25px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .menu li:hover {
        background-color: lightblue;
    }
    .menu li:hover > a {
        border-radius: 0;
        color: blue;
    }

    /* submenu styles */
    .submenu {
        left: 0;
        max-height: 0;
        position: absolute;
        top: 100%;
        z-index: 0;

        -webkit-perspective: 400px;
        -moz-perspective: 400px;
        -ms-perspective: 400px;
        -o-perspective: 400px;
        perspective: 400px;
    }
    .submenu li {
        opacity: 0;

        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        transform: rotateY(90deg);

        -webkit-transition: opacity .4s, -webkit-transform .5s;
        -moz-transition: opacity .4s, -moz-transform .5s;
        -ms-transition: opacity .4s, -ms-transform .5s;
        -o-transition: opacity .4s, -o-transform .5s;
        transition: opacity .4s, transform .5s;
    }
    .menu .submenu li:hover a {
        border-radius: 0;
        color: blue;
    }
    .menu > li:hover .submenu, .menu > li:focus .submenu {
        max-height: 2000px;
        z-index: 10;
    }
    .menu > li:hover .submenu li, .menu > li:focus .submenu li {
        opacity: 1;

        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
</style>

Jika sudah selesai maka ketika kita arahkan kursor kita ke menu atau kita melakukan hover akan tampilan seperti pada gambar di bawah ini.

Sampai disini dulu pembahasan mengenai cara Membuat Hover Menu Menggunakan Transition Delay Part 1 kita sambung di pembahasan Membuat Hover Menu Menggunakan Transition Delay Part 2 ya teman-teman.