divcss2014-08-22 07:22:07 7193
HTML5Canvas Jquery实现菜单导航,利用Canvas画出了左边的3D效果,Jquery做切换时的动态效果。查看示例演示时确保您的浏览器支持Canvas元素。
css
#menuMain{ float: left; margin: 20px 0 0 100px; } #menuLeft { width: 200px; float: left; border: 1px solid #ccc; background-color: #efefef; } #menuRight{ float:left; width: 350px; height:335px; float: left; border: 1px solid #ccc; background-color: #efefef; } #menuLeft>ul>li, #menuLeft>ul { margin: 0; padding: 0; } #menuLeft>ul>li { list-style: none; float:left; } #menuLeft>ul>li>a { float: left; height:46px; padding-top:20px; width: 200px; font: 16px "微软雅黑", Arial, Helvetica, sans-serif; border-bottom: 1px solid #ccc; } #menuLeft>ul>li>a:hover{ color:#ff4400; } #menuLeft>ul>li:nth-child(5)>a{ border-bottom: 1px solid #efefef; } #mark{ position:absolute; z-index:999; margin-left:-20px !important; height:56px; } #mark>a{ height:66px; background-color:#0064c4; color:#fff; float:left; -webkit-box-shadow: -3px 0px 3px #808080; -moz-box-shadow: 3px 0px 3px #808080; box-shadow: 3px 0px 3px #808080; width:100%; } #mCanvas{ float:left; width:20px; height:56px; }
html
HTMLJavascriptJqueryCSSPHP你的浏览器不支持HTML5Canvas,无法演示效果HTML查看源代码
javascript
var CanvasMenu={ Init:function(){ $("#mCanvas").css("height",($("#menuLeft").height()-4)/5 10 "px"); $("#menuRight").css("height",$("#menuLeft").height()); CanvasMenu.Draw(); CanvasMenu.Animate(); }, Draw:function(){ var myCanvas = document.getElementById("mCanvas"); var draw = myCanvas.getContext("2d"); draw.beginPath(); draw.fillStyle = "#0064c4"; draw.fillRect(0,0,10, 61); draw.fill(); draw.beginPath(); draw.fillStyle = "#0064c4"; draw.globalAlpha=0.7; draw.moveTo(0, 61); draw.lineTo(10, 61); draw.lineTo(10, 68); draw.fill(); }, Animate:function(){ $("#menuLeft>ul>li>a").click(function(event){ var marginTop=$(event.target).offset().top-168; $("#mark>a").html($(event.target).html()); var currentTop=$("#mark").offset().top-168; if(marginTop==currentTop){ return; } if(marginTop>currentTop){ $("#mark").animate({marginTop:marginTop "px"},200,function(){ $("#mark").animate({marginTop:marginTop-20 "px"},100,function(){ $("#mark").animate({marginTop:marginTop "px"},100); }); });}else{ $("#mark").animate({marginTop:marginTop "px"},200,function(){ $("#mark").animate({marginTop:marginTop 20 "px"},100,function(){ $("#mark").animate({marginTop:marginTop "px"},100); }); }); } }); $("#mark").click(function(event){ event.stopPropagation(); }); } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:HTML5+Jq导航菜单,Canvas导航菜单
文章固定链接:https://www.pengyaou.com/legendsz/front/divcss/MjA=.html
上一篇 网站引入新浪微博登录
下一篇 HTML简单过渡动画