Drop down-ish menu with fading effect, etc.

cre8ive

Mar 25th 2008, 12:31 am

There is a certain drop down menu I'd like to emulate:

http://www.templatemonster.com/website-templates/18745.html

This is done in Flash, but I'm wondering if I can create something like this using JavaScript / DHTML. DHTML libraries like http://mootools.net/ can do some neat stuff, so ... can this be done?

So1

Mar 25th 2008, 10:43 am

make one block with z-index 1 and rollouting block with z-index 0. And change document.getElementById('id_of_moving_block').style.top. This block position must be relative.

mz906

Mar 27th 2008, 12:00 pm

you'll need 2 effects, with mootools do a search for "chaining" cause you need to toggle slideIn/out with fadeIn/out, so far i've found YUI to be the best out there (i've checked out mootools, scriptacolus and jquery)

i can post a demo in a few ;)

mz906

Mar 27th 2008, 12:13 pm

here is a demo that does a slide/fade, just go thru it edit the css and hack the js as needed (you'll need to link the js files from yahoo):

http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js
http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Animation</title>
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
overflow:hidden;
width:20px;
height: 200px;
opacity: .15;
}
</style>

<link rel="stylesheet" type="text/css" href="basic_clean_files/fonts-min.css">
<script type="text/javascript" src="basic_clean_files/yahoo-dom-event.js"></script>
<script type="text/javascript" src="basic_clean_files/animation-min.js"></script>

</head>

<body>

<h1>My Demo to slide in/out with fade</h1>

<div id="demo">Demo</div>
<button id="demo-close">close</button>
<button id="demo-open">open</button>
<button id="demo-toggle">toggle</button>

<script type="text/javascript">
(function() {
// our attributes CSS based?
var slideClose = {
width: { to: 20 },
opacity: { to: .15 },
};

var slideOpen = {
width: { to: 200 },
opacity: { to: 1 },
};

var doToggle = {
width: { to: 200 },
opacity: { to: 1 },
};

//set
var isOpen = false;

// pass the ID and attriutes
var animClose = new YAHOO.util.Anim('demo', slideClose);
var animOpen = new YAHOO.util.Anim('demo', slideOpen);

//create even, pass ID, event, function
YAHOO.util.Event.on('demo-toggle','mouseover', function(){
if (isOpen){
animClose.animate();
isOpen = false;
} else {
animOpen.animate();
isOpen = true;
}
return false;
});
YAHOO.util.Event.on('demo-close', 'click', function() {
animClose.animate();
});
YAHOO.util.Event.on('demo-open','click', function() {
animOpen.animate();
});

})();
</script>

</body></html>

hope that helps