Cara Membuat Animasi Toggle Underline

Seperti kita ketahui bahwa animasi sangat populer sekali saat ini, ada berbagai cara untuk membuat sebuah animasi pada sebuah tampilan web, bisa dengan CSS3, dengan jQuery ataupun gabungan dari keduanya. karena dengan keunikan dalam sebuah tampilan membuat animasi banyak sekali dipakai oleh para developer untuk menunjang sebuah tampilan web yang menarik. Nah berikut ini, akan saya kasih referensi untuk kalian yang ingin membuat animasi khusus nya animasi underline, langsung saja simak tutorial cara membuat animasi toggle underline.

untuk membuat animasi underline, langkah pertama adalah membuat struktur HTML5 seperti berikut.

<body>
    <ul id="list-category">
        <li class="item active"><a href="#">Graphyc Design</a></li>
        <li class="item"><a href="#">Conversion-Rate Optimization</a></li>
        <li class="item"><a href="#">Search Engine Optimization</a></li>
        <li class="item"><a href="#">Digital Marketing</a></li>
    </ul>
</body>

Setelah membuat struktur HTML5 seperti diatas, langkah selanjutnya adalah mendesain tampilah list item yang telah kita buat diatas dengan kode CSS3 berikut ini.

body {
    background:#0C1127;
    margin:0;
    padding:40px;
}

#list-category {
    padding:0;
    margin:0;
    max-width:200px
}

#list-category li {
    list-style:none;
    font-family:sans-serif;
    text-transform:uppercase;
    padding:15px 0;
    position:relative;
    margin-bottom:10px;
    opacity:0.3;
    cursor:pointer;
    font-weight:700;
    letter-spacing:2px;
    font-size:13px;
    line-height:1.3em;
    text-align:right;
    transition:all ease 0.2s;
}

#list-category li:hover {
    opacity:0.6;
}

#list-category a {
    text-decoration:none;
    color:#fff;
}

#list-category li a:after {
    content: " ";
    background: #FCA700;
    width: 0%;
    height: 2px;
    position: absolute;
    right: 0;
    bottom: 0;
    transition:all ease 0.4s;
}

#list-category li:hover a:after {
    width:100%;
    width:25%;
}

#list-category li.active {
    opacity:1;
}

#list-category li.active a:after {
    content: " ";
    background: #FCA700;
    width: 100%;
    height: 2px;
    position: absolute;
    right: 0;
    bottom: 0;
}

Langkah terakhir adalah kita akan tambahkan sedikit kode jQuery seperti berikut.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $('.item').click(function() {
      $(this).addClass('active').siblings().removeClass('active');
    });
</script>

Setelah semua kode diketikan, langkah terakhir simpan file kemudian buka pada browser masing-masing dan lihat hasil, maka akan terlihat tampilan seperti berikut.

Cara-Membuat-Animasi-Toggle-Underline

Dan jika kalian arahkan atau kursor disorot pada area list akan terlihat animasi underline bergerak lurus secara otomatis. Baiklah itu tadi tutorial sederhana tentang cara membuat animasi toggle underline, semoga bermanfaat dan selamat mencoba.

10 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat