Cara Membuat Menu Panel Swinging

25/08/2017    Risman Hakim    1355    Website

Seperti yang kita ketahui bahwa setiap tampilan website tidak akan terlepas dari yang namanya menu, karena komponen ini sangatlah penting bagi pengguna untuk mencari informasi pada halaman web, maka dari itu tampilan menunya pun akan diperhatikan oleh para desainer web, mulai dari efek-efek dan animasi akan selalu menghiasi panel menu. Banyak kita temukan tampilan menu yang beragam jenisnya mulai dari menu yang standar sampai tampilan menu menyajikan keunikan tersendiri. Nah berikut ini ada satu referensi buat kalian yang ingin tempilan menu terlihat menarik dan tentunya unik untuk disajikan dihalaman web, yakni menu panel swinging.

Ada yang pernah mendengar isitilah swinging ? Jika belum pernah, maka bersyukurlah kalian sudah menemukan dan melihat artikel ini :) , daripada penasaran seperti apa menu panel swinging langsung saja simak Cara Membuat Menu Panel Swinging berikut ini.

Pada kasus ini menu panel swinging akan dibuat dengan hanya menggunakan kode HTML5 dan CSS3, karena mungkin saja ada yng membuat panel swinging dengan kode jQuery atau kode-kode yang lain nya. Pada tahapan nya pertama-tama kita akan membuat struktur panel menu terlebih dahulu dengan kode HTML5 berikut ini.

<div id="container">
    <ul id="menu">
      <li><a href="#">About Me</a>
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas lacinia sem</a></li>
                <li><a href="#">Suspendisse fringilla</a></li>
            </ul>
        </li>
        <li><a href="#">Portfolio</a>
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas dignissim fermentum luctus</a></li>
                <li><a href="#">Suspendisse fringilla</a></li>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas lacinia sem</a></li>
                <li><a href="#">Suspendisse fringilla</a></li>
            </ul>
        </li>
        <li><a href="#">Clients</a>
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas lacinia sem</a></li>
                <li><a href="#">Suspendisse fringilla</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Me</a>
            <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Maecenas dignissim fermentum luctus</a></li>
                <li><a href="#">Suspendisse fringilla</a></li>
            </ul>
        </li>
        <li><a href="#">Support</a></li>
    </ul>
</div>
</body>

silahkan kalian bisa mnyesuaikan isi dari panel menu sesuai kebutuhan, setelah membuat struktur seperti diatas, langkah selanjutnya adalah tahap mendesain panel menu menjadi menu panel swinging dengan kode CSS3 berikut ini.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 30px;
    font-family: "Helvetica Neue", helvetica, arial;
    background: url('https://www.toptal.com/designers/subtlepatterns/patterns/concrete-texture.png');
}

#container {
    position: relative;
    width: 940px;        
}

#container:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

#menu {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 20px;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
    background: #ccc;
}

#menu, #menu ul {
    list-style: none;
}

#menu > li {
    float: left;
    position: relative;
    border-right: 1px solid rgba(0,0,0,.1);
    box-shadow: 1px 0 0 rgba(255,255,255,.25);
    perspective: 1000px;
    
}

#menu > li:first-child {
    border-left: 1px solid rgba(255,255,255,.25);
    box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menu a {
    display: block;
    position: relative;
    z-index: 10;
    padding: 13px 20px 13px 20px;
    text-decoration: none;
    color: rgba(75,75,75,1);
    line-height: 1;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -.05em;
    background: transparent;        
    text-shadow: 0 1px 1px rgba(255,255,255,.9);
    transition: all .25s ease-in-out;

}

#menu > li:hover > a {
    background: #333;
    color: rgba(0,223,252,1);
    text-shadow: none;
}

#menu li ul  {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 200px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: transparent;
    overflow: hidden;
    transform-origin: 50% 0%;
}


#menu li:hover ul {
    
    padding: 15px 0;
    background: #333;
    opacity: 1;
    visibility: visible;
    box-shadow: 1px 1px 7px rgba(0,0,0,.5);
    animation-name: swingdown;
    animation-duration: 1s;
    animation-timing-function: ease;

}

@keyframes swingdown {
    0% {
        opacity: .99999;
        transform: rotateX(90deg);
    }

    30% {            
        transform: rotateX(-20deg) rotateY(5deg);
        animation-timing-function: ease-in-out;
    }

    65% {
        transform: rotateX(20deg) rotateY(-3deg);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: rotateX(0);
        animation-timing-function: ease-in-out;
    }
}

#menu li li a {
    padding-left: 15px;
    font-weight: 400;
    color: #ddd;
    text-shadow: none;
    border-top: dotted 1px transparent;
    border-bottom: dotted 1px transparent;
    transition: all .15s linear;
}

#menu li li a:hover {
    color: rgba(0,223,252,1);
    border-top: dotted 1px rgba(255,255,255,.15);
    border-bottom: dotted 1px rgba(255,255,255,.15);
    background: rgba(0,223,252,.02);
}

Setelah semua kode HTML5 dan CSS3 diketikan, simpan file nya kemudian buka pada browser masing-masing dan lihat hasilnya.

Cara-Membuat-Menu-Panel-Swinging-25-08-2017

Ketika kursor diarahkan pada setiap menu akan terlihat animasi atau efek yang terjadi, bagaimana, sekarang sudah jelas yah untuk menu panel swinging nya ? Cukup sekian tutorial dan referensi mengenai Cara Membuat Menu Panel Swinging, semoga bermanfaat dan selamat mencoba.

Artikel, Web Design, HTML CSS, Inspirasi, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow