navigation mit wander button

Der bBorder bewegt sich immer dahin wo die Maus gerade ist

Der hier verwendete Code

<!DOCTYPE HTML> <html> <head> <title>Lava Lamp Menu Demo</title> <style> ul{ display:flex; height: 29px; width: 80%; padding: 15px; overflow: hidden; border: 1px solid gray; } .lavaLampBottomStyle li { list-style: none; flex: 1; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .lavaLampBottomStyle li.back { border-bottom: 5px solid blue; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLampBottomStyle li a { font: bold 14px arial; text-decoration: none; color: #000; text-align: center; } .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited { border: none; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}}; (function($) { $.fn.lavaLamp = function(o) { o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {}); return this.each(function() { var me = $(this), noop = function(){}, $back = $('<li class="back"><div class="left"></div></li>').appendTo(me), $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0]; $li.not(".back").hover(function() { move(this); }, noop); $(this).hover(noop, function() { move(curr); }); $li.click(function(e) { setCurr(this); return o.click.apply(this, [e, this]); }); setCurr(curr); function setCurr(el) { $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" }); curr = el; }; function move(el) { $back.each(function() { $(this).dequeue(); } ).animate({ width: el.offsetWidth, left: el.offsetLeft }, o.speed, o.fx); }; }); }; })(jQuery); </script> <script> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script> </head> <h3>Bottom Style</h3> <ul class="lavaLampBottomStyle" id="3"> <li class="current"><a href="#">Home</a></li> <li><a href="#">Plant a tree</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Ride an elephant</a></li> </ul> </body></html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!