Hi, I was inspired by
http://www.exit404.com/2005/57/unobtrusive-persistant-scriptaculous-effects
to create a menu that would expand and contract the menu whenever I
click on the menu header. Instead of using Effect.BlindDown and
Effect.BlindUp, I decided to use Effect.toggle to toggle the unordered
list when I click on the menu header. I decided to use the slide
effect for Effect.toggle, but found that it is buggy in FF3, IE7,
Safari3 and works as it should in Opera9. It seems that adding
Effect.toggle to <ul> is problematic. You can check out my result at
http://icecreamcola.com/test/jsMenu.html or take a look at some code
below:
[html]
<div class="menu">
<h3 id="menu-head">RECENTLY</h3>
<ul id="menu-body">
<li>Menu List 1</li>
<li>Menu List 2</li>
<li>Menu List 3</li>
<li>Menu List 4</li>
<li>Menu List 5</li>
<li>Menu List 6</li>
<li>Menu List 7</li>
<li>Menu List 8</li>
</ul>
</div>
[/html]
[script]
function toggleMenu() {
if ($('menu-head').getStyle('background-image').include('img/
sidebarh3bg.jpg') && $('menu-head').getStyle('background-
position')=='0px 0px') {
Effect.toggle('menu-body', 'slide', {duration: 0.5});
Element.setStyle.delay(0.5, $('menu-head'),
{background:'url(img/
sidebarh3bg.jpg) no-repeat -165px 0px', cursor:'pointer'});
}
else {
Effect.toggle('menu-body', 'slide', {duration: 0.5});
Element.setStyle.delay(0.5, $('menu-head'),
{background:'url(img/
sidebarh3bg.jpg) no-repeat 0px 0px', cursor:'pointer'});
}
}
[/script]
- Paul
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
