« »

Drop 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!

Label: drop down navigation, drop down, navigation panel, on Top, external content, pull down panel, AJAX, jQuery, button, height, speed

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
CSS
JavaScript
Print

Copy All x2

<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>

Copy All x2

<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>

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

ChainTutor.com choose.exchange XMQV.com CoinHolo.com ChatTotal.com choose.works system.money war.money pornID.net ABP3.com eChainBank.com YeuNu.com ApexBTC.com CreditCard.rip ZWVQ.com CryptoKD.com Card.rip CTRCoin.com this.bid index.services

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

13/10/2009
JavaScript Kit [more]
7,313
0
0
0
0.11 KBytes

JavaScript Drop Down Navigation Panel on Top

0/5 0 votes / 7,313 previews / 0 comment 13/10/2009 Drop Down Navigation Panel helps you save the web space by creating a nice pull down panel on the top of your page that ...JavaScript Drop Down Navigation Panel on Top - Drop Down Navigation Panel on Top

RAO247.VN VOLKERMORD Canhtho[2] thaihoa tuaninfo3008[2] jimmy.mickey[6] tranphuthanh thirdeyeblind[2] vu8127905 quocdat473