This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, February 18, 2008

Gettyone-like search options menu with Scriptaculous

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

blog comments powered by Disqus
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.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News