• Login
  • Join
  • Home
  • Profil
  • Cara Pembelian
  • Kontak

logo

  • Home
  • Kategori Tutorial
    • Ajax - JQuery
    • API Developer
    • CakePHP
    • CodeIgniter
    • HTML & CSS
    • Lain-lain
    • MySQL - MySQLi
    • OOP PHP
    • PHP Classic
    • Smarty PHP
    • SMS Gateway
    • Version Control
  • Download
  • My Books
  • Prosedur Penulisan Naskah
  • Toko Online
  • My Sites
    • Asfamedia.com
    • Asfasolution.com
    • Komiqu.com
Home
  • Home
  • Login
  • Join
  • Kategori Tutorial
    • Ajax - JQuery
    • API Developer
    • CakePHP
    • CodeIgniter
    • HTML & CSS
    • Lain-lain
    • MySQL - MySQLi
    • OOP PHP
    • PHP Classic
    • Smarty PHP
    • SMS Gateway
    • Version Control
  • Download
  • Info Buku
  • Prosedur Penulisan Naskah
  • Toko Online
  • My Sites
    • Asfamedia.com
    • Asfasolution.com
    • Oaseast.com
  • Pembelian online saat ini dialihkan ke www.asfamedia.com
  • Dapatkan diskon hingga 40% dengan bergabung sebagai member di asfamedia.com (Khusus buku-buku penerbit CV. ASFA Solution)
  • Segera daftarkan email Anda di newsletter melalui right column untuk mendapatkan informasi terbaru agussaputra.com
  • Artikel dan informasi yang ditampilkan bisa Anda copy, dengan catatan: menuliskan sumber : agussaputra.com
  • Home
  • Artikel
  • Membuat Menu Tree Sendiri

Membuat Menu Tree Sendiri

07 November 2016
4   
36.017

Membuat Menu Tree Sendiri

Menu (Navigasi) merupakan salah satu elemen atau komponen penting dalam suatu website. Hendaknya susunan menu dibuat secantik dan se-interaktif mungkin, karena dengan menu yang simple dan interaktif dapat memandu para pengunjung web dengan cepat. Dilihat dari berbagai macam bentuk menu, menu atau navigasi setidaknya memiliki 4 bentuk standar, yaitu horizontal, vertical, dropdown (ketiga menu ini, pernah penulis bahas pada serial buku CSS), dan yang terakhir yang akan penulis bahas adalah membuat Menu Tree atau yang disebut juga sebagai menu bercabang, layaknya ranting pohon.

Mungkin jika Anda pernah melihat susunan folder dalam windows explorer, maka kurang lebih akan seperti itu struktur yang akan kita kerjakan, namun dengan teknik simple agar mudah dipelajari. Disini penulis menggunakan bantuan javascript agar lebih web menjadi terlihat responsif, dalam artian kita mengklik sub menu, maka halaman / web browser tidak akan melakukan refresh / reload.

Buat folder baru dengan nama treemenu didalam folder htdocs atau www. Buatlah file dengan nama treemenu.php dan simpan dalam folder treemenu yang telah dibuatkan barusan. Adapun skripnya sebagai berikut :

Skrip treemenu.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="simpletreemenu.js"></script>
<link rel="stylesheet" type="text/css"
href="simpletree.css"></head>
8
<body>
<h4> Simple Menu Tree </h4>
<ul id="treemenu1" class="treeview">
<li> Home </li>
<li> Profil </li>
<li> Kategori
<ul>
<li> Framework </li>
<li> PHP </li>
<li> CSS </li>
<li> SMS Gateway </li>
</ul>
</li>
<li> Kontak </li>
<li> Info Buku
<ul>
<li> Teknik Cepat Membangun Aplikasi Web dengan Framework
CakePHP </li>
<li> Step by Step Membangun Aplikasi SMS dengan PHP dan
MySQL </li>
<li> Pemrograman CSS untuk Pemula </li>
<li> Tip dan Solusi Jitu Pemrograman PHP </li>
<li> dan lain-lain </li>
</ul>
</li>
<li> Download </li>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
</script>
</body>
</html>

 

Pada skrip diatas, kita membutuhkan 2 file luar, yaitu simpletree.css dan simpletreemenu.js. untuk itu kita buat file simple.css dan simpan ke dalam satu folder bersama-sama dengan treemenu.php.adapun skripnya sebagai berikut :

