"Slide Menu form left side"
Bootstrap 3.3.0 Snippet by webenlance

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Slide menu form left side</h2> </div> </div> <div class="slide-out-div"> <a class="handle" href="http://www.webenlance.com">Content</a> <h3>Contact me</h3> <a href="mailto:info@webenlance.com">info@webenlance.com</a><br /><br /> <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p> <p>This can be a form to submit feedback, or contact info</p> </div> <script> $(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', //class of the element that will be your tab pathToTabImage: 'http://placemi.com/xruzn/600x700', //path to the image for the tab (optionaly can be set using css) imageHeight: '122px', //height of tab image imageWidth: '40px', //width of tab image tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left speed: 300, //speed of animation action: 'click', //options: 'click' or 'hover', action to trigger animation topPos: '200px', //position from the top fixedPosition: false //options: true makes it stick(fixed position) on scroll }); }); </script>
.slide-out-div { padding: 20px; width: 250px; background: #f2f2f2; border: #29216d 2px solid; }
(function($){ $.fn.tabSlideOut = function(callerSettings) { var settings = $.extend({ tabHandle: '.handle', speed: 300, action: 'click', tabLocation: 'left', topPos: '200px', leftPos: '20px', fixedPosition: false, positioning: 'absolute', pathToTabImage: null, imageHeight: null, imageWidth: null, onLoadSlideOut: false }, callerSettings||{}); settings.tabHandle = $(settings.tabHandle); var obj = this; if (settings.fixedPosition === true) { settings.positioning = 'fixed'; } else { settings.positioning = 'absolute'; } //ie6 doesn't do well with the fixed option if (document.all && !window.opera && !window.XMLHttpRequest) { settings.positioning = 'absolute'; } //set initial tabHandle css if (settings.pathToTabImage != null) { settings.tabHandle.css({ 'background' : 'url('+settings.pathToTabImage+') no-repeat', 'width' : settings.imageWidth, 'height': settings.imageHeight }); } settings.tabHandle.css({ 'display': 'block', 'textIndent' : '-99999px', 'outline' : 'none', 'position' : 'absolute' }); obj.css({ 'line-height' : '1', 'position' : settings.positioning }); var properties = { containerWidth: parseInt(obj.outerWidth(), 10) + 'px', containerHeight: parseInt(obj.outerHeight(), 10) + 'px', tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px', tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px' }; //set calculated css if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') { obj.css({'left' : settings.leftPos}); settings.tabHandle.css({'right' : 0}); } if(settings.tabLocation === 'top') { obj.css({'top' : '-' + properties.containerHeight}); settings.tabHandle.css({'bottom' : '-' + properties.tabHeight}); } if(settings.tabLocation === 'bottom') { obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'}); settings.tabHandle.css({'top' : '-' + properties.tabHeight}); } if(settings.tabLocation === 'left' || settings.tabLocation === 'right') { obj.css({ 'height' : properties.containerHeight, 'top' : settings.topPos }); settings.tabHandle.css({'top' : 0}); } if(settings.tabLocation === 'left') { obj.css({ 'left': '-' + properties.containerWidth}); settings.tabHandle.css({'right' : '-' + properties.tabWidth}); } if(settings.tabLocation === 'right') { obj.css({ 'right': '-' + properties.containerWidth}); settings.tabHandle.css({'left' : '-' + properties.tabWidth}); $('html').css('overflow-x', 'hidden'); } //functions for animation events settings.tabHandle.click(function(event){ event.preventDefault(); }); var slideIn = function() { if (settings.tabLocation === 'top') { obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open'); } else if (settings.tabLocation === 'left') { obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open'); } else if (settings.tabLocation === 'right') { obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open'); } else if (settings.tabLocation === 'bottom') { obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open'); } }; var slideOut = function() { if (settings.tabLocation == 'top') { obj.animate({top:'-3px'}, settings.speed).addClass('open'); } else if (settings.tabLocation == 'left') { obj.animate({left:'-3px'}, settings.speed).addClass('open'); } else if (settings.tabLocation == 'right') { obj.animate({right:'-3px'}, settings.speed).addClass('open'); } else if (settings.tabLocation == 'bottom') { obj.animate({bottom:'-3px'}, settings.speed).addClass('open'); } }; var clickScreenToClose = function() { obj.click(function(event){ event.stopPropagation(); }); $(document).click(function(){ slideIn(); }); }; var clickAction = function(){ settings.tabHandle.click(function(event){ if (obj.hasClass('open')) { slideIn(); } else { slideOut(); } }); clickScreenToClose(); }; var hoverAction = function(){ obj.hover( function(){ slideOut(); }, function(){ slideIn(); }); settings.tabHandle.click(function(event){ if (obj.hasClass('open')) { slideIn(); } }); clickScreenToClose(); }; var slideOutOnLoad = function(){ slideIn(); setTimeout(slideOut, 500); }; //choose which type of action to bind if (settings.action === 'click') { clickAction(); } if (settings.action === 'hover') { hoverAction(); } if (settings.onLoadSlideOut) { slideOutOnLoad(); }; }; })(jQuery);

Related: See More


Questions / Comments: