Konsep ini merupakan salah satu penerapan dari artikel berikut sebagai salah satu cara untuk menyederhanakan sintaks HTML elemen navigasi sebagai objek:
<b:widget id='HTML1' title='Navigation' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>[{ name: "Home", path: "/" }]</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:with expr:value='data:content' var='array'> <b:include data='array' name='nav'/> </b:with> </b:includable> <b:includable id='nav' var='array'> <nav class='nav' id='nav'> <b:include data='array' name='ul'/> </nav> </b:includable> <b:includable id='ul' var='array'> <b:if cond='data:array.size > 0'> <ul> <b:loop values='data:array' var='this'> <b:include data='this' name='li'/> </b:loop> </ul> </b:if> </b:includable> <b:includable id='li' var='this'> <li> <b:class cond='path(data:view.url, data:this.path) == data:view.url' name='active'/> <b:include data='this' name='a'/> <b:if cond='data:this.children'> <b:include data='this.children' name='ul'/> </b:if> </li> </b:includable> <b:includable id='a' var='this'> <b:if cond='data:this.path || data:this.link'> <a> <b:attr expr:value='data:this.path ? path(data:view.url, data:this.path) : data:this.link' name='href'/> <b:attr cond='data:this.title' expr:value='data:this.title' name='title'/> <b:attr cond='data:this.target' expr:value='data:this.target' name='target'/> <data:this.name/> </a> <b:else/> <span class='a'><data:this.name/></span> </b:if> </b:includable> </b:widget>Kode CSS hidangan navigasi sanggup Anda ambil dari sumber mana saja, selama selektor CSS yaitu berupa .nav atau #nav (misalnya dari sini). Atau, Anda juga sanggup menambahkan kelas kustom menyerupai ini sebagai cara untuk menyesuaikan isyarat HTML dengan isyarat CSS hidangan navigasi yang Anda dapatkan:
<b:includable id='nav' var='array'> <nav class='nav superfish' id='nav'> <b:include data='array' name='ul'/> </nav> </b:includable>Penggunaan
Masuk ke editor HTML Templat, salin dan tempel isyarat XML di atas ke dalam area <b:section> … </b:section> lalu simpan perubahan. Anda mungkin perlu mengubah ID widget yang Saya beri tanda dengan urutan angka yang lain untuk mencegah duplikat ID widget. Setelah itu masuk ke editor Tata Letak. Di situ seharusnya sudah bertambah satu buah widget bertipe HTML/JavaScript dengan judul Navigation. Klik tombol Edit!
Setiap item hidangan tersimpan di dalam kontainer. Berikut ini yaitu pola kontainer hidangan yang masih kosong:
[]Kemudian kita tambahkan sebuah menu, sebut saja Beranda:
[{ name: "Beranda", path: "/" }]Kemudian kita tambahkan sebuah hidangan lagi berjulukan Profil:
[{ name: "Beranda", path: "/" }, { name: "Profil", path: "p/tentang-saya.html" }]Untuk tautan eksternal, gunakan atribut url sebagai pengganti path:
[{ name: "Beranda", path: "/" }, { name: "Profil", url: "//about.me/ta.tau.taufik" }]Judul dan sasaran tautan juga sanggup ditentukan menyerupai ini:
[{ name: "Profil", url: "//about.me/ta.tau.taufik", title: "Taufik Nurrohman", target: "_blank" }]Anak-anak hidangan sanggup dibentuk kembali pada atribut children dengan hukum yang sama menyerupai sebelumnya:
[{ name: "Profil", children: [{ name: "Facebook", url: "//www.facebook.com/ta.tau.taufik" }, { name: "Google+", url: "//plus.google.com/+TaufikNurrohman" }] }]Contoh Objek
[{ name: "Home", path: "/" }, { name: "About", path: "p/about.html", children: [{ name: "About Me", path: "p/about.html" }, { name: "Advertise", path: "p/advertise.html", children: [{ name: "Method 1", path: "p/advertise-1.html" }, { name: "Method 2", path: "p/advertise-2.html" }] }] }, { name: "Archive", path: "p/archive.html" }, { name: "Contact", link: "//www.facebook.com/ta.tau.taufik", title: "Facebook", target: "_blank" }]