Accordion Style Menu Block

dannbass · October 22, 2007, 10:25:48 PM

The thing is that when you open the site the first tab will drop... so people will have that effect and will know that those will move... just look at http://www.dzinerstudio.com/ and eye effect.

I think is very useful... just need to know how to put php there...

bluedevil · October 22, 2007, 10:34:16 PM

What if they open when hovering instead of clicking?

lebisol · October 23, 2007, 12:33:12 AM

Quote from: bluedevil on October 22, 2007, 10:34:16 PM
What if they open when hovering instead of clicking?

You would be forcing users to point their mouse Very carefully as menues would start to fly arround

Rus · October 23, 2007, 12:57:25 AM

I think a click would be fine if it showed as a link

Hairy · October 23, 2007, 06:28:42 AM

This is very cool, thanks!

Zetan · October 23, 2007, 07:31:42 AM

Quote from: dannbass on October 22, 2007, 10:25:48 PM
The thing is that when you open the site the first tab will drop... so people will have that effect and will know that those will move... just look at http://www.dzinerstudio.com/ and eye effect.

It works well on dzinerstudio site.

Dragooon · October 23, 2007, 10:52:08 AM

If you want PHP there is A small difference, And Yes it is very possible.
Here is an example
Put this in a PHP Block add

Code Select


global $context, $settings, $options, $scripturl, $txt, $user_info, $modSettings;

// The Style.css and the Javascripts.
echo '
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">


.toggler {
	color: #222;
	margin: 0;
	padding: 2px 5px;
	background: #eee;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-top: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
	font-size: 11px;
	font-weight: normal;
	font-family: \'Andale Mono\', sans-serif;
}
 
.element {
 
}
 
.element p {
	margin: 0;
	padding: 4px;
}
 
.float-right {
	padding:10px 20px;
	float:right;
}
 
blockquote {
	text-style:italic;
	padding:5px 0 5px 30px;
}


</style>
<script type="text/javascript" src="mootools-accordion.js"></script>

<script type="text/javascript">
window.onload = function() {
var accordion = new Accordion(\'h3.atStart\', \'div.atStart\', {
	opacity: false,
	onActive: function(toggler, element){
		toggler.setStyle(\'color\', \'#ff3300\');
	},
 
	onBackground: function(toggler, element){
		toggler.setStyle(\'color\', \'#222\');
	}
}, $(\'accordion\'));

}
</script>
</head>
<body>';
//Now the actual Blocks begain
echo ' 
<div id="accordion">
<h3 class="toggler atStart">Example 1</h3>
 <div class="element atStart">';
	echo'
               test
 </div>
</div>
</body>
</html>';

Please note: This won't work on a Script Box, It MUST be a PHP Block as it is modified to be in PHP.
The code on first post is ONLY for a Script box.

Dragooon · October 23, 2007, 10:53:46 AM

Quote from: Zetan on October 23, 2007, 07:31:42 AM
Quote from: dannbass on October 22, 2007, 10:25:48 PM
The thing is that when you open the site the first tab will drop... so people will have that effect and will know that those will move... just look at http://www.dzinerstudio.com/ and eye effect.

It works well on dzinerstudio site.

Someone requested this and pointed to that site, So thats how I got inspired to make this

.

dannbass · October 23, 2007, 02:32:37 PM

Yes and it is pretty cool!! Thanks a lot for the php version!! and for posting it here!!

Dragooon · October 25, 2007, 07:51:47 AM

Updated to support Validation.

Recent

User

Stats

Members

Stats

Users Online

Accordion Style Menu Block

dannbass

bluedevil

lebisol

Rus

Hairy

Zetan

Dragooon

Dragooon

dannbass

Dragooon

This website is proudly hosted on Crocweb Cloud Website Hosting.