你的位置:首页 > Java教程

[Java教程]jQuery+css3侧边栏导航菜单


效果体验:http://hovertree.com/texiao/jquery/37/

代码如下:

<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery和CSS3炫酷按钮点击波特效 - 何问起</title><base target="_blank" /><!--主要样式--><style type="text/css">* {margin: 0;padding: 0;}/*hovertreenav styles*/.hovertreenav ul {background: white;border-top: 6px solid hsl(180, 40%, 60%);width: 200px;margin: 5em auto;}.hovertreenav ul li {list-style-type: none;/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/position: relative;overflow: hidden;}.hovertreenav ul li a {font: normal 14px/28px Montserrat;color: hsl(180, 40%, 40%);display: block;padding: 10px 15px;text-decoration: none;cursor: pointer; /*since the links are dummy without href values*//*prevent text selection*/user-select: none;/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/position: relative;}/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/.hovertreenav .ink {display: block;position: absolute;background: hsl(180, 40%, 80%);border-radius: 100%;transform: scale(0);}/*animation effect*/.hovertreenav .ink.animate {animation: ripple 0.65s linear;}@keyframes ripple {/*scale the element to 250% to safely cover the entire link and fade it out*/100% {opacity: 0;transform: scale(2.5);}}</style><!--[if IE]><script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script><![endif]--></head><body style="background:#D1EFFE;"><div class="hovertreenav"><ul><li><a href="http://hovertree.com">何问起</a></li><li><a href="http://hovertree.com/menu/bootstrap/">Bootstrap</a></li><li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li><li><a href="http://hovertree.com/menu/webfront/">web前端</a></li><li><a href="http://hovertree.com/h/bjaf/kqud99m6.htm">CSS3动画</a></li><li><a href="http://hovertree.com/h/bjaf/mcpnogp6.htm">HTML5红包</a></li><li><a>点我有水波</a></li></ul></div><script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script><script type="text/javascript">//jQuery timevar parent, ink, d, x, y;$(".hover"+"treenav ul li a").click(function(e){parent = $(this).parent();//create .ink element if it doesn't existif(parent.find(".ink").length == 0)parent.prepend("<span class='ink'></span>");ink = parent.find(".ink");//incase of quick double clicks stop the previous animationink.removeClass("animate");//set size of .inkif(!ink.height() && !ink.width()){//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.d = Math.max(parent.outerWidth(), parent.outerHeight());ink.css({height: d, width: d});}//get click coordinates//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;x = e.pageX - parent.offset().left - ink.width()/2;y = e.pageY - parent.offset().top - ink.height()/2;//set the position and add class .animateink.css({top: y+'px', left: x+'px'}).addClass("animate");})</script></body></html>

web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html