Drop down-ish menu with fading effect, etc.

Discussion in 'JavaScript' started by cre8ive, Mar 25, 2008.

0
  1. #1
    cre8ive, Mar 25, 2008 IP
  2. So1

    So1 Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    So1, Mar 25, 2008 IP
  3. mz906

    mz906 Peon

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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 27, 2008 IP
  4. mz906

    mz906 Peon

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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><!--begin custom header content for this example-->

</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>
    HTML:
    hope that helps
     
    mz906, Mar 27, 2008 IP