我写的类似本站首页左上角的菜单的效果插件,基于MooTools 1.4
2014-08-21 16:51
351 查看
源代码:
效果演示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/24/e7902a1ba0ae8d73f596c32dbda079db.gif)
注意:
我是基于firefox开发的,所以在IE下效果会有所差异,因为我没有在IE下进行调试css样式,如果大家需要使用的时候请自行调试IE下的状况.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> <body> <div class="xMenu"> <a class="xMenuTit" href='#'>完美肌肤</a> <div class="xMenuBox" style="display:none;">完美肌肤<br>完美肌肤</div> </div> <div class="xMenu"> <a class="xMenuTit" href='#'>完美肌肤</a> <div class="xMenuBox" style="display:none;">完美肌肤<br>完美肌肤</div> </div> <div class="xMenu"> <a class="xMenuTit" href='#'>完美肌肤</a> <div class="xMenuBox" style="display:none;">完美肌肤<br>完美肌肤</div> </div> <script type="text/javascript"> $$('.xMenu').addEvents({ 'mouseenter':function(){ xMenu(this,{titcss:'width:300px',boxcss:'font-size:12px;padding:10px;line-height:30px;'}); }, 'mouseleave':function(){ xMenu(this,{close:true}); } }); //菜单 function xMenu(i,o){ o={ tit:o.tit || '.xMenuTit', box:o.box || '.xMenuBox', titcss:o.titcss || '', boxcss:o.boxcss || '', close:o.close || false }; var xMenuTit=i.getElement(o.tit); var xMenuBox=i.getElement(o.box); if(o.close){ xMenuBox.setStyle('display','none'); xMenuTit.erase('style'); return false; } xMenuTit.setStyles({'border':'1px solid #fef8ef','display':'block','height':'28px','padding-left':'22px','overflow':'hidden'}); xMenuBox.setStyles({'position':'absolute','z-index':'999','border':'1px solid #C00','margin-left':'183px'}); if(o && o.titcss){ s=xMenuTit.getProperty('style')+o.titcss; xMenuTit.setProperty('style',s); } if(o && o.boxcss){ s=xMenuBox.getProperty('style')+o.boxcss; xMenuBox.setProperty('style',s); } xMenuBox.setStyle('display','block'); xMenuTit.setStyles({'position':'absolute','width':'161px','border-color':'#C00','border-right':'none','z-index':'1000','background-color':'#fff'}); } </script> </body> </html>
效果演示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/24/e7902a1ba0ae8d73f596c32dbda079db.gif)
注意:
我是基于firefox开发的,所以在IE下效果会有所差异,因为我没有在IE下进行调试css样式,如果大家需要使用的时候请自行调试IE下的状况.
相关文章推荐
- 我写的类似本站首页左上角的菜单的效果插件,基于MooTools 1.4
- 我写的Lightbox效果插件,基于MooTools 1.4
- 我写的Lightbox效果插件,基于MooTools 1.4
- JS基于Mootools实现的个性菜单效果代码
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- jq插件之仿“卓越亚马逊”首页弹出菜单效果
- 位于网页右侧基于MooTools框架的边栏平滑菜单效果
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- 我写的万年历插件(含天干地支,农历,阳历,节气,各种节假日等),基于MooTools 1.4
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- 我写的万年历插件(含天干地支,农历,阳历,节气,各种节假日等),基于MooTools 1.4
- jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
- JS基于Mootools实现的个性菜单效果代码
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- 10 个非常酷的基于jQuery的菜单效果插件
- 基于jQuery的Tab选项框效果代码(插件)
- 10 款基于 jQuery 的切换效果插件推荐
- 前些天写的一jquery首页图片切换插件(额,不知道这种效果叫什么名字)
- 基于Jquery插件开发之图片放大镜效果(仿淘宝)