Slide from top

Developer
Diego Ponce
Size
2,242 Kb
Views
62,713
  1. Slide from top Previews
  2. Slide from top HTML Codes
  3. Slide from top CSS Codes
  4. Slide from top JS Codes

How do I make an slide from top?

A sliding text box working with a button. What is a slide from top? How do you make a slide from top? This script and codes were developed by Diego Ponce on 21 November 2022, Monday.

Slide from top Previews
IQ Test

Slide from top - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide from top</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <title>Slide Panel</title> </head> <body> <div class="panel"> <br /> <br /> <p>Hello there</p> </div> <p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slide from top - Script Codes CSS Codes

@font-face { font-family: 'Shanti'; font-style: normal; font-weight: 400; src: local('Shanti'), url(http://themes.googleusercontent.com/static/fonts/shanti/v4/YXI2DWvNHH4E3kHi_10pZw.woff) format('woff');
}
body { margin:0 auto; padding:0;	width:300px; text-align:center; background-color:#00261f;
}
.panel {	background: #49a394; background-size:90% 90%; height:200px;	display:none; font-family:garamond,times-new-roman,serif; border-top:solid 5px #00705f; border-left:solid 5px #00705f; border-right:solid 5px #00705f;
}
.panel p{ text-align:center; color:#ffffff; font-family: 'Shanti'; font-size:30px; -webkit-text-shadow: 1px 2px 0px #003d33; -moz-text-shadow:1px 2px 0px #003d33; text-shadow: 1px 2px 0px #003d33;
}
.slide {	margin:0;	padding:0;	border-top:solid 5px #00705f;
}
.pull-me {	display:block; position:relative; right:-25px; width:250px; height:60px; padding-top:15px;	font-family: 'Shanti'; font-size:35px;	color:#ffffff; background:#00705f;	text-decoration:none; -moz-border-bottom-left-radius:5px; -moz-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; -webkit-text-shadow: 0px 4px 0px #003d33; -moz-text-shadow:0px 4px 0px #003d33; text-shadow: 0px 4px 0px #003d33; -webkit-box-shadow: 0px 4px 0px #003d33; -moz-box-shadow:0px 4px 0px #003d33; box-shadow: 0px 4px 0px #003d33;
}
.pull-me p { text-align:center;
}

Slide from top - Script Codes JS Codes

$(document).ready(function() {
$(".pull-me").click(function(){ $(".panel").slideToggle("slow")
});
});
Slide from top - Script Codes
Slide from top - Script Codes
Home Page Home
Developer Diego Ponce
Username wifi
Uploaded November 21, 2022
Rating 3
Size 2,242 Kb
Views 62,713
Do you need developer help for Slide from top?

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!

Diego Ponce (wifi) Script Codes
Name
Android Logo with HTML and CSS
Minimalist Pokeball
Microsoft Logo
CSS3 Animated Pacman
Basic AngularJS app
Minimalist Mike Wazowski
Grid animation
Text Fill
Birthday message
Days until Christmas
Create amazing art & images 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!