Halo teman-teman semua ? apa kabarnya ? pada kesempatan kali ini saya akan share salah satu efek menu hover yang dibuat dari CSS3. Sebelum kita coba untuk membuatnya, saya informasikan kalau efek dari CSS3 ini hanya berjalan pada browser tertentu saja seperti IE10 dan semua versi mozilla dan chrome yang baru. Kecuali safari, pada safari terdapat masalah pada animasi pseudo element.

Sekarang langsung kita buat ya :

Kita ketikkan tag HTML untuk membuat menunya seperti berikut :

<ul class=”sonarmenu”>

<li><a href=””>Home</a></li>

<li><a href=””>Article</a></li>

<li><a href=””>Profile</a></li>

<li><a href=””>Forums</a></li>

<li><a href=””>Contact</a></li>

</ul>

Setelah menunya kita ketikkan semua, kita langsung coba membuat CSSnya. Pertama kita hilangkan dahulu bullets yang ada di menu. Berikut CSSnya :

ul.sonarmenu {

             list-style: none;

             background:#ccc;

}

Selanjutnya kita buat menu tersebut sejajar dengan menggunakan css berikut :

ul.sonarmenu li{

display: inline;

}

Kemudian kita rapihkan menunya.

                                ul.sonarmenu a{

                position: relative;

                display: inline-block;

                color: #736E6E; /* font color */

                text-decoration: none;

                margin: 10px 20px;

                text-transform: uppercase;

                font-size: 18px; /* font size */

                letter-spacing: 1px; /* letter spacing */

                border-bottom: 2px solid transparent; /* Bottom border style */

}

 

Lalu disini kita mulai membuat efek hover dari menu tersebut. Pertama kita membuat efek hover dengan garis dibawah menu.

ul.sonarmenu a:hover, ul.sonarmenu a:focus{

                outline: none;

                border-bottom: 2px solid #736E6E; /* Bottom border style on hover */

}

Kita menggunakan border-bottom untuk efek garis bawah tersebut, bukan text-decoration:underline. Selanjutnya kita akan membuat efek hover dengan sentuhan transition dan @-keyframe dari CSS3 untuk membuat efek hover lingkaran yang seolah-olah bergerak. Berikut CSSnya :

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */

                position: absolute;

                top: 50%;

                left: 50%;

                width: 70px; /* width of outer circle */

                height: 70px; /* height of outer circle */

                border: 12px double rgba(0,0,0,0.1); /* style and color of circles */

                border-radius: 50%;

                content: ”;

                opacity: 0;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);

                -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);

                transform: translateX(-50%) translateY(-50%) scale(0.2);

}

 

ul.sonarmenu a:after{ /* inner circle specific CSS */

                width: 60px; /* width of inner circle */

                height: 60px; /* width of inner circle */

                border-width: 6px;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);

                -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);

                transform: translateX(-50%) translateY(-50%) scale(0.8);

}

 

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{

                -webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */

                -moz-animation: pulsate 1.2s infinite;

                -ms-animation: pulsate 1.2s infinite;

                animation: pulsate 1.2s infinite;

}

 

/* ### Keyframe animations ### */

 

@-webkit-keyframes pulsate{

 

30%{

                opacity: 1;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(1);

}

 

                100%{

                opacity: 0.3;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

 

}

 

@-moz-keyframes pulsate{

 

30%{

                opacity: 1;

                -moz-transform: translateX(-50%) translateY(-50%) scale(1);

}

 

                100%{

                opacity: 0.3;

                -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

 

}

 

@-ms-keyframes pulsate{

 

30%{

                opacity: 1;

                -ms-transform: translateX(-50%) translateY(-50%) scale(1);

}

                100%{

                opacity: 0.3;

                -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

}

 

@-keyframes pulsate{

30%{

                opacity: 1;

                transform: translateX(-50%) translateY(-50%) scale(1);

}

                100%{

                opacity: 0.3;

                transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

}

 

Oke kita sudah selesai membuat menunya. Bisa kalian lihat di browser masing-masing. Tapi browser harus versi yang terbaru ya teman-teman agar efeknya terlihat. Jadi untuk tag dan CSS lengkapnya seperti ini :

<style>

ul.sonarmenu {

                list-style: none;

                background:#ccc;

}

ul.sonarmenu li{

               display: inline;

}

ul.sonarmenu a{

                position: relative;

                display: inline-block;

                color: #736E6E; /* font color */

                text-decoration: none;

                margin: 10px 20px;

                text-transform: uppercase;

                font-size: 18px; /* font size */

                letter-spacing: 1px; /* letter spacing */

                border-bottom: 2px solid transparent; /* Bottom border style */

}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{

                outline: none;

                border-bottom: 2px solid #736E6E; /* Bottom border style on hover */

}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */

                position: absolute;

                top: 50%;

                left: 50%;

                width: 70px; /* width of outer circle */

                height: 70px; /* height of outer circle */

                border: 12px double rgba(0,0,0,0.1); /* style and color of circles */

                border-radius: 50%;

                content: ”;

                opacity: 0;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);

                -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);

                transform: translateX(-50%) translateY(-50%) scale(0.2);

}

ul.sonarmenu a:after{ /* inner circle specific CSS */

                width: 60px; /* width of inner circle */

                height: 60px; /* width of inner circle */

                border-width: 6px;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);

                -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);

                transform: translateX(-50%) translateY(-50%) scale(0.8);

}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{

                -webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */

                -moz-animation: pulsate 1.2s infinite;

                -ms-animation: pulsate 1.2s infinite;

                animation: pulsate 1.2s infinite;

}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{

 

30%{

                opacity: 1;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(1);

}

                100%{

                opacity: 0.3;

                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

}

 

@-moz-keyframes pulsate{

30%{

                opacity: 1;

                -moz-transform: translateX(-50%) translateY(-50%) scale(1);

}

                100%{

                opacity: 0.3;

                -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

}

 

@-ms-keyframes pulsate{

30%{

                opacity: 1;

                -ms-transform: translateX(-50%) translateY(-50%) scale(1);

}

                100%{

                opacity: 0.3;

                -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

}

 

@-keyframes pulsate{

30%{

                opacity: 1;

                transform: translateX(-50%) translateY(-50%) scale(1);

}

                100%{

                opacity: 0.3;

                transform: translateX(-50%) translateY(-50%) scale(0.5);

                }

}

</style>

 

<ul class=”sonarmenu”>

<li><a href=””>Home</a></li>

<li><a href=””>Article</a></li>

<li><a href=””>Profile</a></li>

<li><a href=””>Forums</a></li>

<li><a href=””>Contact</a></li>

</ul>

Sekian dari saya dan semoga bermanfaat. Sampai jumpa pada kesempatan berikutnya.terima kasih.