html - Change direction of jquery slide menu from left to right -
i change direction of slide left right when clicking on "main menu link". direction how when clicking other links. want change direction "main menu link".
http://jsfiddle.net/l7v0w96s/10/
jquery(function($) { $('a.panel').click(function() { var $target = $($(this).attr('href')), $other = $target.siblings('.active'); if (!$target.hasclass('active')) { $other.each(function(index, self) { var $this = $(this); $this.animate({ left: $this.innerwidth() }, 500, function() { $this.removeclass('active') }); }); $target.css({ left: -($target.innerwidth()) }).animate({ left: 0 }, 500).addclass('active'); } }); });
key changes:
html
<a href="#target0" class="panel main">
css
div.panel { box-sizing: border-box; /* prevents boxes being big because of padding */ position: absolute; height: 200px; display: none; padding: 20px; width: 100%; }
javascript - calculate different start , end positions animation, depending on link clicked.
ismain = $(this).is(".main"), mystart = ismain ? 0 : $target.outerwidth() * -1, myend = ismain ? $target.outerwidth() * -1: 0 otherend = ismain ? $other.filter(".active").outerwidth() * -1 : $other.filter(".active").outerwidth();
use calculated values in animation logic
if (!$target.hasclass('active')) { $other.each(function(index, self) { var $this = $(this); $this.animate({ left: otherend }, 500, function() { $this.removeclass('active') }); }); $target.css({ left: mystart }).animate({ left: 0 }, 500).addclass('active'); }
Comments
Post a Comment