This is just like a toggle you can up and down slide using button. This was very useful for login and registration forms. Some case it was very useful to reduce the space from webpages also.
In this toggle view i placed in top of the webpage, but you may place left or right or any place you want using stylesheet code. In this blog we already have the pop out slide using jquery it also like a similar method.
you can also adjust the up and down slide panel size and colors and padding everything using style sheet. This was very simple thing but useful one.
In this toggle view i placed in top of the webpage, but you may place left or right or any place you want using stylesheet code. In this blog we already have the pop out slide using jquery it also like a similar method.
you can also adjust the up and down slide panel size and colors and padding everything using style sheet. This was very simple thing but useful one.
Html code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide up and down using jQuery and css</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="panel">
<br />
<br />
<p>The panel text or login and registraion form goes here....</p>
<p>sanwebcorner.com</p>
</div>
<p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>
<h1>SLIDE UP AND DOWN USING JQUERY AND CSS</h1>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JavaScript
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
});
Style
body {
margin: 0 auto;
padding: 0;
text-align: center;
}
.panel {
background: #fcb415;
background-size: 50% 50%;
height: 200px;
display: none;
font-family: open-sans-serif;
}
.panel p {
text-align: center;
color: white;
}
.slide {
margin: 0;
padding: 0;
}
.pull-me {
display: block;
position: relative;
right: -125px;
width: 150px;
height: 20px;
padding:5px;
font-family: arial, sans-serif;
font-size: 14px;
color: #ffffff;
background: #d00962;
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;
}
.pull-me p {
text-align: center;
}
0 Comments