Slide In Panel
How do I make an slide in panel?
Simple jQuery Slide In Panel. What is a slide in panel? How do you make a slide in panel? This script and codes were developed by Fabio Mangolini on 15 August 2022, Monday.
Slide In Panel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide In Panel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- SlidePanel --> <div id="slidein-panel"> <!-- SlidePanel Button Container --> <div id="slidein-panel-container"> <a id="slidein-panel-btn" href="#"></a> </div> <!-- /SlidePanel Button Container --> <!-- SlidePanel Content --> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul> <!-- /SlidePanel Content --> </div> <!-- /SlidePanel --> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.SlidePanel({'openSymbol': '+', 'closeSymbol': 'x', 'panelWidth': 200}); }); </script> <script src="js/index.js"></script>
</body>
</html>
Slide In Panel - Script Codes CSS Codes
/************************************************* SlidePanel CSS @author Fabio Mangolini http://www.responsivewebmobile.com
**************************************************/
body { background-color: #444444;
}
#slidein-panel { margin: 0; padding: 0; background-color: #333333;
}
#slidein-panel ul { margin: 0; padding: 0; list-style-type: none;
}
#slidein-panel ul li { background-color: #333333; display: block; margin-bottom: 1px; border-bottom: 1px solid #393939; border-top: 1px solid #4E4E4E;
}
#slidein-panel ul li a:link,
#slidein-panel ul li a:visited { display: block; text-decoration: none; color: #999; padding: 10px; text-shadow: 2px 2px 2px #999999; font-size: 12px;
}
#slidein-panel ul li:hover { background-color: #222222;
}
#slidein-panel-container { position: relative;
}
#slidein-panel-container a:link,
#slidein-panel-container a:visited { box-shadow: 2px 2px 2px #666666; border-top: 1px solid #4E4E4E; background-color: #333333; color: #FFFFFF; display: block; text-align: center; text-decoration: none; -webkit-transition-property: background color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: ease; -moz-transition-property: background color; -moz-transition-duration: .5s; -moz-transition-timing-function: ease; -o-transition-property: background color; -o-transition-duration: .5s; -o-transition-timing-function: ease; -ms-transition-property: background color; -ms-transition-duration: .5s; -ms-transition-timing-function: ease; transition-property: background color; transition-duration: .5s; transition-timing-function: ease;
}
#slidein-panel-container a:hover { background-color: #666666;
}
Slide In Panel - Script Codes JS Codes
/************************************************* SlidePanel JS @author Fabio Mangolini http://www.responsivewebmobile.com
**************************************************/
(function($) { $.SlidePanel = function(options) { //default status is closed var status = 'close'; var settings = $.extend({ // These are the defaults. btnWidth: 50, btnHeight: 50, panelWidth: 150, panelHeight: $(window).height(), openSymbol: '+', closeSymbol: 'x' }, options ); //initialize the panel show/hide button $('#slidein-panel-btn').css({'width':settings.btnWidth+'px', 'height':settings.btnHeight+'px', 'line-height':settings.btnHeight+'px', 'position': 'absolute', 'top': 0, 'right':-(settings.btnWidth)+'px', 'text-align': 'center'}); $('#slidein-panel-btn').html(settings.openSymbol); //initialize the panel $('#slidein-panel').css({'width': settings.panelWidth, 'height': settings.panelHeight, 'position': 'absolute', 'top': 0, 'left': -(settings.panelWidth)}); //show and hide the panel depending on status $('#slidein-panel-btn').click( function() { if(status == 'close') { status = 'open'; $('#slidein-panel').animate({'left':0}); $('#slidein-panel-btn').animate({'right':-(settings.btnWidth/2)+'px', 'width':settings.btnWidth/2+'px', 'height':settings.btnHeight/2+'px', 'line-height': settings.btnHeight/2+'px'}, 'slow', function() { $('#slidein-panel-btn').html(settings.closeSymbol); }); } else if(status == 'open') { status = 'close'; $('#slidein-panel').animate({'left':-(settings.panelWidth)}); $('#slidein-panel-btn').animate({'right':-(settings.btnWidth)+'px', 'width':settings.btnWidth+'px', 'height':settings.btnHeight+'px', 'line-height': settings.btnHeight+'px'}, 'fast', function() { $('#slidein-panel-btn').html(settings.openSymbol); }); } } ); };
})(jQuery);
Developer | Fabio Mangolini |
Username | vikvarg |
Uploaded | August 15, 2022 |
Rating | 3 |
Size | 2,811 Kb |
Views | 34,408 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS3 Mac Book Pro | 1,791 Kb |
45 Degree | 1,708 Kb |
CSS3 Book | 2,131 Kb |
CSS3 iPad | 1,766 Kb |
A Pen by Fabio Mangolini | 1,530 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Mostly Fluid | Mccreath | 3,308 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Em Test | Rodesco | 1,784 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Flip test | Madhes | 1,635 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!