Slide from top
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 - 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")
});
});
Developer | Diego Ponce |
Username | wifi |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 2,242 Kb |
Views | 62,744 |
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 |
Android Logo with HTML and CSS | 2,000 Kb |
Microsoft Logo | 1,768 Kb |
Minimalist Minion | 2,521 Kb |
Birthday message | 4,285 Kb |
Text Fill | 1,674 Kb |
Basic AngularJS app | 2,069 Kb |
Minimalist Pokeball | 1,517 Kb |
CSS Pokeball | 2,972 Kb |
Push Button | 1,674 Kb |
Spinning Message | 2,722 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 |
Gears | Synvox | 3,278 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Tab Menus | Zephyr | 3,180 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
CSS3 Form | Tusharbandal | 1,836 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!