下拉菜单是网上最常见到的效果之一，用
鼠标轻轻一点或是移过去，就出现一个更加详细的菜单，它不仅节省了网页排版上的
空间、使网页布局简洁有序，而且一个新颖美观的下拉菜单，更是为您的网页增色不少。
1 E% u: x. z( j8 L9 x/ P3 N 制作下拉菜单的方法多种多样，本期专栏将为您介绍四种常用的制作方法，让您随心打造自己的下拉菜单。
' |+ v8 L7 A6 |( X# L
& N H6 P- |5 `/ |) d% z1 J
$ Z0 U: h8 B: t■ 用dreamweaver制作下拉菜单
: o/ @4 Q5 W/ z( h; c$ m2 F0 N( k& m8 c, A/ H2 H% |
dreamweaver是制作下拉菜单最常用的
工具，方法简单，控制自由，可以最大限度地随心打造菜单样式，是制作下拄菜单的必修课。
$ {6 a0 v% {# H5 E: a
用dreamweaver制作下拉菜单的原理很简单，它利用了behaviors（行为）面板中的内置方法show-hide layers（隐藏-显示层）方法，并用onmouseover（鼠标移至）和onmouseout（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就在层中。
1 q0 c5 n2 T I+ u4 z因此，我们可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单；接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后，我们进行菜单的美化修饰。最终看到的效果如图。
! D5 h) b8 C2 U
6 u+ v# {; D, P4 ^0 j& P
7 w$ B3 ^! y# {$ W+ |8 o4 z
( M6 {/ `3 B& q% O3 A
+ k( l" P9 P, f f& G2 b Z- L# C5 x2 }相信你已经等不急了，那就让我们马上开始吧！
* M5 x7 J, r- f% X. J/ [2 b$ |$ c* \$ u9 U$ ^
5 K& ^3 g. W- i# H: w, E
% _9 E8 ]! h+ O3 k 一、 导航条的制作
" g& f8 B! J' b& @: x b
% c, y$ C7 D% O( s9 {4 k6 j1 w. d- b. C. g; }( m
首先进行一些必要的前期工作，按ctrl+j，打开page properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。
# B$ u/ o+ M- {& S4 t$ O$ M
& I* e* X- }7 C+ D% g# k$ a
, q3 W2 E$ O8 r7 I0 h/ x5 C# `7 u. n/ ^
2 U( d* `5 S4 w1 k# n
6 _6 J6 D: Z7 {
; u/ P+ u+ U s+ T 按ctrl+f2打开objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的properties（属性）面板中设置各参数，layer id框填入title，l、t、w、h框分别填入8、15、480、15，背景色填入#006699，如图。
9 x7 h/ ?8 v6 h0 s
. C/ r' n0 \8 Y% F
, F, k- f" j* t# t8 J
5 g) e* M8 b: v9 e2 d- }) P, s7 Q
0 p" @0 A, J7 g' s. v, f; W- b- T
1 ~: T | E2 Z2 S2 p
将光标移至层内，点击objects面板上的表格按钮，插入一个一行四列的表格，设置如图。
9 v, k& g0 P! s$ ?% n, R5 n$ u) E. M: y
( T1 a' G3 U1 q" B, Y3 g
_( l; L$ K# I$ }, y+ y
) q4 ]2 H* _% @; Q
1 \- C0 H) [4 D
按住ctrl键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用"经典论坛"和"天极网"为例，并加上链接。
. k% I3 M1 D% G/ \$ |
v. ]$ K$ s1 R! \ J$ P! \3 h4 S7 F8 I+ v
" I. v! B# C/ l0 f( S! R! `( `# l O, n$ i8 }+ e
9 H4 n# p: H- g& y
二、 下拉选单的制作
: B' y* L3 \3 ]' z% [" a, B% G6 e' F. J' n: U/ n$ P' r
, j( c) I& a) }& s/ w, x7 f) {+ _& ? 现在开始制作将要下拉出现的菜单，同样用层来制作。
9 t1 s: k$ J1 F: M' W- w0 g7 C
再次从objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：layer id框填入menu1，l、t、w、h框分别填入8、34、120、80，背景色填入#999966，其中l和t两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
+ R# l" T: A4 M r0 d4 N& ?
$ ~9 M/ @" ?# E9 W) j {
( G0 \* {- J; t8 a/ ~9 ]
3 G6 r; L0 {0 }8 J" Q9 u6 i k
8 y9 h# o- D' y% h- `/ y# `) N! T# _
这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为"经典论坛"的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为"天极网"也做一个下拉选单（层menu2）。
/ |+ a5 L8 I7 Q. ?) O9 X5 z7 a
2 ?. u* X. m; H$ C: p6 C# S4 _5 c, q" Z6 H5 p; q/ J9 Y: f
( ^2 c( O* J. b# R9 J0 a: l
1 [5 \9 L' R- t% K2 s) Z( [& C
. y9 W) d- V) I& |# a# n. f 这一步要注意的地方就是下拉选单所在的层（menu1、menu2）的位置非常重要（由l和t两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。
" k: _' J8 _1 j/ a) N按f2打开layer（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。
2 W: C# m1 g- r0 e5 f! P" r- S, O; X& A0 w. `
% @0 x4 Q/ j L 三、 显示和隐藏效果的添加
`& q% E2 e/ I' R$ c
4 X2 F- q( v3 ~4 J' a" g8 ]' d; @1 m: v' f" P& H
这一步骤是化腐朽为神奇的关键一步，大家仔细跟我来做。
9 T+ E' u6 t2 @: y本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。
8 n( z) j! n) z- B! Y
6 ]* m Q+ w& b9 x2 S- g, E
* J+ R& {& q" x# D$ C& i2 K 1．导航条部分
% k4 |7 a1 D6 Z- T! k首先按ctrl键不放点击导航条中的第一个单元格，现按shift+f3打开behaviors窗口，点按钮，在下拉选项中选中"show-hide layers"（如图）。如果选项中没有这一项，则选择show events for下的ie 5.0后，重新点 按钮，此时"show-hide layers"将出现。
, D; ?# I) }, q) \* h( f! G: \6 A
+ c9 H. |3 B- e) C: a) e9 a
& A: U- L! B& q7 R
% K# ^5 B$ ^. h6 M8 C7 ^
/ _' {: S6 h2 a0 F! W
z6 @4 v4 H) N7 i. W5 W3 N" w
) Y4 d8 k4 ~. Q5 b5 x
9 R) F5 Q* q9 ]" ~3 C4 @
' h/ m# g" d7 n; h/ e5 B ]& I 这时将会弹出一个窗口，如下图。在named layers框中会列出当前网页所有的层，选中" layer "menu1" "，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮，ok。
0 z* [) n2 l' T4 t, ~5 w- @* D
% r0 o" C' L% F5 D" j
8 W" l; h2 t' p; N3 b9 X7 C' H/ A( ? c# \$ M' q- G2 b
" F& E- l! K# [! A& k# w6 l 这时会回到behaviors窗口，窗口中出现如下图所示字样，点击events下的文字"onclick"，会出现一个向下的小箭头，点击它，在下拉选项中选中onmouseover。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（show）。
5 L5 F/ Q' j2 k, z- i
5 t7 C- q; U7 k" D# W! _+ H/ G! p8 \6 L2 E
6 g! `+ h& z }- V$ q3 X% h* Q/ b3 u* e0 U7 j/ T
, C/ _" M. ~8 m8 j2 \7 O8 O7 T
下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。
' J' }- q6 N4 {3 e/ e8 ~ b7 E
再点按钮，在下拉选项中选中"show-hide layers"，在弹出窗口中选中" layer "menu1" "，因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"hide"按钮，ok。
! f' k3 S/ j( f
: g7 R3 x: x7 z
6 W0 |% ?% v2 V7 l. g* x M4 n
" f# p9 b' |2 P4 {
4 W& O& z! z s% _! o# j& W o& Q. _
回到behaviors窗口，点击向下的小箭头，在下拉选项中选中onmouseout。
( V }* D$ a! i) l
) h9 I x# Z$ L2 r' D0 \
& J* ?/ t( ?" q2 E 2．下拉选单部分
( m8 C+ O) j1 c/ X
先选中层menu1，方法是点击层的边缘或在layer面板中点击menu1，用与导航条部分同样的方法在behaviors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的状态如图所示。
& i, D0 X, H5 |5 `. A8 _- h8 W( [+ |% n, k! F" a3 e: h
$ k, u2 D5 X% v$ G" j8 H
2 j% l' P: b/ ]1 `* X% |0 ?) K8 P( U) c* ^: N) j% |" C
, R+ K; q7 Z t* H: K
3．重复以上两部分，为导航条的第二个主菜单"天极网"和层menu2添加显示、隐藏层命令。
' v1 j u0 m5 n' T5 u9 Y( H% u4 i+ l8 x
* x- q& O1 n3 I5 x7 i! l" q& ^
& ~$ ]2 ^/ i+ r1 O 四、 下拉菜单的美化修饰
; V7 z0 M2 t# E" V% H8 B- q
2 [* s+ B5 j3 n+ o+ i1 V/ q m' M% K7 x! I
到这里，下拉菜单的功能效果已经实现了，你现在按f12就可以看到。不过你一定也发现菜单有点难看，字不够精细，菜单选项的默认链接色不好看，菜单也没有边框，那就让我们来稍稍为它美容一下。
1 a q% b* X; t; R/ W
1．定义菜单字体样式
" x6 L, }4 x8 {' c% [* T
按shift+f11打开css style（样式）面板，点击面板下面的按钮
: {8 d1 O6 \/ s% C; \
% F: H- k1 q2 c3 }5 a! A
在弹出的"new style"窗的tag框内选中td标签，type选第二项redefine html tag，define选this document only，如图。
- m% ]7 l0 f. d! y( j. n! R( b: c
+ u; x, M9 c) Z" d, ~" E2 g
! F% [ ]6 ?7 r4 ?7 h, V
+ i" T1 w" J2 x! s0 M
. ]/ u i8 B. G+ g c0 Z
" n2 ^* Y# Y* v$ W. A; H- s 此时弹出设置窗口，不管其它的，只在右边的size框里选中12，单位为pixels。
- f v3 w+ w# q5 {8 @4 F4 x" T
9 j6 o2 _! J3 p. P
% X% h! X5 n7 s
# ?: i2 `1 E; P1 T1 z
- `9 N, L2 ^9 J' c
7 }; X4 X) x) X! O6 Y0 m8 O 2．定义菜单链接样式
( z3 e9 a- D# t
在样式面板中，点击面板下面的 按钮，在弹出窗中， type选第三项use css selector，tag框内选中a:hover标签，define选this document only，如图。
- v" k1 m: o o( x1 v s
+ Y/ R1 G' N: y) k/ V0 f: t6 V9 a% T
& s" U" j G( D
# P* i. [8 D: ]% s. Q: P- ^
9 d! e3 B9 I: {0 ~/ F$ A
: `. H, Y6 Y' P9 ?5 u, r 点击ok后在弹出窗中，color填#ff9933，decoration选none，点ok。
8 Q4 K7 K5 y9 [
. w5 @( ~, P) }+ o7 K
/ ^# N' G' s" P& c
1 ]" G$ Q& T% q3 t" c/ M9 q
' p. Y( B' Z: p
; d; u5 h4 {/ W% E, T+ I. |* l7 x 返回到样式面板，点击面板下面的按钮，在弹出窗中， type选第三项use css selector，tag框内选中a:link标签，define选this document only。
3 }: x4 E; h% D6 g0 R; ~
' I2 e# b! Z0 u, i/ b3 y点击ok后在弹出窗中，color填#ffffff，decoration选none，点ok。
+ X* m! u* g9 ^& N/ V
, @- _. K% s2 B# W
3 B0 L5 ]- @ F5 G: Z- j
又返回到样式面板，点击面板下面的按钮，在弹出窗中， type选第三项use css selector，tag框内选中a:visited标签，define选this document only。
1 L( u+ E- l6 r' @- i. y
点击ok后在弹出窗中，color填#ffffff，decoration选none，点ok。
6 c) g" P( Q. Z! T* H0 V
" U/ p$ ^$ J$ j
* z$ z6 `0 S; h; L2 c A- K 3．定义菜单边框样式
) F1 F6 B1 Y5 f+ _
在样式面板中，点击面板下面的 按钮，在弹出窗中， tag框内选中td标签，type选第二项redefine html tag，define选this document only，如图。
6 G+ ^$ L' Q& q& B2 y, A0 }+ v
0 ]: `; Y& n& u0 t: W8 i
- R- N) u! J/ k% N, q
% R" \7 U! a8 U0 q$ [0 w/ p! y: X) I5 J* ^8 L7 [) d
& B& F5 G w& k 弹出设置窗口，在左边的列表中选border，右边四条边宽度都输入为1，颜色设为黑色#000000，style选为solid。
; a5 l6 }& m2 m7 ~+ h$ h8 }
7 Y/ f/ \, L0 i7 Z K/ c* o8 V( }, p& I$ Y5 ^2 Q
" x0 T+ W: z4 J6 f/ t# }+ K
/ ?7 b4 C3 ?- b$ T4 K$ O1 i, w
+ B" M; c. `/ b( q+ u: s9 K2 E 到此，我们就大告成功了。赶快用到你的网页上去吧。
' Z' C+ j0 ], e8 H/ ?
2 }7 [/ H3 g( f8 \% `
) g+ P; @* K9 V! K q
下一篇我们将讲如何用fireworks来制作下拉菜单。
