Tutorial Membuat Dropdown Menu (Spry Menu Bar Horizontal)
Menggunakan Adobe Dreamweaver
Java Web Media: Web Design Company in DepokAnda 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 DepokBerikut ini adalah
source code dasar dalam tutorial ini:
Drop Down Menu Tutorial: Java Web Media
Java Web Media Your web solution Ini Navigasi Java Web Media,
Web Design Company Based in Depok 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. 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. Web Design by Java
Web Media
File CSS (style.css) di simpan dalam foldercssbody {
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 HorizontalLangkah
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 Depok1. Buka
filedropdown.phpmenggunakan Dreamweaver, lalu ubah ke modeDesign
View(lihat gambar di atas).2. Seleksi tulisanIni Navigasiyang ada
dalamlalu hapus tulisan tersebut. Pastikan kursor Anda masih di
dalam area navigasi.
Java Web Media: Web Design Company in Depok3. Klik menuInsert
> Lay Out Objects > Spry Menu Bar4. JendelaSpry Menu Barakan
keluar, lalu pilih opsiHorizontallalu klikOK. 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 folderSpryAssetsdi web
root Anda yang berisi file-file spry menu bar ini.
Java Web Media: Web Design Company in DepokAda beberapa hal yang
harus Anda pahami dalam penggunaanMenu BarDreamweaver 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 menuParent,
ChildrendanGrand childrenAnda 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 linkAnda telah memahami fungsi dari
masing-masing menu, maka langkah selanjutnya adalah mengatur menu
tersebut, berikut adalah langkah-langkahnya:1. Pada menuParentklik
pada menuItem 1, lalu pada menuTextAnda akan melihat tulisanItem 1,
ubah tulisan tersebut menjadiHomedan linkindex.php.
Java Web Media: Web Desin Course in Depok2. MenuHomememiliki
anak/childrean Item 1.1 s/d Item 1.3. Anda tidak membutuhkannya.
Klik pada menuItem 1.1lalu klik ikon minus (-) di atasnya. Hapus
ketiga anak/children tersebut dengan mengklik tanda minus.
Java Web Media: Web Desin Course in Depok3. Lalu pada menuItem
2, ubah teksnya menjadiProductsdan link:products.php.
Java Web Media: Web Desin Course in Depok4. Masih pada parent
menuItem 2yang sudah berubah menjadiProducts. Klik pada
menuChildren, lalu klik ikon plus (+) yang ada di atasnya.
Tambahkan menu dan link yang Anda sukai. Dalam contoh ini,
submenu/children dari menuProductsadalahWeb Designdengan link
web-design.php, laluWeb Programmingdengan
linkweb-prog.phpdanGraphic Designdengan link graphic.php.5. Lakukan
hal sama pada menuItem 3. Ubah sesuai kemauan Anda
Java Web Media: Web Desin Course in Depok6. Pada menuItem 4ubah
menjadiContact Usdengan link contact.php7. Simpan kembali hasil
pekerjaan Anda. Jika jendelaCopy Dependent Filesmuncul, klikOK.8.
Lihat hasil pekerjaan Anda
Java Web Media: Web Desin Course in DepokHasil dari dropdown
menu yang Anda buat tentu belum memuaskan. Maka langkah selanjutnya
adalah mengubah tampilan spry menu bar melalu CSS-nya (disimpan
dalam fileSpryMenuBarHorizontal.cssdalam folderSpryAssets).Mengubah
tampilan Spry Menu BarBuka fileSpryMenuBarHorizontal.cssyang ada
dalam folderSpryAssetsdi web root Anda. Jika Anda menggunakan
Dreamweaver CS4 ke atas, maka link file bisa Anda lihat di
menuRelated Documents.
Java Web Media: Web Desin Course in Depok1. Arahkan kursor Anda
pada kode di skitar baris ke-50 pada classul.MenuBarHorizontal ul.
Lalu pada pengaturanwidthyang semula bernilai 8.2em, ubah
menjadi12.2em. Lakukan hal yang sama pengaturan width di baris
ke-62 (pada classul.MenuBarHorizontal ul li).
Java Web Media: Web Design Company in Depok2. 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 Depok3. Simpan kembali
hasil pekerjaan Anda. Anda telah berhasil membuat drop down menu
menggunakan Dreamweaver.
Java Web Media: Web Design Company in Depok
Berikut ini adalah source final dari tutorial ini (javascript
tidak disertakan):dropdown.php
Drop Down Menu Tutorial: Java Web Media
Java Web Media Your web solution
- Home
- Products
- Web Design
- Web Programming
- Graphic Design
- Clients
- Corporate
- Personal
- Organisation
- Contact Us
Java Web Media, Web Design Company Based in Depok 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. 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. Web
Design by Java Web Media
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
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; }}
