Another great menu which uses Scriptaculous Fade effect to appear and disappear.
My friend Thomas asked to me how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.
The code is very simple and I added a nice Scriptaculous toggle - appear effect to display/hide the search options menu.
Download this tutorialStep 1: include scriptaculous libraries
Create a new page index.html and addadd a link to prototype.js and scriptaculous.js in the <head> tag of your page:
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
Step 2: HTML code
Add an input search field with an hidden input hiddenStatusMenu to "save" the actual status of the search options menu (0=hidden; 1=visible) with ID searchMenu initially hidden:
<input type="text" name="search" id="search" onclick="javascript:showMenu()"/>
<input id="hiddenStatusMenu" type="hidden" value="0" />
<div id="searchmenu" style="display:none;">
...some html code here...
<!-- Add this link to close the menu -->
<a href="#" onClick="javascript:hideMenu()"> Close </a>
<div/>
<input id="hiddenStatusMenu" type="hidden" value="0" />
<div id="searchmenu" style="display:none;">
...some html code here...
<!-- Add this link to close the menu -->
<a href="#" onClick="javascript:hideMenu()"> Close </a>
<div/>
Step 3: JavaScript functions
Add this code into the <head> page on your page for the function showMenu() which display the menu when an user click on the input search field:
function showMenu(){
statusMenu = document.getElementById('hiddenStatusMenu');
if(statusMenu.value == 0){
statusMenu.value=1;
Effect.toggle('searchmenu','appear'); return false;
}
}
...and this code for hideMenu() function to hide the menu when an user click on the link "close":
function hideMenu(){
statusMenu = document.getElementById('hiddenStatusMenu');
if(statusMenu.value == 1){
statusMenu.value=0;
Effect.toggle('searchmenu','appear'); return false;
}
}
How you can see the code and the structure is very simple to understand. Download the zip file whit the full code, including CSS and Scriptaculous framework.
Download this tutorial
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
This looks interesting, if you could your final product as an example, that would be sweet.
It would be great if you could have a online Demo instead of having to download all the files and testing them out.
regards
vinay
Including prototype and scriptaculous just to have the Appear effect is a bit overkill.
You're not even using the basics of prototype in your code either.
statusMenu = document.getElementById('hiddenStatusMenu')
should really be:
statusMenu = $('hiddenStatusMenu')
Apart from that, good beginners tutorial.
Wish someone ports it to jQuery. I've been using jQuery for almost everything and cant use a whole new framework just for this.
Thanks anyway
come on! why don't you put up demos of this?
it'd be a lot more sticky post if you would. just a little bit of trouble on your part could save a little bit of trouble for thousands of people on this end...
yes please - examples on your pages would be really nice...
I think its fine without the demo, its easy to download the files sheesh. How can you add the drop down shadow effect like getty has?
I wonder if it would be too hard to add a drop shadow to the effect.