Cara Membangun Tata Letak Navigasi Off-Canvas dengan Bootstrap

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Bootstrap dirancang untuk memenuhi banyak skenario dengan menyediakan beberapa komponen web yang sering digunakan. Ada tombol, bar navigasi responsif, tab, tooltips, carousel, dan lain sebagainya. Namun, bahkan dengan semua mainan yang diberikan Bootstrap, itu masih kehilangan pola yang sangat populer: navigasi off-canvas.

Pendekatan ke navigasi set menu ini keluar dari area yang terlihat (kanvas), memberikan lebih banyak ruang untuk fokus pada konten utama. Navigasi off-canvas pertama kali populer di aplikasi mobile native, setelah itu datang ke web responsif (sebagian berkat artikel Luke Wroblewski). Umumnya, itu menggunakan jQuery untuk toggle status navigasi.

Omong-omong, Bootstrap menjadi begitu populer dan dukungan masyarakat menjadi begitu besar, pengembang telah membuat plugin atau ekstensi untuk memasukkan komponen yang tidak tersedia di Bootstrap resmi. Dan itu termasuk satu untuk menerapkan navigasi off-canvas.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menambahkan navigasi off-canvas ke Bootstrap dengan ekstensi yang disebut Jasny Bootstrap oleh Arnold Daniels. Dua alasan saya untuk dua pilihan ini adalah:

Seperti namanya, ekstensi ini secara khusus dibangun untuk Bootstrap. Oleh karena itu, basis kode di dalamnya sejalan dengan Bootstrap. Ia mengikuti konvensi penamaan Bootstrap dan metode untuk menerapkan komponen.
Jasny Bootstrap termuat dengan plugin navigasi off-canvas, yang fleksibel dapat dikonfigurasi melalui serangkaian kelas, data atribut HTML5, dan inisiasi JavaScript.

Sedikit Tentang Bower

Selama tutorial ini saya akan memandu Anda melalui alur kerja yang membantu kemampu-rawatan situs web menggunakan Bower. Jadi, pastikan Anda memiliki Bower sudah terinstall pada sistem Anda. Jika Anda suka tidak menggunakan Bower, itu tidak masalah, tapi untuk Anda memulai kami juga telah menerbitkan beberapa tutorial tingkat pemula di Bower.

Baiklah, mari kita mulai.

1. Memulai

Mari kita memulai proyeknya dengan membuat direktori kerja di mana kami akan menempatkan potongan-potongan yang diperlukan.

working-dir
|-- assets
|   |-- css
|   |-- img
|   `-- js
`-- sources
    |-- js
    `-- less

Kami akan menggunakan folder assets untuk menyimpan aset situs seperti gambar, stylesheet, file JavaScript, dan sebagainya. Folder sources di mana kita akan menempatkan kode sumber uncompiled dari LESS dan JavaScript. Setelah itu, kami akan menentukan spesifikasi proyek — nama, versi, dependensi, dan lain-lain — dengan Bower.

Jalankan perintah bower init di dalam direktori kerja dan mengisi semua petunjuknya.

Anda tidak harus mengikuti input seperti yang ditunjukkan di atas dengan tepat; sesuaikan input dengan kebutuhan Anda sendiri. Setelah selesai, file baru bernama bower.json seharusya hadir, yang berisi spesifikasi proyek yang telah kami isi.

2. Menginstal Dependensi Proyek

Proyek ini memerlukan dua kerangka kerja; yaitu Bootstrap dan Jasny Bootstrap. Sebelum kita mengistalnya, mari kita menentukan nama direktori dimana Bower harus menginstal paket-paketnya. Untuk melakukannya, buat sebuah file baru di tingkat root direktori kerja yang bernama .bowerrc dan letakkan baris berikut untuk nama folder.

1	{
2	"directory": "components"
3	}

Kemudian, masukkan baris-baris di bawah ini di bower.json, yang akan memberitahu Bower bahwa proyek dependensinya adalah Bootstrap dan Jasny Bootstrap versi 3.1.1 atau yang lebih baru.

1	"devDependencies": {
2	"bootstrap": ">=3.1.1",
3	"jasny-bootstrap": ">=3.1.1"
4	}

Di Terminal atau Command Prompt, jalankan perintah bower install untuk ambil dependensi yang telah kita tapkan semuanya sekaligus.

Sebagaimana ditetapkan dalam .bowerrc, dependensi proyek sekarang harus berada di folder baru yang dihasilkan yang bernama components.

3. Mengatur Stylesheet

Dengan semua dependensi sudah siap, kita dapat mulai bekerja pada proyek! Kita akan menyingkirkan semua hambatan dengan mengorganisir stylesheet. Ada empat stylesheet LESS yang harus kita buat, yaitu:

variables.less — seperti namanya, stylesheet ini berisi variabel yang dipakai dalam Bootstrap. Kami akan membuat salinan ini apabila kita ingin menyesuaikan variabel, tanpa mempengaruhi file asli (salin variabel Bootstrap dari Gist ini).
variables-jasny.less — demikian pula, stylesheet ini berisi variabel-variabel yang digunakan dalam ekstensi, Jasny Bootstrap (salin variabel di sini).
app.less — stylesheet ini berisi referensi untuk Bootstrap dan Jasny Bootstrap yang kita perlukan untuk membangun situs web (Anda dapat menyalin konten di sini).
style.less — kita akan menulis style kita sendiri dalam stylesheet ini.

Buat dan tempatkan mereka bersama-sama seperti:

...
`-- sources
	|-- js
	`-- less
		|-- app.less
		|-- style.less
		|-- variables-jasny.less
		`-- variables.less

