Well, it might be hard to integrate this into an actual layout - not impossible, just a bit tricky. With that in mind, try this page out:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Web Page</title>
<meta name="generator" content="Antenna 3">
<link rel="stylesheet" type="text/css" href="http://www.threefooter.com/dropdown/antenna.css" id="css">
<style type="text/css">.abs {position:absolute}</style>
<script type="text/javascript" src="http://www.threefooter.com/dropdown/antenna/auto.js"></script>
<script type="text/javascript" src="http://www.threefooter.com/dropdown/jquery-1.2.2.pack.js"></script>
<style type="text/css">
#putithere {
position: relative;
top: 100px;
height: 170px;
overflow: hidden;
}
#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 966px;
left: 50%;
margin-left:-483px;
top: 0;
visibility:hidden;
z-index:4;
}
#dropdownpanel .contentdiv{ /*Div containing Ajax content*/
background: black;
color: white;
padding: 10px;
}
#dropdownpanel .control{ /*Div containing panel button*/
border-top: 5px solid black;
color: white;
font-weight: bold;
text-align: center;
background: transparent url("http://www.threefooter.com/dropdown/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}
</style>
<script type="text/javascript">/* src="jkpanel.js" */
/***********************************************
* Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
var jkpanel={
controltext: 'Added Content',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed, targ, at_end){
targ = targ || 'body';
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>');
if(at_end){jkpanel.$mainpanel.appendTo(targ);}else{jkpanel.$mainpanel.prependTo(targ);}
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration, target_element, at_end)
jkpanel.init('panelcontent.htm', '140px', 500, '#putithere')
</script>
</head>
<body class="global ctt">
<div class="ctr global" style="width:967px">
<div id="lays339jtizb">
</div>
<div id="lays425zbsfc">
<div id="panl425junoy" class="pnl hid abs" style="left:1px; top:0px; width:966px; height:293px;"></div>
<div id="text356trpvu" class="aut abs" style="left:26px; top:337px; width:200px; height:125px;">
<p>jkpanel.init(''panelcontent.htm', '200px', 500)</p> <p> </p> <p>z-index:1</p> <p> </p> <p>Need to be edited...</p>
</div>
</div>
<div id="putithere">
</div>
<div id="lays339ufftq">
<div id="vhtm339ibzqn" class="hid abs" style="left:0px; top:0px; width:966px; height:103px;"></div>
</div>
</div></body></html>
Drop Down Panel Script from Javascript kit
Reply With Quote
Bookmarks