Using one Button to open and close menu

I'm trying to change my menu trays to open and close with the menu button. The problem is I cannot think of a way in markup, to end one of the actions properly. I thought about just making a class that is set to either open or close. Any ideas

<timing clock="page">
<defs>


<animate id="OpenMenu" style:x="-450px;0px" />
<animate id="CloseMenu" style:x="0px;-450px" />
<set id="Hide" style:display="none" />
<set id="Show" style:display="auto" />

</defs>

<par>
<seq begin="(id('BTN_MENU')[state:actioned()=true()] and id('MENU')[style:x()='-450px'])" end="id('MENU')[style:display()='none']">

<cue select="id('MENU')" dur="1s" fill="hold" use="Show" />
<cue select="id('MENU')" dur="1s" fill="hold" use="OpenMenu" />
</seq>
</par>
</timing>

Answer this question

Using one Button to open and close menu

thechristopher
Actually that won't work because I cannot alter the class.
ofer ebert
Nice. For a minute I thought that was an old post and I had missed it ;)

Thanks Peter!
Evan Mulawski
I'm not making the connection on how that helps. Are both btnDummy and btnDummy_X MENU buttons

Also, is focused()=1 the same as focused()=true
XinuXano
Wow, this is really tough to get working. And I assume a lot of people will want the behavior where the menu button both opens and closes a menu.

I tried this as well and it is still not working (below). The menu will not close. Either the OPEN button is not ending, or the display button settings are not persisting to the DOM.

*** MARKUP ***

<timing clock="page">
<defs>

<g id="MenuButtonPressed">
<event name="MenuButtonEvent" />
</g>
</defs>

<par>
<par begin="id('BTN_MENU_OPEN')[state:actioned()=true()]"
end="id('BTN_MENU_CLOSE')[state:actioned()=true()]">

<cue select="id('BTN_MENU_OPEN')" dur="1s" use="MenuButtonPressed" />
</par>
<par begin="id('BTN_MENU_CLOSE')[state:actioned()=true()]"
end="id('BTN_MENU_OPEN')[state:actioned()=true()]">

<cue select="id('BTN_MENU_CLOSE')" dur="1s" use="MenuButtonPressed" />
</par>
</par>

</timing>
</head>
<body>

<div id="BG" style="BACKGROUND" >
</div>


<div id="MENU" style="MAIN_MENU" >

</div>


<div>
<button id="BTN_MENU_OPEN" accessKey="VK_MENU" style:display="auto" />
<button id="BTN_MENU_CLOSE" accessKey="VK_MENU" style:display="none" />
</div>
</body>

*** SCRIPT ***

function menuButtonPressed(evt) {
var id = evt.target.getAttribute("id");
// If menu is being opened . . .
if (id == "BTN_MENU_OPEN") {
document.MENU.style.display = "auto";
document.MENU.style.animateProperty("x","-450px;0px",1);
document.BTN_MENU_OPEN.style.display = "none";
document.BTN_MENU_CLOSE.style.display = "auto";
}
// If menu is being closed . . .
else if (id == "BTN_MENU_CLOSE") {
document.MENU.style.animateProperty("x","0px;-450px",1);
document.BTN_MENU_OPEN.style.display = "auto";
document.BTN_MENU_CLOSE.style.display = "none";
}
}

addEventListener("MenuButtonEvent",menuButtonPressed,false);
daxu
Something like this should work as you want it to.

MARKUP:

<par begin="0s">
    <cue select="id('btnDummy_X')" begin="0s" dur="1f">
        <set state:focused="true" />
    </cue>
</par>

<par begin="id('btnDummy')[state:focused()=1]" end="id('btnDummy_X')[state:focused()=1]">

    

    <cue select="id('someMenuButton')" begin="1s" dur="1f">
        <set state:focused="true" />
    </cue>
</par>

SCRIPT:

function displayMenu()
{
    if (MM == 0) {
        document.getElementById("btnDummy").state.focused="true" ;
        document.getElementById("btnDummy").state.unsetProperty("focused") ;
        MM = 1 ;
    }
    else {
        document.getElementById("btnDummy_X").state.focused="true" ;
        document.getElementById("btnDummy_X").state.unsetProperty("focused") ;
        MM = 0 ;
    }
}

This script is very simple. Instead of using an variable you could check if btnDummy_X is focused to find out if the menu is already visible or not...
Philippe Cand
They are both buttons within your markup page with all the other menu graphics and buttons. They just have no background image etc. and are declared as not visible.

If you press RC[Menu] the focus will set to one of these two buttons by script. Focus on btnDummy will trigger the menu animation in markup while focus on btnDummy_X will instantly hide the menu.

1 is true, 0 is false.

And this solution has not much in common with the way you tried to solve the issue. It just works as intended...
Whoisit

Another solution in 100% Markup...

http://blogs.msdn.com/ptorr/archive/2006/10/12/toggling-menus-with-the-menu-button-in-100-markup.aspx
Using one Button to open and close menu

Answer this question