jQuery: I'm Lovin It!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS overlay onload</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
color: #000;
}
a{
cursor: pointer;
}
img{
border: 0;
}
.sliderWrap {
margin: -141px auto 0 auto;
position: relative;
background: #ccc;
width: 300px;
height: 159px;
text-align: center;
}
h1{
padding: 0;
margin: 0;
}
.openCloseWrap {
position: absolute;
bottom: 0;
font-size: 12px;
font-weight: bold;
}
</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sliderWrap").animate({
marginTop: "0px"
}, 500 );
//$(".sliderWrap").fadeIn().delay(2000).fadeOut('slow');
$("#topMenuImage").html('<img src="close.png" alt="close" />');
/////////////////////////////////////////////////////////////////////////
$(".topMenuAction").click( function() {
$(".sliderWrap").animate({
marginTop: "-160px"
}, 500 );
$("#topMenuImage").html('<img src="open.png" alt="open" />');
});
});
</script>
</head>
<body>
<div class="sliderWrap">
<h1>Isn't this nice?</h1>
<div class="openCloseWrap"><a id="topMenuImage" class="topMenuAction"><img alt="open" src="open.png" /></a></div>
</div>
</body>
</html>
Download source file here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS overlay onload</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
color: #000;
}
a{
cursor: pointer;
}
img{
border: 0;
}
.sliderWrap {
margin: -141px auto 0 auto;
position: relative;
background: #ccc;
width: 300px;
height: 159px;
text-align: center;
}
h1{
padding: 0;
margin: 0;
}
.openCloseWrap {
position: absolute;
bottom: 0;
font-size: 12px;
font-weight: bold;
}
</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sliderWrap").animate({
marginTop: "0px"
}, 500 );
//$(".sliderWrap").fadeIn().delay(2000).fadeOut('slow');
$("#topMenuImage").html('<img src="close.png" alt="close" />');
/////////////////////////////////////////////////////////////////////////
$(".topMenuAction").click( function() {
$(".sliderWrap").animate({
marginTop: "-160px"
}, 500 );
$("#topMenuImage").html('<img src="open.png" alt="open" />');
});
});
</script>
</head>
<body>
<div class="sliderWrap">
<h1>Isn't this nice?</h1>
<div class="openCloseWrap"><a id="topMenuImage" class="topMenuAction"><img alt="open" src="open.png" /></a></div>
</div>
</body>
</html>
Download source file here
Please Provide a Demo , that would be better for
ReplyDeletethe users .
It's up there. Have fun!
ReplyDelete