Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat active ketika kita berada di section tertentu ketika kita scroll? Ini bisa disebut sebagai Scrollspy. Scrollspy biasanya cocok untuk web yang bersifat single page, agar user tau dimana posisi atau section yang sedang dibaca oleh mereka.
Nah Bootstrap ternyata punya tools atau plugin seperti ini. Menggunakan CSS dan Javascript dari Bootstrap, hari ini kita akan mencoba membuat scrollspy. Yeahhhh! Tutorial ini akan memperlihatkan simple way to do Scrollspy, agar kalian tau dengan mudah bagaimana mengimplementasikannya di dokumen web.
Dalam tutorial ini kita akan butuh 2 elemen, elemen pertama yaitu menu navigasi. Dan yang kedua adalah Content (bisa article, section, div). Jadi mari kita mulai.
Import Bootstraps.
Hal yang pertama kita harus lakukan adalah mengimport bootstrap, baik css maupun javascriptnya. Kita juga perlu menggunakan jquery.
1
2
3
|
Elemen yang kita perlukan dalam Scrollspy adalah navigasi (<nav>), saya berharap semua sudah bisa membuat nav dengan Bootstrap. Navigasi yang akan kita buat adalah jenis Pils, yaitu navigasi dengan rounded background.
1
2
3
4
5
6
7
| <nav id="Scrollspy"> <ul class="nav nav-pills nav-stacked"> <h3><strong>Side Navigation</strong></h3> <li><a href="#about">About Me</a></li> <li><a href="#followme">Follow Me</a></li> </ul></nav> |
Pada nav menu ini kita berikan list dari link yang akan kita tujukan ke content section kita. Pada kasus kali ini saya menggunakan 2 section yaitu About dan juga Follow. Yang harus diperhatikan kita menambah 'i(d="Scrollspy")', selector ini adalah sebagai penanda bahwa ini menu navigasi yang akan dibuat scrollspy. Dan juga kita perlu memasukan 'id' dari tiap section ke dalam link 'href'.
Biar tidak bingung, ini section yang ada di page tutroial kali ini:
1
2
3
4
5
6
7
8
| <div id="about"> <h1><em>About Me</em></h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div><div id="followme"> <h1>Follow Me</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> |
Kalian lihat? link "About Me", menunjuk pada #about. Sehingga akan menampilkan section dengan id = about. You get the idea, right guys?
Dan itu saja elemen yang kita perlukan, jika kalian ingin menambahkan section, maka kalian hanya harus membuat div baru dengan id, dan tambahkan juga pada list menu nav yang akan menuju ke div yang kita buat.
Hal terakhir yang kita perlukan adalah, menambahkan data-spy dan juga data-target pada tag <body>. Ini merupakan cara untuk memanggil library scrollspy dari javascript bootstrap. Kita hanya perlu memanggilnya, dan biarkan Bootstrap yang bekerja :D
1
| <body data-spy="scroll" data-target="#Scrollspy"> |
data-target pada body harus/perlu kita arakhan ke link navigasi website kita.
That's it, berikut full source code dari demo tutorial kali ini. (Tentu saja sudah diberikan beberapa style)
Full Script
demoscrollspy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <!DOCTYPE html><html lang="en"><head> <title>Demo Bootstrap Scrollspy</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: 'Quicksand'; } ul.nav-pills { top: 250px; position: fixed; } div.col-sm-9 div { height: 500px; font-size: 28px; padding: 30px; } </style></head><body data-spy="scroll" data-target="#Scrollspy"><div class="container-fluid" style="height: 250px;"> <center> <h1>DEMO Bootstrap Scrollspy </h1> <h3>by: hasyemiraws</h3> </center></div><div class="container"> <div class="row"> <nav class="col-sm-3" id="Scrollspy"> <ul class="nav nav-pills nav-stacked"> <h3><strong>Side Navigation</strong></h3> <li><a href="#about">About Me</a></li> <li><a href="#followme">Follow Me</a></li> </ul> </nav> <div class="col-sm-9"> <div id="about"> <h1><em>About Me</em></h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <div id="followme"> <h1>Follow Me</h1> <div class="row"> <div class="col-sm-4"> <img src="http://ajr.org/wp-content/themes/AJR-theme/images/twitter-icon.png" class="img-responsive"> <h2>@hasyemiraws</h2> </div> <div class="col-sm-4"> <img src="http://www.allwesttrophies.com/v/vspfiles/assets/images/facebook_round_logo.png" class="img-responsive"> <h2>hasyemi rafsanjani</h2> </div> <div class="col-sm-4"> <h2>hasyemiraws</h2> </div> </div> </div> </div> </div></div></body></html> |
Ya, sekian tutorial kali ini, semoga bisa bermanfaat buat temen-temen
Tidak ada komentar:
Posting Komentar