Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

Anda pengguna Dreamweaver? Tapi tidak bisa menggunakan fitur dropdown menu atau Spry Menu Bar Horizontal dengan baik? Maka sekaranglah saatnya Anda belajar menggunakan fitur drop down menu yang disediakan oleh Dreamweaver. Tutorial ini dapat digunakan pada Dreamweaver CS3, CS4, CS5.5 dan CS6. Hanya saja saya sarankan Anda untuk menggunakan Dreamweaver CS4 ke atas.

Source code dasar (dropdown.php)

Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

Berikut ini adalah source code dasar dalam tutorial ini:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Drop Down Menu Tutorial: Java Web Media</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
 <div id="header">
 <h1>Java Web Media</h1>
 <p>Your web solution</p>
 </div>
 <div id="navigasi">Ini Navigasi</div>
 <div id="konten">
 <h1>Java Web Media, Web Design Company Based in Depok</h1>
 <p>Or bends with the remover to remove. Admit impediments; love is not love that looks on tempests and is never shaken; let me not to the marriage of true minds. Love alters not with his brief hours and weeks, within his bending sickle's compass come; it is the star to every wand'ring bark. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>
 <p>That looks on tempests and is never shaken; if this be error and upon me proved, I never writ, nor no man ever loved. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark that looks on tempests and is never shaken; which alters when it alteration finds. Whose worth's unknown, although his height be taken.</p>
 </div>
 <div id="footer"><a href="http://www.javawebmedia.com">Web Design</a> by <a href="http://www.javawebmedia.com">Java Web Media</a></div>
</div>
</body>
</html>

File CSS (style.css) di simpan dalam folder css

body {
 background-color: #063;
 margin: 0px;
 padding: 0px;
}
form {
 background-color: #E7E7E7;
 padding: 20px;
 border: thin solid #CECECE;
 border-radius: 5px;
}
label {
 font-size: 14px;
 font-weight: bold;
 text-transform: capitalize;
 display: block;
}
input {
 padding: 5px 10px;
}
h1 {
 padding-bottom: 10px;
 border-bottom: solid thin #D4D4D4;
 font-size: 18px;
}
a, a:visited {
 text-decoration: none;
}
a:hover {
 color: #900;
}
#wrapper {
 font-family: Tahoma, Geneva, sans-serif;
 background-color: #FFF;
 margin: auto;
 padding: 20px 30px;
 height: auto;
 width: 960px;
 border-right-width: 5px;
 border-right-style: solid;
 border-right-color: #CCC;
 border-bottom-width: 5px;
 border-left-width: 5px;
 border-bottom-style: solid;
 border-left-style: solid;
 border-bottom-color: #CCC;
 border-left-color: #CCC;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
}
img {
 max-width: 900px;
 padding: 10px;
 border: solid thin #F9F;
 background-color: #FFC;
 height: auto;
}
.warning {
 background-color: #FCF;
 color: #900;
 padding: 5px 10px;
 border: solid thin #900;
 border-radius: 5px;
}
#header {
 width: 960px;
 height: 100px;
 float: left;
 font-size: 16px;
 padding: 10px 0px;
 margin-bottom: 10px;
}
#header h1 {
 font-size: 20px;
 color: #060;
 border-bottom: none;
}
#navigasi {
 float: left;
 width: 960px;
 height: 40px;
 color: #FFF;
 background-color: #333;
 margin-bottom: 10px;
}
#konten {
 width: 960px;
 height: auto;
 float: left;
 padding-bottom: 20px;
 margin-bottom: 10px;
 border-bottom: solid thin #CCC;
}
#footer {
 text-align: center;
 font-size: 11px;
}

Membuat dropdown menu menggunakan Spry Menu Bar Horizontal

