Sliding Panel Menu using jQuery

Developer
AxeLVaisper
Size
4,309 Kb
Views
22,264
  1. Sliding Panel Menu using jQuery Previews
  2. Sliding Panel Menu using jQuery HTML Codes
  3. Sliding Panel Menu using jQuery CSS Codes
  4. Sliding Panel Menu using jQuery JS Codes

How do I make an sliding panel menu using jquery?

10 seconds after hiding. What is a sliding panel menu using jquery? How do you make a sliding panel menu using jquery? This script and codes were developed by AxeLVaisper on 09 November 2022, Wednesday.

Sliding Panel Menu using jQuery Previews
IQ Test

Sliding Panel Menu using jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding Panel Menu using jQuery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*****SLIDING MENU PANEL STYLESHEET*****/
/*****BY: AMIT JAKHU*****/
/*****FONTS*****/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700italic,700,300italic,300|Acme); /* Acme font is required for .arrow */
/*****END FONTS*****/
/*****DEMO ONLY*****/
::selection {	color: #fff;	background: #ec6912;
}
::-moz-selection {	color: #fff;	background: #ec6912;
}
* {	margin: 0;	padding: 0;	border: none;
}
body {	background: url(retina_dust.png) repeat #d3d7dc;	font: normal 400 14px/21px 'Source Sans Pro', Helvetica, Arial, sans-serif;	color: #464851;
}
h1 {	font: normal 48px/56px 'BebasNeueRegular', Helvetica, Arial, sans-serif;	color:#ee4e1d;	text-shadow: 1px 1px 0 #f2f2e5, 1px 2px 0 #aaa;	margin-bottom: 30px;
}
p {	text-shadow: 1px 1px 0 rgba(255,255,255,0.75);	margin-bottom: 20px;
}
strong {	font-weight: 700;
}
.wrapper {	background: #f3f3f3;	border: 10px solid #9cb925;	width: 40%;	padding: 50px 40px;	margin: 0 auto;	position: relative;	top: 100px;	text-align:center;	clear: both;	box-shadow: 2px 3px 13px rgba(0,0,0,0.25);	-moz-box-shadow: 2px 3px 13px rgba(0,0,0,0.25);	-webkit-box-shadow: 2px 3px 13px rgba(0,0,0,0.25);	border-radius: 10px;	-moz-border-radius: 10px;	-webkit-border-radius: 10px;
}
.download {	display: block;	position: absolute;	float: right;	right: 25px;	bottom: 25px;	padding: 5px;	font-weight: 700;	font-size: 12px;	text-align: right;	text-decoration: none;	color: rgba(0,0,0,0.5);	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.download:hover {	color: rgba(0,0,0,0.75);	text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:focus {	bottom: 24px;
}
/*****END DEMO ONLY*****/
/*****ANIMATONS (optional)*****/
#menu, #menu .arrow, #menu nav a {	transition: all 0.4s;	-o-transition: all 0.4s;	-moz-transition: all 0.4s;	-webkit-transition: all 0.4s;
}
/*****END ANIMATONS*****/
/*****PANEL*****/
#menu {	background: #9cb925;	border-right: 3px solid #ee4e1d;	width: 100px;	padding: 30px;	position: fixed;	z-index: 100000;	box-shadow: 4px 0 10px rgba(0,0,0,0.25);	-moz-box-shadow: 4px 0 10px rgba(0,0,0,0.25);	-webkit-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
}
#menu {	left: 0; /* Change to right: 0; if you want the panel to display on the right side. */
}
#menu:hover, #menu:focus {	left: 0 !important; /* Change to right: 0 !important; if you want the panel to display on the right side. */
}
#menu .arrow {	right: 2px; /* Change to left: 2px; if you want the panel to display on the right side. */
}
#menu .arrow {	font: normal 400 25px/25px 'Acme', Helvetica, Arial, sans-serif; /* Acme font is required for .arrow */	color: rgba(0,0,0,0.75); /* Arrow color */	width: 16px;	height: 25px;	display: block;	position: absolute;	top: 20px;	cursor: default;
}
#menu:hover .arrow {	transform: rotate(-180deg) translate(6px,-3px);	-moz-transform: rotate(-180deg) translate(6px,-3px);	-webkit-transform: rotate(-180deg) translate(6px,-3px);
}
#menu nav {	position: relative;	top: 75px;
}
#menu nav a {	padding: 10px 5px;	border-bottom: 1px dotted #c0c0c0;	display: block;	clear: both;	font: bold 13px/18px 'Open Sans', Helvetica, Arial, sans-serif;	color: #fff;	text-decoration: none;
}
#menu nav a:hover {	color: #ee4e1d;
}
/*****END PANEL*****/ </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="menu">
<div class="arrow"><</div>
<nav>
<a href="#">Home</a>
<a href="#">An introduction: Design in 2012</a>
<a href="#">Relevant figures in design</a>
<a href="#">Where is design heading?</a>
<a href="#">Influences</a>
<a href="#">Video</a>
<a href="#">Sources</a>
</nav>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sliding Panel Menu using jQuery - Script Codes CSS Codes

