| ||||
许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮;鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果。你是否也想使网页中的导航菜单产生这种迷人的效果?就象上面的菜单效果? 制作思路:利用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"是为了对比效果。 如把菜单项由文本换成图象,效果将大不一样;把边框线的颜色改一下,也将有独特的效果。 |
阅读4624次,0次(顶一下)