Langkah selanjutnya adalah bersiap membuat dropdown menu menggunakan fitur Spry Menu Bar Horizontal yang disediakan oleh Dreamweaver (dalam tutorial ini digunakan Dreamweaver CS5.5).

Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

  1. Buka file dropdown.php menggunakan Dreamweaver, lalu ubah ke mode Design View (lihat gambar di atas).
  2. Seleksi tulisan “Ini Navigasi” yang ada dalam <div id=”navigasi”> lalu hapus tulisan tersebut. Pastikan kursor Anda masih di dalam area navigasi.
    Java Web Media: Web Design Company in Depok

    Java Web Media: Web Design Company in Depok

  3. Klik menu Insert > Lay Out Objects > Spry Menu Bar
  4. Jendela Spry Menu Bar akan keluar, lalu pilih opsi Horizontal lalu klik OK. Otomatis Dreamweaver akan menambahkan menu Spry Menu Bar Horizontal ke dalam halaman web Anda.
  5. Jika Anda perhatikan, maka di bagian menu Properties (terletak di bagian bawah Workspace Anda), Dreamweaver langsung menampilkan menu pengaturan spry dropdown yang baru saja Anda buat.
  6. Dreamweaver otomatis akan membuat folder SpryAssets di web root Anda yang berisi file-file spry menu bar ini.
Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