/*****SLIDING MENU PANEL STYLESHEET*****/
/*****BY: AMIT JAKHU*****/
/*****FONTS*****/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700italic,700,300italic,300|Acme); /* Acme font is required for .arrow */
/*****END FONTS*****/
/*****DEMO ONLY*****/
::selection {	color: #fff;	background: #ec6912;
}
::-moz-selection {	color: #fff;	background: #ec6912;
}
* {	margin: 0;	padding: 0;	border: none;
}
body {	background: url(retina_dust.png) repeat #d3d7dc;	font: normal 400 14px/21px 'Source Sans Pro', Helvetica, Arial, sans-serif;	color: #464851;
}
h1 {	font: normal 48px/56px 'BebasNeueRegular', Helvetica, Arial, sans-serif;	color:#ee4e1d;	text-shadow: 1px 1px 0 #f2f2e5, 1px 2px 0 #aaa;	margin-bottom: 30px;
}
p {	text-shadow: 1px 1px 0 rgba(255,255,255,0.75);	margin-bottom: 20px;
}
strong {	font-weight: 700;
}
.wrapper {	background: #f3f3f3;	border: 10px solid #9cb925;	width: 40%;	padding: 50px 40px;	margin: 0 auto;	position: relative;	top: 100px;	text-align:center;	clear: both;	box-shadow: 2px 3px 13px rgba(0,0,0,0.25);	-moz-box-shadow: 2px 3px 13px rgba(0,0,0,0.25);	-webkit-box-shadow: 2px 3px 13px rgba(0,0,0,0.25);	border-radius: 10px;	-moz-border-radius: 10px;	-webkit-border-radius: 10px;
}
.download {	display: block;	position: absolute;	float: right;	right: 25px;	bottom: 25px;	padding: 5px;	font-weight: 700;	font-size: 12px;	text-align: right;	text-decoration: none;	color: rgba(0,0,0,0.5);	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.download:hover {	color: rgba(0,0,0,0.75);	text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:focus {	bottom: 24px;
}
/*****END DEMO ONLY*****/
/*****ANIMATONS (optional)*****/
#menu, #menu .arrow, #menu nav a {	transition: all 0.4s;	-o-transition: all 0.4s;	-moz-transition: all 0.4s;	-webkit-transition: all 0.4s;
}
/*****END ANIMATONS*****/
/*****PANEL*****/
#menu {	background: #9cb925;	border-right: 3px solid #ee4e1d;	width: 100px;	padding: 30px;	position: fixed;	z-index: 100000;	box-shadow: 4px 0 10px rgba(0,0,0,0.25);	-moz-box-shadow: 4px 0 10px rgba(0,0,0,0.25);	-webkit-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
}
#menu {	left: 0; /* Change to right: 0; if you want the panel to display on the right side. */
}
#menu:hover, #menu:focus {	left: 0 !important; /* Change to right: 0 !important; if you want the panel to display on the right side. */
}
#menu .arrow {	right: 2px; /* Change to left: 2px; if you want the panel to display on the right side. */
}
#menu .arrow {	font: normal 400 25px/25px 'Acme', Helvetica, Arial, sans-serif; /* Acme font is required for .arrow */	color: rgba(0,0,0,0.75); /* Arrow color */	width: 16px;	height: 25px;	display: block;	position: absolute;	top: 20px;	cursor: default;
}
#menu:hover .arrow {	transform: rotate(-180deg) translate(6px,-3px);	-moz-transform: rotate(-180deg) translate(6px,-3px);	-webkit-transform: rotate(-180deg) translate(6px,-3px);
}
#menu nav {	position: relative;	top: 75px;
}
#menu nav a {	padding: 10px 5px;	border-bottom: 1px dotted #c0c0c0;	display: block;	clear: both;	font: bold 13px/18px 'Open Sans', Helvetica, Arial, sans-serif;	color: #fff;	text-decoration: none;
}
#menu nav a:hover {	color: #ee4e1d;
}
/*****END PANEL*****/

Sliding Panel Menu using jQuery - Script Codes JS Codes

$(document).ready(function() {	$("#menu").height($(document).height());
});
$(document).ready(function() { setTimeout( function(){$('#menu').css('left','-130px');},10000); <!-- Change 'left' to 'right' for panel to appear to the right -->
});
$(document).ready(function(){
$(".divClass .deleteDiv").click(function(){
$(this).parents(".divClass").animate({ opacity: 'hide' }, "slow");
});
});
Sliding Panel Menu using jQuery - Script Codes
Sliding Panel Menu using jQuery - Script Codes
Home Page Home
Developer AxeLVaisper
Username AxeLVaisper
Uploaded November 09, 2022
Rating 3.5
Size 4,309 Kb
Views 22,264
Do you need developer help for Sliding Panel Menu using jQuery?

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!

AxeLVaisper (AxeLVaisper) Script Codes
Name
Icofont hover effects
3D accordion
Metro KIT UI
Tabs with Round Out Borders
Ribbons
Apple navbar
Slider in only css
Mini Admin panel
Mail anim
Funny menu
Create amazing love letters with AI!

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!