快网首页 | wd万达国际娱乐 | 域名注册 | 特惠套餐 | 企业邮局 | SQL空间 | IDC业务 | 全球通邮
用CSS的Border属性制作特效菜单
客服中心 新闻动态 常见问题 常用资料 知识学堂 走近客服 在线提问 网站导航
用CSS的Border属性制作特效菜单
网页设计 | 操作系统 | 程序开发 | Dos 命令 | 平面设计 | 办公软件

 您的位置: 快网首页 >> 客服中心 >> 知识学堂 >> 网页设计 >> 文章正文

用CSS的Border属性制作特效菜单
供稿:润之康   时间:2009-3-18 14:15:19

    许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮;鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果。你是否也想使网页中的导航菜单产生这种迷人的效果?那么请看下面这个菜单效果。
    上面这种菜单效果的制作思路是这样的:利用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="832dd37 menustyle2",这行代码的作用是当鼠标在这个菜单上时,使用menustyle1定义的格式,当鼠标移开时使用menustyle2定义的格式,后面那个class="menustyle2"的作用是当前面两个事件都没有发生时,仍使用menustyle2格式,从而保证了菜单的一致性。对其它菜单项同样也加上这行代码。这样菜单项就能随着鼠标的移动而从立体、平面之间相互转换了。

    5、在表格的〈table〉标记中加上这样一行代码:onmouseover="this.className='menustyle4'" onmouseout="this.className='menustyle3'" class="abcd270 menustyle3",这行代码的作用与上面类似,只是这里改变的是透明度,从视觉上产生一种明暗程度相互转换的效果。

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


快网保留以上说明的最终解释权
快网,域名注册,wd万达国际娱乐,ASP空间,企业邮局,SQL空间,主机租用,主机托管
热门搜索: FTP 域名 DNS 备案 空间 邮箱 SQL 主机 快网 中文域名 wd万达国际娱乐
快网,域名注册,wd万达国际娱乐,ASP空间,企业邮局,SQL空间,主机租用,主机托管
快网客服中心的相关信息:
v 在网页中插入CSS [2009-3-18 14:14:21]
v CSS产生特殊效果 [2009-3-18 14:11:41]
v css改变鼠标显示 [2009-3-18 14:08:26]
v CSS教程_CSS容器属性 [2009-3-18 14:07:20]
v CSS字体属性CSS字体属性 [2009-3-18 14:06:00]
快网,域名注册,wd万达国际娱乐,ASP空间,企业邮局,SQL空间,主机租用,主机托管
快网,域名注册,wd万达国际娱乐,ASP空间,企业邮局,SQL空间,主机租用,主机托管
如果您在使用我们的产品中遇到问题,建议您首先在“常见问题”中查询解决方法;
如果没有找到该问题的解决方法,您可以在“ 问题搜索”中进行搜索;
如果搜索后没有找到满意答案,您可以“在线提问”,我们会尽快给您答复。
快网,域名注册,wd万达国际娱乐,ASP空间,企业邮局,SQL空间,主机租用,主机托管
域名注册查询 中文域名转码
域名whois查询 网站PR值查询
快网,域名注册,wd万达国际娱乐,ASP空间,企业邮局,SQL空间,主机租用,主机托管

:::::: | 收藏本站 | 关于我们 | 客服中心 | 付款方式 | 联系我们 | 网站律师 | 工作机会 | 网站地图 | 产品管理 | ::::::

Copyright (C) 2003-2008 天津追日科技发展有限公司 tyc-yul.top 快网.cn 中国快网.cn