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
No comments:
Post a Comment