.treeview ul {
margin: 0;
padding: 0;
}
.treeview li {
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
9
margin-bottom: 3px;
}
.treeview li.submenu {
background: white url(closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}
.treeview li.submenu ul {
display: none;
}
.treeview .submenu ul li {
cursor: default;
}


Pada skrip CSS tersebut, setidaknya membutuhkan 3 file gambar sebagai animasi folder pada halaman web. Agar tidak merepotkan Anda, penulis telah menyertakan file source code menu tree yang bisa download disini, setelahnya Anda buka web browser Anda dengan mengetikkan url http://localhost/treemenu/treemenu.php maka hasilnya akan tampak seperti gambar dibawah.

Semoga tutorial kali ini memberikan manfaat untuk Anda.

recommend to friends
  • twitter

Artikel Terkait

MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?

MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?

23-03-2020 0
PHP: Menghitung Jumlah Hari Tertentu pada Periode Tanggal Tertentu

PHP: Menghitung Jumlah Hari Tertentu pada Periode Tanggal Tertentu

31-12-2018 0
Mengirim Email Lampiran di PHP (File Attachment)

Mengirim Email Lampiran di PHP (File Attachment)

16-01-2017 0
Membuat Dynamic Multiple Upload dengan PHP

Membuat Dynamic Multiple Upload dengan PHP

02-11-2016 0

Komentar

  1. Heri S Ibrohim
    21-04-2017, 15:53:24

    kalau pakai mysql gimana pak. mohon pencerahan

  2. AGUS SAPUTRA
    21-04-2017, 16:44:48

    Heri S Ibrohim @ kan dimenu terdiri dari li dan /li
    Tinggal bikin aja susunan menu yang telah disimpan didatabase.. terus panggil kueri menggunakan mysql_query("SELECT * FROM menu);
    setelah itu tampilkan menu menggunakan:
    while ($data = mysql_fetch_array($kuerimenu))
    {
    echo "li $data[menu]/li";
    }

  3. Heri S Ibrohim
    22-04-2017, 12:34:52

    Maaf pak, ada contoh buat menu kategori menu bertingkat juga ga?.
    misal :
    1. Judul buku :
    - Buku Pelajaran
    - Novel
    - komik
    2. Baju
    - baju anak
    - baju dewasa

    kalo ada contohnya, minta tolong dikirimkan

    terima kasih banyak.

  4. AGUS SAPUTRA
    25-04-2017, 16:06:57

    Heri S Ibrohim @ Tidak ada mas, coba mas bisa cari di internet untuk proses menu tree ini, saat ini sudah banyak free source codenya..

Tinggalkan Komentar


Lihat Semua

Buku Terbaruku

Panduan Praktis dan Jitu Menguasai PHP7 dan SQL Server 2017
Panduan Praktis dan Jitu Menguasai PHP7 dan SQL Server 2017

Like Our Page

Agus Saputra
CV. ASFA Solution

Terpopuler Saat Ini

  • Artikel Terpopuler
  • Buku Terpopuler
(74.026)

Mengubah +62 menjadi 0 dan 0 menjadi +62 - SMS

(60.472)

Membuat Laporan PDF PHP Berdasarkan Kondisi

(51.005)

Sebab Gammu Error 1053

(40.771)

Telah Terbit Buku Best Practice Membangun Aplikasi Pelayanan Publik dengan Framework Codeigniter 3

(37.752)

Import Excel to Database Menggunakan PHP dengan Filtering Data Besyarat

(36.016)

Membuat Menu Tree Sendiri

(34.543)

Membuat Statistika Pengunjung Secara Dinamis

(22.545)

Memanfaatkan SMS API secara Online dengan PHP

(20.866)

Upload Gambar Menggunakan Ajax (jQuery)

(19.014)

Step By Step Membangun Aplikasi SMS dengan PHP dan MySQL

(21.379)

Framework Codeigniter 3 Membangun Aplikasi Penggajian untuk Panduan Skripsi
by Yenda Purbadian

(19.304)

Membuat Aplikasi Absensi Dan Kuesioner Untuk Panduan Skripsi
by Agus Saputra

(18.902)

Proyek Membuat Aplikasi Forum Diskusi Dengan PHP Dan MySQL
by Agus Saputra

(18.262)

Aplikasi Penjualan Dan Pembelian Terintegrasi Dengan VB 6.0. Dan Data Report
by Agus Saputra, Sofyan Maulana, & Sutikno Sofjan

(16.826)

Trik Dahsyat Menjadi Web Master Dengan Framework CakePHP
by Agus Saputra

(16.344)

Aplikasi Pemesanan Tiket Online Berbasis Web Dan Android
by Akhmad Dharma Kasman

(15.830)

Membangun Aplikasi Toko Online Dengan PHP Dan SQL Server
by Agus Saputra

(14.796)

Mega Proyek 125 Juta Sistem Informasi Akademik Kampus
by Agus Saputra

(14.514)

Sistem Informasi Nilai Akademik Untuk Panduan Skripsi
by Agus Saputra

(14.485)

Teknik Cepat Membangun Aplikasi Web Dengan Framework CakePHP
by Agus Saputra

Newsletter

Masukkan email Anda untuk berlangganan informasi kami

Komentar Artikel Terakhir

  • AGUS SAPUTRA pada
    MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?
    04 April 2020 23:36:33
  • Lpk Naura pada
    MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?
    03 April 2020 01:43:24
  • Lpk Naura pada
    Mengirim Email Otomatis dengan Cron Jobs
    03 April 2020 01:41:33
  • Lpk Naura pada
    Mengirim Email Otomatis dengan Cron Jobs
    03 April 2020 01:40:29
  • Didik pada
    Update Source Code Final Project POS Web Base dengan Smarty PHP
    25 Februari 2020 05:46:58

Komentar Buku Terakhir

  • Hijau Generasi pada
    Mengenal Web Security - Kasus Eksploitasi Web dengan Ajax
    28 Maret 2020 21:59:10
  • y. ifliandry pada
    Mega Proyek 75 Juta Aplikasi Inventory Berbasis Web
    20 Maret 2020 03:08:36
  • Subarja Yasin pada
    Mega Proyek 125 Juta Sistem Informasi Akademik Kampus
    06 Februari 2020 09:43:44
  • Fedri pada
    Proyek Membuat Website Periklanan Dengan PHP
    05 Januari 2020 18:09:17
  • er pada
    Proyek Membuat Aplikasi Forum Diskusi Dengan PHP Dan MySQL
    09 Desember 2019 09:09:27
  • Home
  • Cara Pembelian
  • Kontak
© 2023. All Rights Reserved. CV. ASFA Solution, Software Development, IT and Publishing
×
Authorization
Login
Login menggunakan jejaring sosial
Anda juga masuk menggunakan akun facebook Anda.
  • Connect
×
JOIN AGUSSAPUTRA.COM
* All fields required