Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

巧用 CSS 的 Border 属性制作特效菜单

许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮;鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果。你是否也想使网页中的导航菜单产生这种迷人的效果?那么请看下面这个菜单效果。
  鼠标不在菜单上
      
   鼠标在菜单上
    
     上面这种菜单效果的制作思路是这样的:利用 CSS 属性可以动态改变的特点,我们先定义两组 CSS,一组是鼠标不在菜单上的 CSS,另一组是鼠标在菜单上用 的 CSS。再在 onmouseover 和 onmouseout 事件中分别调用不同的 CSS 就能实现本例的效果了。下面讲具体的制作方法:
   1、先作一个 1*4 的表格,在表格中填入菜单名称并设置好链接;
    2、为了使菜单产生立体效果,实际上只要把菜单的上边框线和左边框设置为白色,右边框线和下边框线设置为黑色,就能产生立体效果了。在 Dreamweaver3 中按 F7(或点击快速启动栏里那个象 “八卦图” 似的图标),调出 CSS 面板,选择 “none”,再点击面板下部的编辑图标,在弹 出的“Edit Style Sheet” 对话框上按 “New” 按钮,在弹出的 “New Style” 对话框中选择 “Make Custom Style (class)” 后,在下面的 “Name” 输入框中输入 “.menustyle1”(也就是给要定义的 class 取个名字,注意前面那个小点不要漏了), 按 OK,立即弹出“Style Definition for menustyle1” 对话框,这时就开始定义 CSS 的 “style1” 了。在左边的选择窗口中选择 “Border”,在右边的面板上定义(也是选择), 在“style” 属性中选择 “solid(实线)”;在“Top” 中输入 “1”;然后把“Top”“left” 的颜色定义为 “#FFFFFF”(白色), “bottom”“right” 的颜色定义为 “#000000”(黑色)。到此,“menustyle1” 已全部定义好,按 OK 返回,在 “Edit Style Sheet” 对话框上按 “Done” 按钮结束。我们再用同样的方法定义一个 “menustyle2” 的 CSS,在鼠标移开时用,定义的方法相同,只是在定 义边框线颜色时,把四条边框线的颜色取与菜单背景相同的颜色。在这里顺便讲一下,直接把边框线的宽度设置为“0”,也能达到类似的效果,但整个页面要抖动 一下,效果不好。
   3、为了达到整个菜单条在通常是暗色,鼠标在上面时是明亮色的效果,要设置两个 CSS 的 alpha 滤镜,menustyle3 和 menustyle4,在 Dreamweaver 中设置 CSS 滤镜在方法上与一般的 CSS 设置相同(具体可参看 “CSS 滤镜应用技巧” 专题),只是 “alpha” 滤镜的参数较多, 其实在这里只要其中的一个参数就行了,我在这里给出 CSS 代码,直接加在〈head〉和〈/head〉之间也行。CSS 全部设置好后,在〈head〉和 〈/head〉之间可见到这样的代码:
〈style type="text/css"〉
〈!--
.menustyle1 {border: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF #000000 #000000 #FFFFFF}
.menustyle2 {border:solid;border-width:1px;border-color:#ccccff;}
.menustyle3 {filter:alpha(opacity=60)}
.menustyle4 {filter:alpha(opacity=100)}
.
--〉
〈/style〉
    4、CSS 都做好了,下面开始加载到相应的地方去。我们在源代码中找到第一个菜单项所在的 “〈td〉”,在其中加上这样一行代码:onmouseover ="this.className='menustyle1'" onmouseout="this.className= 'menustyle2'"class="menustyle2",这行代码的作用是当鼠标在这个菜单上时,使用 menustyle1 定义的格式,当鼠标移开时使用 menustyle2 定义的格式,后面那个 class="menustyle2"的作用是当前面两个事件都没有发生时,仍使用 menustyle2 格式, 从而保证了菜单的一致性。对其它菜单项同样也加上这行代码。这样菜单项就能随着鼠标的移动而从立体、平面之间相互转换了。  5、在表格的〈table〉 标记中加上这样一行代码:onmouseover="this.className='menustyle4'"onmouseout="this.className='menustyle3'"class="menustyle3",这行代码的作用与上面类似,只是这里改变的是透明度,从视觉上产生一种明暗程度相互转换的效果。

  到此,制作全部结束,按 F12 看看效果吧!用 Dreamweaver3 自动生成的 CSS 代码稍多一点,若对 CSS 熟悉的话,可直接编写,不是用 Dreamweaver 的网友,也可以把代码直接加在相 应的位置即可。本例旨在抛砖引玉,提出一种方法思路,关键在于灵活应用,就可做出许多特殊效果来,如把菜单项由文本换成图象,效果将大不一样;把边框线的 颜色改一下,就可获得象 Dreamweaver 主菜单那样,当鼠标在菜单项上时,产生凹下去的效果。

 

欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步