Slide from top

2,242 Kb

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

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">
<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=''></script> <script src="js/index.js"></script>

Slide from top - Script Codes CSS Codes

@font-face { font-family: 'Shanti'; font-style: normal; font-weight: 400; src: local('Shanti'), url( 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
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!