Ada beberapa hal yang harus Anda pahami dalam penggunaan Menu Bar Dreamweaver ini, antara lain:
  • Parent, adalah induk utama dari menu
  • Children, adalah anak menu (ini akan menjadi menu drop down)
  • Grand child , adalah sub menu dari menu drop down
  • Text, adalah nama menu yang akan tampil di halaman web
  • Link, adalah alamat website/link yang akan dituju ketika menu diklik. Secara default Dreamweaver akan memberikan link tanda kres/pagar (#). Di sana juga terdapat icon folder yang bisa Anda klik jika linknya adalah file.
  • Title, akan menampilkan pop-up menu
  • Target, adalah arah pembukaan link ketika menu dibuka.
NOTE: Di dalam menu Parent, Children dan Grand children Anda akan melihat ikon  plus/tambah (+) dan minus/kurang (-). Tanda plus untuk menambah menu, submenu dan subsubmenu, sebaliknya tanda plus untuk menghapus atau mengurangi. Di sana Anda juga akan melihat ikon ke arah atas (↑) dan ke arah bawah (↓). Berfungsi untuk mengatur posisi menu, apakah di atas atau di bawah.

 Management dropdown menu dan link

Anda telah memahami fungsi dari masing-masing menu, maka langkah selanjutnya adalah mengatur menu tersebut, berikut adalah langkah-langkahnya:

  1. Pada menu Parent klik pada menu Item 1, lalu pada menu Text Anda akan melihat tulisan Item 1, ubah tulisan tersebut menjadi Home dan link index.php.
    Java Web Media: Web Desin Course in Depok

    Java Web Media: Web Desin Course in Depok

  2. Menu Home memiliki anak/childrean Item 1.1 s/d Item 1.3. Anda tidak membutuhkannya. Klik pada menu Item 1.1 lalu klik ikon minus (-) di atasnya. Hapus ketiga anak/children tersebut dengan mengklik tanda minus.
    Java Web Media: Web Desin Course in Depok

    Java Web Media: Web Desin Course in Depok

  3. Lalu pada menu Item 2, ubah teksnya menjadi Products  dan link: products.php.
    Java Web Media: Web Desin Course in Depok

    Java Web Media: Web Desin Course in Depok

  4. Masih pada parent menu Item 2 yang sudah berubah menjadi Products. Klik pada menu Children, lalu klik ikon plus (+) yang ada di atasnya. Tambahkan menu dan link yang Anda sukai. Dalam contoh ini, submenu/children dari menu Products adalah Web Design dengan link web-design.php, lalu Web Programming dengan link web-prog.php dan Graphic Design dengan link graphic.php.
  5. Lakukan hal sama pada menu Item 3. Ubah sesuai kemauan Anda
    Java Web Media: Web Desin Course in Depok

    Java Web Media: Web Desin Course in Depok

  6. Pada menu Item 4 ubah menjadi Contact Us dengan link contact.php
  7. Simpan kembali hasil pekerjaan Anda. Jika jendela Copy Dependent Files muncul, klik OK.
  8. Lihat hasil pekerjaan Anda
Java Web Media: Web Desin Course in Depok

Java Web Media: Web Desin Course in Depok

Hasil dari dropdown menu yang Anda buat tentu belum memuaskan. Maka langkah selanjutnya adalah mengubah tampilan spry menu bar melalu CSS-nya (disimpan dalam file SpryMenuBarHorizontal.css dalam folder SpryAssets).

Mengubah tampilan Spry Menu Bar

Buka file SpryMenuBarHorizontal.css yang ada dalam folder SpryAssets di web root Anda. Jika Anda menggunakan Dreamweaver CS4 ke atas, maka link file bisa Anda lihat di menu Related Documents.

Java Web Media: Web Desin Course in Depok

Java Web Media: Web Desin Course in Depok

  1. Arahkan kursor Anda pada kode di skitar baris ke-50 pada class ul.MenuBarHorizontal ul. Lalu pada pengaturan width yang semula bernilai 8.2em, ubah menjadi 12.2em. Lakukan hal yang sama pengaturan width di baris ke-62 (pada class ul.MenuBarHorizontal ul li).
    Java Web Media: Web Design Company in Depok

    Java Web Media: Web Design Company in Depok

  2. Lalu pada baris ke-89 Anda akan melihat pengaturan CSS ini (lihat gambar di atas). Lalu ubah sehingga menjadi seperti gambar di bawah:
    Java Web Media: Web Design Company in Depok

    Java Web Media: Web Design Company in Depok

  3. Simpan kembali hasil pekerjaan Anda. Anda telah berhasil membuat drop down menu menggunakan Dreamweaver.
Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok


Berikut ini adalah source final dari tutorial ini (javascript tidak disertakan):

dropdown.php

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Drop Down Menu Tutorial: Java Web Media</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
 <div id="header">
 <h1>Java Web Media</h1>
 <p>Your web solution</p>
 </div>
 <div id="navigasi">
 <ul id="MenuBar1" class="MenuBarHorizontal">
 <li><a href="index.php">Home</a> </li>
 <li><a href="products.php" class="MenuBarItemSubmenu">Products</a>
 <ul>
 <li><a href="web-design.php">Web Design</a></li>
 <li><a href="web-prog.php">Web Programming</a></li>
 <li><a href="graphic.php">Graphic Design</a></li>
 </ul>
 </li>
 <li><a class="MenuBarItemSubmenu" href="client.php">Clients</a>
 <ul>
 <li><a class="MenuBarItemSubmenu" href="corportate.php">Corporate</a>
 <ul>
 <li><a href="fashion.php">Fashion</a></li>
 <li><a href="hospital.php">Hospital</a></li>
 </ul>
 </li>
 <li><a href="#">Personal</a></li>
 <li><a href="organ.php">Organisation</a></li>
 </ul>
 </li>
 <li><a href="contact.php">Contact Us</a></li>
 </ul>
 </div>
 <div id="konten">
 <h1>Java Web Media, Web Design Company Based in Depok</h1>
 <p>Or bends with the remover to remove. Admit impediments; love is not love that looks on tempests and is never shaken; let me not to the marriage of true minds. Love alters not with his brief hours and weeks, within his bending sickle's compass come; it is the star to every wand'ring bark. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark or bends with the remover to remove.</p>
 <p>That looks on tempests and is never shaken; if this be error and upon me proved, I never writ, nor no man ever loved. But bears it out even to the edge of doom. Oh, no, it is an ever fixed mark that looks on tempests and is never shaken; which alters when it alteration finds. Whose worth's unknown, although his height be taken.</p>
 </div>
 <div id="footer"><a href="http://www.javawebmedia.com">Web Design</a> by <a href="http://www.javawebmedia.com">Java Web Media</a></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

SpryMenuBarHorizontal.css

@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font-size: 100%;
 cursor: default;
 width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
 z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font-size: 100%;
 position: relative;
 text-align: left;
 cursor: pointer;
 width: 8em;
 float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font-size: 100%;
 z-index: 1020;
 cursor: default;
 width: 12.2em;
 position: absolute;
 left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
 left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
 width: 12.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
 position: absolute;
 margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
 left: auto;
 top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
 border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
 display: block;
 cursor: pointer;
 background-color: #333;
 padding: 10px 20px;
 height: 20px;
 font-size: 14px;
 color: #FFF;
 text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
 background-color: #33C;
 color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
 background-color: #33C;
 color: #FFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
 background-image: url(SpryMenuBarDown.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
 background-image: url(SpryMenuBarRight.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
 background-image: url(SpryMenuBarDownHover.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
 background-image: url(SpryMenuBarRightHover.gif);
 background-repeat: no-repeat;
 background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
 position: absolute;
 z-index: 1010;
 filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
 ul.MenuBarHorizontal li.MenuBarItemIE
 {
 display: inline;
 f\loat: left;
 background: #FFF;
 }
}

 

  

49 thoughts on “Tutorial Membuat Dropdown Menu (Spry Menu Bar Horizontal) Menggunakan Adobe Dreamweaver

  • July 6, 2012 at 9:05 am
    Permalink

    ini yang saya sudah tunggu tutorialnya

    Reply
  • July 12, 2012 at 4:53 am
    Permalink

    manstab gan lumayan membantu banget gan…
    keep post :)

    Reply
  • August 28, 2012 at 9:07 am
    Permalink

    mau tanya, gimana spry menu yang dibuat itu gx berpengaruh pada obyek lain, sehingga jadi pecah hasilnya. gimana cara pengaturan nya yah?? mohon bantuannya.. ^^

    Reply
  • November 5, 2012 at 6:09 am
    Permalink

    om master tolong tutorial bukin galeri media player buat musik dan video dong .. terimakasih sebelumnya ..

    Reply
  • December 21, 2012 at 6:23 pm
    Permalink

    Makasih tuan bos infonya…

    Tuan bos…tolong minta bantuanya dong…
    kalau mau bikin menu menggunakan gambar, tp kalau krusor di arahkan ke gambar tersebut maka akan tampil seperti menu bar vertical maupun horizontal…itu bagai mana ya Tuan bos…

    kalo bisa kirim ke email saya ya Tuan bos…
    maaf Tuan bos sudah ngerepotin.
    soalnya tugas kuliah nih tuan bos…

    Reply
  • December 23, 2012 at 11:46 am
    Permalink

    ada gak tutorial bikin template nya ?

    Reply
  • February 7, 2013 at 11:36 pm
    Permalink

    keren… sangat bermanfaat

    Reply
  • March 18, 2013 at 10:42 am
    Permalink

    hadeeeeeehhh… !!!!

    BARU KALI INI liat tutorial pembuatan bhs pemrograman website se detil ini …
    saya newbie yg sedang belajar …

    terima kasih tutor nya, SANGAT.. SANGAT.. SANGAAAAAAAT membantu sekali ..

    terus Eksis ya bung ADMIN ..

    di tunggu tutor untuk meminimalkan bug SQL injection ..

    wassalam ..

    Reply
  • April 22, 2013 at 12:48 pm
    Permalink

    mas.. bisa bimbing aku ga hehehe pengen dah buat web yang keren

    Reply
  • April 22, 2013 at 12:49 pm
    Permalink

    arigato mas.. salam sukses buat mas. saya bersyukur ada mas yang share ini jadi bisa belajar dah bikin webnya

    Reply
  • April 29, 2013 at 8:50 am
    Permalink

    gan kenapa pas ane pasang tampilannya malah ngblink-ngblink gitu ya, bisa beri solusinya kirim kealamat email aja ya..

    Reply
  • May 4, 2013 at 6:44 pm
    Permalink

    mas,,
    buku mas ada di jual gk,,??
    tentang web mas..

    Reply
  • October 7, 2013 at 8:24 am
    Permalink

    mas thank bgt ya … besok gw baru mo bikin soalnya … ok

    Reply
  • November 14, 2013 at 12:01 am
    Permalink

    Wahh… Benar” membantu solusi saya
    Mas, bisa tolong kasih tau tutor buat slideshow dan table?
    Biar webny lebih keren
    Tolong kirim ke e-mail gw yah mas, thanks

    Reply
  • December 8, 2013 at 10:15 am
    Permalink

    mas kalo kursus web desain brp ya biayanya,,??

    Reply
  • December 14, 2013 at 11:57 am
    Permalink

    Tnx’s banget brooo…

    Ditunggu tutorialnya lagi nie,

    Reply
  • January 7, 2014 at 4:51 pm
    Permalink

    maaf nanya nich, saya bikin spry menu bar, tapi ketika dikecilkan zoom 33 % kenapa’y ukurannya jadi manjang kebawah, makasih sebelumnya

    Reply
  • February 12, 2014 at 3:52 pm
    Permalink

    malam Mas mas, mba mba.. maaf ni mau nanya.. pas mau buat menu pake submenu spry, kok pas saya buka menu insert koq ga nampil submenu spry ya ? ada yang bisa bantu menemukan dimana submenu spry ini bersembunyi ? saya pakai Macromedia Dreamweaver 8.. terima kasih sebelumnya..

    Reply
  • February 28, 2014 at 2:49 am
    Permalink

    Boleh tanya ga mas??
    Apakah spry menu barnya bs djlankan di dreamwever cc??
    kalau bs gmn dlm menggunakannya???

    trimkasih

    Reply
  • April 7, 2014 at 3:49 am
    Permalink

    bro, saya mau tanya,

    saya menggnakan dreamweaver 8. tapi gak ada menu spraynya.

    download dimanakah mnu spray spaya bisa digunakan di dreamweaver 8?

    Reply
  • April 13, 2014 at 9:53 am
    Permalink

    Appreciate some other insightful site. The site else may possibly I receive that will sort of info printed in a very best approach? I own a quest that we are purely now operating about, we have been receiving the structure available pertaining to similarly info.

    Reply
  • June 30, 2014 at 11:37 pm
    Permalink

    Mas salam kenal mohon pencerahannya, saya sdh ikutin step by step tutorialnya. alhasil waktu saya jalan kan dari browser kok puldown menunya tidak keluar??? kira2 salah dimana ya Mas?? tolong pencerahaanya terima kasih. Salama dari saya Zulimansyah

    Reply
  • July 1, 2014 at 12:07 am
    Permalink

    Saya menggunakan DW CS6, Jadi Waktu sdh kita buat spry menu baru keluar di lembar kerja item1 ada chil nya 3 pulldown menu nah waktu di click tida keluar pulldown menu nya, mohon penjelasan kira2 dimana kesalahannnya, thanks

    Reply
  • July 7, 2014 at 5:49 pm
    Permalink

    I see a lot of interesting content on your page. You
    have to spend a lot of time writing, i know how to save you a lot of
    time, there is a tool that creates unique, SEO friendly articles in couple of seconds,
    just search in google – laranita’s free content source

    Reply
  • August 13, 2014 at 10:17 am
    Permalink

    Hooray! aku bersyukur nyasar di blog ini, makasih banyak tutorialnya bagus sekali, bahkan saya mengembangkan add, edit and delete berita (title-nya aja) untuk dropdown menu(jadi judul menu bisa diolah oleh admin tanpa harus masuk ke codingnya,) tapi yang jadi masalah adalah gimana kalau dropdown menu itu bersarang(sub-item dan sub sub-item) dan judul-judul sub item tersebut bisa di add, edit ataupun di delete. Ketika saya coba gabungkan dua buah coding, (coding untuk judul menu parent dan coding untuk judul menu sub item), menu parent berjumlah 5 dan salah satu item dari menu parent berisi 4 judul, menu parent sukses dengan repeat region-nya, menu sub item juga sukses tapi karena juga menggunakan repeat region maka hasilnya disebarkan ke semua menu parent, sehingga sub item tampil tidak sesuai tujuan, nah adakah cara yang tepat untuk membuat dropdown menu yang bisa di add. edit dan delete dari sebuah halaman tanpa mengolahnya langsung dari coding??? please help me….Akhir kata…you are the best

    Reply
  • August 15, 2014 at 6:27 am
    Permalink

    Hooray! aku bersyukur nyasar di blog ini, makasih banyak tutorialnya bagus sekali, bahkan saya mengembangkan add, edit and delete berita (title-nya aja) untuk dropdown menu(jadi judul menu bisa diolah oleh admin tanpa harus masuk ke codingnya,) tapi yang jadi masalah adalah gimana kalau dropdown menu itu bersarang(sub-item dan sub sub-item) dan judul-judul sub item tersebut bisa di add, edit ataupun di delete. Ketika saya coba gabungkan dua buah coding, (coding untuk judul menu parent dan coding untuk judul menu sub item), menu parent berjumlah 5 dan salah satu item dari menu parent berisi 4 judul, menu parent sukses dengan repeat region-nya, menu sub item juga sukses tapi karena juga menggunakan repeat region maka hasilnya disebarkan ke semua menu parent, sehingga sub item tampil tidak sesuai tujuan, nah adakah cara yang tepat untuk membuat dropdown menu yang bisa di add. edit dan delete dari sebuah halaman tanpa mengolahnya langsung dari coding??? please help me….Akhir kata…you are the best

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Social Widgets powered by AB-WebLog.com.