»
EnglishFrenchVietnamese

Print - Drop Down Navigation Panel on Top - JavaScriptBank.com

Full version: jsB@nk » Framework » jQuery » Drop Down Navigation Panel on Top
URL: http://www.javascriptbank.com/drop-down-navigation-panel-on-top.html

Drop Down Navigation Panel on Top © JavaScriptBank.comDrop Down Navigation Panel helps you save the web space by creating a nice pull down panel on the top of your page that contains external content fetched via AJAX. Your visitors click on the protruding button to drop the panel down and reveal its content. Closing it by clicking anywhere on the panel again. You can easily customize the height of the Panel, button label and the speed of drop down in milliseconds. A very cool plug and play AJAX drop down panel!

Full version: jsB@nk » Framework » jQuery » Drop Down Navigation Panel on Top
URL: http://www.javascriptbank.com/drop-down-navigation-panel-on-top.html



CSS
<style type="text/css">#dropdownpanel{ /*Outermost Panel DIV*/position: absolute;width: 100%;left: 0;top: 0;visibility:hidden;}#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("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>


JavaScript
<script type="text/javascript" src="/javascript/jquery.js"></script><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***********************************************/</script>


Files
/javascript/framework/jquery.js/javascript/framework/Drop_Down_Navigation_Panel_on_Top/jkpanel.js/javascript/framework/Drop_Down_Navigation_Panel_on_Top/jsbank_panelcontent.htm/javascript/framework/Drop_Down_Navigation_Panel_on_Top/panel.gif