Hal berikutnya adalah untuk mengkompilasi stylesheet ini. Untuk melakukannya, kita akan menggunakan Koala dengan konfigurasi sebagai berikut:

Pastikan bahwa opsi Auto Compile dicentang. Jadi Koala akan segera mengkompilasi file LESS ke CSS setiap kali kita membuat perubahan.
Atur output app.less serta style.less menuju direktori assets/css/.
Pilih opsi Source Map yang menghasilkan .map agar debug stylesheet lebih mudah. Jika ini adalah pertama kalinya Anda mendengar tentang Source Map, cek tutorial kami di Tuts+ Code, Source Map 101.

Setelah semua konfigurasi ditetapkan, kompilasi LESS ke CSS.

Catatan: Harap diingat bahwa Anda tidak wajib menggunakan Koala jika Anda lebih suka cara lain untuk mengkompilasi file LESS Anda.

4. Membangun Halaman Web

Buat sebuah file HTML baru yang bernama index.html. Selain struktur telanjang HTML5 dasar, file index.html tersebut juga akan berisi tag meta viewport, tag meta description, judul, dan link ke stylesheet, seperti:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A demonstration on adding off-canvas menu to Bootstrap with Jasny Bootstrap">
	<title>Bootstrap Off-canvas Navigation</title>

	<link href="assets/css/app.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>

</body>
</html>

Navigasi Off-canvas

Sekarang mari kita menambahkan navigasi off-canvas. Jasny Bootstrap menggunakan pendekatan serupa dengan Bootstrap ketika berhubungan dengan markup komponen. Ini adalah bagaimana kita memulai struktur navigasi off-canvas:

1	<nav id="offcanvas" class="navmenu navmenu-inverse navmenu-fixed-right navmenu-site offcanvas" role="navigation">
2	</nav>

Ini terdiri dari beberapa kelas. Tiga kelas yaitu navmenu, navmenu-inverse, navmenu-fixed-right menetapkan elemen sebagai navmenu. Navmenu adalah salah satu komponen dari Jasny Bootstrap yang menetapkan elemen ditunjuk sebagai navigasi vertikal. offcanvas adalah kelas yang menetapkan elemen dari viewport. Selain itu, kami juga telah menambahkan kelas baru, navmenu-site, yang akan memungkinkan kita untuk mengkustomisasi navigasi dengan gaya kita sendiri.

Item menu dalam navigasi off-canvas dapat diletakkan menggunakan elemen <ul> bersama dengan kelas nav navmenu-nav, seperti itu.

<nav id="offcanvas" class="navmenu navmenu-inverse navmenu-fixed-right navmenu-site offcanvas" role="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Portfolio</a></li>
	</ul>
</nav>

Anda sangat bisa memasukkan komponen Bootstrap asli dalam hubungannya dengan markup, seperti Dropdown dan Tombol-tombol.

Markup HTML untuk navigasi yang akan kami tambahkan dalam tutorial ini cukup panjang. Jadi, demi kesederhanaan, markup yang lengkap dapat diperoleh melalui Gist ini.

Isi Halaman Web

Gambar berikut menunjukkan rencana kami meletakkan konten halaman web:

Cetak biru situs, menampilkan tata letak.

Seperti yang ditunjukkan di atas, konten situs web akan terdiri dari logo, toggle tombol dengan ikon "Hamburger" untuk slide navigasi masuk dan keluar, dan beberapa baris kata-kata menarik dengan tombol besar — yang dikenal sebagai tombol ajakan-untuk-bertindak

Markup konten HTML sama panjangnya untuk disisipkan dalam tutorial ini. Sebaliknya, silakan menyalin seluruhnya dari Gist ini.

5. Style

Banyak style sini akan hanya dekoratif, berputar di sekitar warna, ukuran dan posisi. Style dekoratif ini akan dicapai dengan mengkustomisasi style standar Bootstrap dan menulis style kita sendiri. Jadi, alih-alih berjalan melalui langkah-langkah yang mungkin sudah jelas, saya ingin menunjukkan beberapa rincian yang paling penting.

Pertama-tama, sebelum menulis satu baris, mengimpor stylesheet app.less ke style.less. Ini akan memungkinkan kita untuk menggunakan kembali Variabel dan Mixins di dalamnya.

1	@import (reference) 'app.less';

