|
|
|
|
许多应用软件的主菜单都具有这样的效果，通常是暗色的，一旦鼠标移到菜单上，立即变明亮；鼠标不在菜单上时是平面的，一旦鼠标移到菜单上，菜单条立即变为立体，从而增强了菜单的效果。你是否也想使网页中的导航菜单产生这种迷人的效果？就象上面的菜单效果？
制作思路：利用CSS属性可以动态改变的特点，我们先定义两组CSS，一组是鼠标不在菜单上的CSS，另一组是鼠标在菜单上用的CSS。再在＆#111nmouseover和＆#111nmouseout事件中分别调用不同的CSS就能实现本例的效果了。
制作方法：
1、先作一个1*4的表格，在表格中填入菜单名称并设置好链接；
2、为了达到整个菜单条在通常是暗色，鼠标在上面时是明亮色的效果，要设置两个CSS的alpha滤镜，直接加在<head>和</head>之间：
<style type="text/css">
<!--
.menustyle1 { border: solid; border-width: 3px 3px 3px 3px; border-color: #ff00ff #00ff00 #ff0000 #0000ff}
.menustyle2 {border:solid;border-width:1px;border-color:#ccccff;}
.menustyle3 {filter:alpha(opacity=60)}
.menustyle4 {filter:alpha(opacity=100)}
.
-->
</style>
3、将效果源代码加载到相应的地方，可在第一个菜单项所在的“<td>”中加上这样一行代码：
<td ＆#111nmouseover="this.className=’menustyle1’" ＆#111nmouseout="this.className= ’menustyle2’" class="menustyle2">
作用是当鼠标在这个菜单上时，使用menustyle1定义的格式，当鼠标移开时使用menustyle2定义的格式，后面那个class="menustyle2"的作用是当前面两个事件都没有发生时，仍使用menustyle2格式，从而保证了菜单的一致性。对其它菜单项同样也加上这行代码。这样菜单项就能随着鼠标的移动而从立体、平面之间相互转换了。
4、在表格的<table>标记中加上这样一行代码：
<table border="1" ＆#111nmouseover="this.className=’menustyle4’" ＆#111nmouseout="this.className=’menustyle3’" class="menustyle3">
作用与上面类似，只是这里改变的是透明度，从视觉上产生一种明暗程度相互转换的效果；设置border="1"是为了对比效果。
如把菜单项由文本换成图象，效果将大不一样；把边框线的颜色改一下，也将有独特的效果。 |
======全球免费中心版权声明(本站从09-4-29开始加强免费资源版权管理)=========
不管出于何目的转载本文，请注明版权信息(包括来源和作者)，否则一经发现将逐个处理。
若本站转了您的信息而未标明或标错或未找到出处而没标明的，请联系我们，2天内处理。
闽公网安备 35052402000110号