20
2008
Facebook has provided a nice Animation library that can be used on applications both on and off Facebook. Detailed documentation for the library can be found here. This tutorial will show you how to create a navigation menu that makes use of the Animation library and mouseover events to fade up and down hidden divs.
In this example we will create 3 buttons. Two of the buttons will open a hidden div from which other navigation options are presented, the third button will be a direct link to a new page. You can view a demo here.
To begin, create the navigation menu. The first button has a hidden div with id ‘button1′ containing 3 sub-menu items and a link to close the box. The second button also has a hidden div but this one has a lot of entires requiring a scroll bar. The third button has no sub-menu and hence no hidden div.
<ul class="maintabs clearfix">
<li><a id='button1' href='#'>First Button</a>
<div id='button1div' class='popup clearfix' style='position:absolute; top:100px; left:65px; height: 180px; display:none; overflow: auto'>
<ul>
<li><a href="# onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
<li><a href='page1a.php'>Option A</a></li>
<li><a href='page1b.php'>Option B</a></li>
<li><a href='page1c.php'>Option C</a></li>
</ul>
</div>
</li>
<li><a id='button2' href='#'>Second Button</a>
<div id='button2div' class='popup clearfix' style='position:absolute; top:100px; left:150px; height: 180px; display:none; overflow: auto'>
<ul>
<li><a href="#" onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
<li><a href='page1a.php'>Option A</a></li>
<li><a href='page1b.php'>Option B</a></li>
<li><a href='page1c.php'>Option C</a></li>
<li><a href='page1d.php'>Option D</a></li>
<li><a href='page1e.php'>Option E</a></li>
<li><a href='page1f.php'>Option F</a></li>
<li><a href='page1g.php'>Option G</a></li>
<li><a href='page1h.php'>Option H</a></li>
<li><a href='page1i.php'>Option I</a></li>
<li><a href='page1j.php'>Option J</a></li>
<li><a href='page1k.php'>Option K</a></li>
<li><a href='page1l.php'>Option L</a></li>
</ul>
</div>
</li>
<li><a id='button3' href='anotherpage.php'>Third Button</a></li>
</ul>
Next we need some FBJS to detect when the mouse moves over the navigation links. In this example I have made each hidden div the same size so they can share the code. It would be simple to change this to use a different size/shape/fade for each div if required. The script first determines which object fired the event. It then closes all other hidden divs and fades up the required new div.
<script>
function mouseaction(evt) {
eventFiredBy_ObjectId = evt.target.getId();
if (eventFiredBy_ObjectId == 'button1') targetId = document.getElementById('button1div');
else if (eventFiredBy_ObjectId == 'button2') targetId = document.getElementById('button2div');
//First hide all other divs
if (eventFiredBy_ObjectId != 'button1') document.getElementById('button1div').setStyle({display: 'none'});
if (eventFiredBy_ObjectId != 'button2') document.getElementById('button2div').setStyle({display: 'none'});
// then make the new div visible:
if (eventFiredBy_ObjectId != 'button3') {
Animation(targetId).to('height', 'auto').from('0px').to('width', '150px').from('0px').to('opacity', 1).from(0).show().go();
}
}
//add event listener to divs (mouseover & mouseout)
document.getElementById('button1').addEventListener('mouseover',mouseaction);
document.getElementById('button2').addEventListener('mouseover',mouseaction);
document.getElementById('button3').addEventListener('mouseover',mouseaction);
</script>
Facebook provides a “blind” effect which would prevent the text rolling in the box as it opens. We choose not to use it here since we need the scrollbar on the second hidden div.
Below the navigation list you need a div that has enough height to exceed the largest hidden div. This will ensure the entire hidden div will be revealed on the mouseover.
To navigate through the menu, the user will mouse over the tabs to open the sub-menu, if any. The sub-menu will remain displayed until the user mouses over another tab or until they select a link from the sub-menu.
The complete example source code is available for download in a text file here.
I have updated the example code to fade up to height auto. This gives a box that exactly fits the menu list and works on IE7. Who wants a scrollbar in a menu anyway?
I tied using the given code but for some reason the the drop down does not seem to work. Can you please chk the link http://www.facebook.com/pages/Knoxville-TN/testpage/83662741491?v=app_4949752878&viewas=1597862469 and help me with it
Hi Tamil,
Sorry for the delay in responding. It looks like the Facebook javascript files are not getting included properly on your version. Compare the “view source” output from your page to my demo page and you’ll see the demo page has 8 javascript scripts listed while yours has 2 scripts then a line with “Bootloader.loadInitialResources” which seems to be where the additional scripts should be coming from, but it isn’t working. If you have already resolved the problem please let me know.
[...] Un menu con sottomenu che compaiono con effetto scorrimento al passare del mouse. Demo | Codice Sorgente [...]