Kedua, kami menciptakan sebuah variabel LESS untuk menentukan lokasi gambar. Kita memberi nama variabel @path-img.

1	@path-img: '../../assets/img/';

Kapan saja kita perlu merujuk ke suatu gambar dalam stylesheet, kita akan menyertakan variabel ini. Contoh di bawah ini menunjukkan bagaimana kami menggunakannya ke logo.

.masthead-brand {
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    text-align: left;
    margin-top: -15px;
    a {
        .text-hide();
        display: inline-block;
        background-image: url('@{path-img}logo.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100px;
        height: 33px;
    }
}

Menengahkan Vertikal

Akhirnya, kami ingin menengahkan konten, kata-kata menarik dan tombol, secara vertikal. CSS, pada titik ini, belum memberikan cara mudah untuk menyesuaikan konten secara vertikal menggunakan hanya satu deklarasi properti. Akibatnya, ada beberapa cara untuk mencapainya, dan jujur tidak ada lebih baik daripada yang lain.

Dalam kasus ini, kita akan menyelaraskan konten menggunakan metode tampilan Table CSS. Jika Anda melihat markup halaman web, Anda akan melihat bahwa kami membungkus halaman web konten dengan dua <div>. Masing-masing <div> ditetapkan dengan kelas site-wrapper dan site-wrapper-inner, seperti itu.

<div class="site-wrapper">
	<div class="site-wrapper-inner">
	...
	</div>
</div>

Untuk menyelaraskan konten secara vertikal, kita mengatur properti display dari site-wrapper ke table dan membuatnya merata di seluruh viewport dengan menentukan width dan height ke 100%. Kemudian, kita mengatur properti display pembungkus dalam ke table-cell. Sekarang ini memungkinkan kita untuk menerapkan properti vertical-align untuk menyelaraskan konten secara vertikal.

.site-wrapper {
    display: table;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
.site-wrapper-inner {
    display: table-cell;
    vertical-align: middle;
}

Rincian lengkap tentang aturan style dapat diperoleh di Gist ini.

6. Membuat Halaman Web Hidup

Setelah kami telah menambahkan style, situs web sekarang seharusnya memiliki tampilan dan nuansa, seperti gambar di bawah:

Namun, situs web masih belum berfungsi sepenuhnya. Coba klik pada ikon "Hamburger"; navigasi off-canvas tidak menggeser masuk. Fungsi ini berasal dari library JavaScript, maka kita harus mengkompilasi dan menambahkannya ke situs web.

Ada empat library JavaScript yang kita butuhkan untuk menggunakan navigasi off-canvas, jQuery, transition.js, dropdown.js untuk mengaktifkan menu dropdown yang kami menambahkannya dalam navigasi, dan akhirnya offcanvas.js. Untuk mengkompilasi mereka bersama-sama, buat file JavaScript baru dalam direktori source/js. Dalam kasus ini, kita akan menamakannya app.js.

1	...
2	`-- sources
3	\|-- js
4	\| `-- app.js
5	`-- less

Impor library JavaScript menggunakan @koala-prepend.

1	//@koala-prepend "../../components/jquery/dist/jquery.js"
2	//@koala-prepend "../../components/bootstrap/js/transition.js"
3	//@koala-prepend "../../components/jasny-bootstrap/js/offcanvas.js"

Atur output ke direktori /assets/js, dan tekan tombol Compile. Jangan lupa untuk menghubungkan file kompilasi di halaman web.

1	<script src="assets/js/app.min.js"></script>

Sekarang, Anda seharusnya dapat menggeser navigasi off-canvas masuk dan keluar.

Transisi

Selain itu, Anda juga dapat menambahkan potongan JavaScript berikut di bagian bawah halaman, yang akan mengaktifkan efek transisi dari menu dropdown.

<script>
(function() {
    var $offCanvas = $('#offcanvas'),
        $dropdown  = $offCanvas.find('.dropdown');
    $dropdown.on('show.bs.dropdown', function() {
        $(this).find('.dropdown-menu').slideDown(350);
    }).on('hide.bs.dropdown', function(){
        $(this).find('.dropdown-menu').slideUp(350);
    });
})();
</script>

Kesimpulan

Dalam tutorial ini, kami telah menyertakan navigasi off-canvas yang berfungsi ke Bootstrap menggunakan ekstensi yang disebut Jasny Bootstrap.

Setelah menggunakan Bower dalam tutorial ini akan membantu kami merawat dan tetap up-to-date dengan dua library ini. Setelah beberapa saat, dua library akan diperbarui. Dengan Bower, Anda dapat menjalankan perintah bower list untuk menampilkan daftar semua paket Bower yang diinstal dan memverifikasi apakah versi baru dari masing-masing tersebut tersedia.

Jika versi baru tersedia, cukup menjalankan perintah bower update atau bower install untuk pembaruan paket. Semudah itu.

Saya harap Anda belajar beberapa metode dan trik dari tutorial ini, jika Anda memiliki pertanyaan jangan ragu untuk meninggalkan komentar.