I had the idea of creating this style effect after seeing a similar one in other website, only it was pullup and not pulldown.
We’ll be using JQuery Framework to produce the desired effect. JQuery by itself only enables the dropdown of one element, to make the desired output we need to do some modifications, and that’s what we’re gonna go over on this post.
First of all we need to import the required JavaScript:
1 2 3 | <script src="http://ui.jquery.com/testing/jquery-1.3.1.js" type="text/javascript"></script> <script src="http://ui.jquery.com/testing/ui/ui.core.js"></script> <script src="http://ui.jquery.com/testing/ui/ui.draggable.js"></script> |
Place these lines after <title> tag on the HTML code.
A few styles need to be added for this to work properly:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .drag_top { width:100%; height:400px; background-color:#333; margin-top:-380px; z-index:1000; } .conteudo_drag { height:380px; margin-left:auto; margin-right:auto; width:1200px; background-color:#333; } .hand_drag { width:100%; height:20px; background-color:#333; cursor:s-resize; } |
Now we need to initialize JQuery Framework and tell it which element will be affected by the dropdown effect.
After the code you just entered add:
$(document).ready(function(){ $("#drag_top").draggable( { handle: '#hand_drag', axis: 'y', containment: [0,0,'100%',380], drag: function(even,ui){ document.getElementById("page").style.marginTop = (ui.position.top)+'px'; } }); }); |
The element we’ve chosen to be affected is “#drag_top”.
- “handle: ‘#hand_drag’” tells JQuery that only this element will activate the dropdown effect
- we are going to lock it to the Y axis using “axis: ‘y’”
- “containment: [0,0,'100%',380]” is where we specify the limits of movement of our dropdown, in this case we confine it to top 0, left 0, width 100% and height 380 from the top of the page
- Finally we go over to the drag function, this is where we specify what will happen during the drag effect. The default drag function has 2 parameters; event and ui. Event has all event related information during the drag and ui has all changes that happen to the dragged element, so, in this case, we’re going to use that to update the rest of he page as the dragged element comes down.
For this to happen we first need to put all <body> content inside a <div> element with the id “page”
1 2 3 4 5 | <body> <div id="page"> <!-- page content --> </div> </body> |
We still haven’t add the content of our dropdown element. Before <div id=”page”> and after <body> type
1 2 3 4 5 | <div id="drag_top" class="drag_top"> <div id="conteudo_drag" class="conteudo_drag" align="center"></div> <div id="hand_drag" class="hand_drag"> <img style="margin-left:99px;" src="/images/drag_me.jpg" alt="Drag Me!" /></div> </div> |
And that’s it. Everything should be working. If not, go over the steps once again and check that everything has been added properly.
If you still can’t get it to work send me an email or comment this post in order, for me, to help.
See you on the next post 
Nice menu! Still a shame IE has to have some javascript to function properly.. Hopefully soon we can just use css with the :hover functionality.
To place it over any kind of flash movie you have to publish your flash movie with wmode=transparant in and it will fix any html layers on top of the flash..
Hi Jose, thank you for sharing this trick, I tried it and it works perfectly. And thanks for sharing the wp-restful plugin. Please, if you develop any further rest-based plugins keep them posted. I will try to develop something based on your infrastructure, if I succeed of course I’ll post back. Cheers