Home Tutorials Fonts Lists Feed RSS Advertising Contact Me

Monday, February 18, 2008

Gettyone-like search options menu with Scriptaculous

8 comments
Save to delicious 0 hits

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 tutorial


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

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


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

Sponsored Links
Share this post
Share on Facebook
Share on Twitter
Share on StumbleUpon
Share on Delicious
Share on Reddit
Share on Digg
Share on DesignFloat
Share on Technorati
Feeds RSS Subscribe to Feeds RSS
Comments
8 comments
Do you have any suggestions? Add your comment. Please don't spam!
Subscribe to my feeds | Subscribe comments feeds
Anonymous said...

This looks interesting, if you could your final product as an example, that would be sweet.

vinay said...

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

jim said...

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.

Anonymous said...

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

Anonymous said...

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

Anonymous said...

yes please - examples on your pages would be really nice...

Daniel said...

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?

Daniel said...

I wonder if it would be too hard to add a drop shadow to the effect.

About Me

I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted. Rome, IT.
Feeds RSS Contact Me

SubscribeLatest posts

SubscribeHot Links

Subscribe Design News

Ecoki Eco Green Product Reviews
Apple Reviews and News