Menu adalah suatu konten sangat wajib di sebuah website menurut saya, karena bagi saya menu itu adalah suatu pintu untuk kita berganti-ganti halaman di website tersebut, ada juga yang menyebutnya jantung, spion dan lain-lain, bagi saya pintu saja hehe, dan pastinya teman-teman pernah melihat efek menu yang bermacam-macam ada menu dropdown yang dimana ketika kita klik, muncuk sub-sub menunya, tetapi disini saya akan membuat menu itu sedikit lebih unik ya, diamana nanti saya akan membuat efek menu seperti radar dengan materialize, maka dari itu jangan kemana-mana simak terus ya.
Pasti teman-teman seperti apa? dan maksudnya radar itu apa? apakah bisa terditeksi, seperti di film-film, yang bukan seperti itu ya, hanya efeknya saja ya teman-teman, biasanya efek radar sendiri mempunyai efek seperti glombang yang mebesar mengecil seperti itu ya, bagaimana ya menjelaskan membuat efek menu seperti radar dengan materialize, ya pokonya nanti teman-teman pasti tau deh efeknya ketika kita lihat contohnya.
Untuk membuat efek menu seperti radar dengan materialize, saya membuatnya dengan bantuan materialize ya teman-teman, sebenarnya di materialize efek ini di contohnya di tombol button, tapi saya rasa efek ini bisa juga untuk mempercantik konten yang lain, seperti menu misalkan, yang sesaat lagi kita akan buat, nanti teman-teman juga bisa lihat dan coba dengan konten-lain, misalkan inputan form, sebuah artikel yang sangat penting atau baru di post, bisa juga sepertinya, oke sebenarnya cara ini jika teman-teman lihat cukup simple ya, kita hanya memberikan class pulse konten akan menimbulkan efek seperti radar, oke langsung saja bagaimana cara membuatnya, seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Efek Menu Seperti Radar Dengan Materialize</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<-e-style type="text/css">
.cyan{
text-align: center;
line-height: 50px;
font-weight: bold;
margin-top: 50px;
}
a{
color: #ff3d00
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<h1>Membuat Efek Menu Seperti Radar Dengan Materialize</h1>
</div>
<a href=""><div class="col s3 cyan accent-1 pulse large">Home</div></a>
<a href=""><div class="col s3 cyan accent-2 pulse">Profile</div></a>
<a href=""><div class="col s3 cyan accent-3 pulse">About</div></a>
<a href=""><div class="col s3 cyan accent-4 pulse">Contact</div></a>
</div>
</div>
<!--Import jQuery before materialize.js-->
<-e-script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<-e-script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Sudah tidak asing ya, dan saya tidak perlu menjelaskan struktur yang lain selain pulse di atas, coba teman-teman perhatikan saya menyisipkan sebuah class pulse, di setiap menu, efek itulah yang menimbulkan seperti radar menurut saya, oke bagaimana hasilnya:
Jika di gambar tidak terlihat efeknya ya, nanti teman-teman bisa copy dulu kode di atas, lalu coba, dan jangan lupa download dulu materializenya, oke dan saya rasa cukup sampai disini dulu belajar kita membuat efek menu seperti radar dengan materialize, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.