Cara Membuat Animasi Toggle Underline

10/09/2017    Risman Hakim    914     Website

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.

Artikel, Web Design, HTML CSS, 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