Drop-Down Menus in 100% Pure Markup

  • Article

The samples lately may have seemed a bit "script heavy" for a system that is supposed to be markup based, so today we have a drop-down menu system driven entirely from markup, savvy?

Of course the menu doesn't do anything without script (it is just a visual thing; any actual behaviour like changing chapters or switching audio tracks is done with a couple of lines of code) and in order to avoid a download I'm just going to paste the markup that uses background colours (rather than pretty images) but you will get the idea.

The Markup

Here it is in one big chunk:

<?

xml version="1.0"?>

<

root xml:lang="en" xmlns="https://www.dvdforum.org/2005/ihd" xmlns:style="https://www.dvdforum.org/2005/ihd#style" xmlns:state="https://www.dvdforum.org/2005/ihd#state">

<

head>

<

styling>
<style id="btn" style:position="absolute" style:x="25px" style:y="25px" style:width="150px" style:height="100px"
style:backgroundColor="yellow" style:opacity="0.4"/>

<

style id="div" style:position="absolute" style:x="0px" style:y="150px" style:width="200px" style:height="0px"
style:backgroundColor="white" />
</styling>
<timing clock="page">
<par>

<

par begin="id('settings')[state:actioned()]"
end="(class('SettingsButton')[state:actioned()] or class('NotSettings')[state:focused()])">

<

cue begin="0s" dur="0.3s" select="id('settingsMenu')" fill="hold">
<animate style:height="0px;400px"/>
</cue>

<

cue begin="0s" dur="1s" select="id('settings')" fill="hold">
<set style:navDown="settings1" style:navUp="settings3"/>
</cue>
</par>

<

par begin="id('chapters')[state:actioned()]"
end="(class('ChaptersButton')[state:actioned()] or class('NotChapters')[state:focused()])">

<

cue begin="0s" dur="0.3s" select="id('chaptersMenu')" fill="hold">
<animate style:height="0px;400px"/>
</cue>

<

cue begin="0s" dur="1s" select="id('chapters')" fill="hold">
<set style:navDown="chapters1" style:navUp="chapters3"/>
</cue>
</par>

<

par begin="id('audio')[state:actioned()]"
end="(class('AudioButton')[state:actioned()] or class('NotAudio')[state:focused()])">

<

cue begin="0s" dur="0.3s" select="id('audioMenu')" fill="hold">
<animate style:height="0px;400px"/>
</cue>

<

cue begin="0s" dur="1s" select="id('audio')" fill="hold">
<set style:navDown="audio1" style:navUp="audio3"/>
</cue>
</par>

<

cue begin="//button[state:focused() and count(//button[style:opacity()='1'])=0]"
end="defaultNode()[state:focused() != 'true']">

<set style:opacity="1"/>
</cue>
</par>
</timing>
</head>

<

body>

<

div style:position="absolute" style:x="0px" style:y="0px" style:width="1920px" style:height="1080px"
style:backgroundColor="black">

<

div id="mainMenu" style="div" style:y="0px" style:height="150px" style:width="600px">
<button id="settings" style="btn" class="NotChapters NotAudio" 
          style:navDown="chapters" style:navUp="audio" style:navLeft="audio" style:navRight="chapters"/>

<

button id="chapters" style="btn" class="NotSettings NotAudio" style:x="225px" style:backgroundColor="red" 
          style:navDown="audio" style:navUp="settings" style:navLeft="settings" style:navRight="audio"/>

<

button id="audio" style="btn" class="NotChapters NotSettings" style:x="425px" style:backgroundColor="blue" 
          style:navDown="settings" style:navUp="chapters" style:navLeft="chapters" style:navRight="settings"/>

</

div>

<

div id="settingsMenu" style="div">
<button id="settings1" style="btn" class="SettingsButton" style:navUp="settings"/>
<button id="settings2" style="btn" class="SettingsButton" style:y="150px" />
<button id="settings3" style="btn" class="SettingsButton" style:y="275px" style:navDown="settings"/>
</div>

<

div id="chaptersMenu" style="div" style:x="200px">
<button id="chapters1" style="btn" class="ChaptersButton" style:backgroundColor="red" style:navUp="chapters"/>
<button id="chapters2" style="btn" class="ChaptersButton" style:y="150px" style:backgroundColor="red" />
<button id="chapters3" style="btn" class="ChaptersButton" style:y="275px" style:backgroundColor="red" style:navDown="chapters" />
</div>

<

div id="audioMenu" style="div" style:x="400px">
<button id="audio1" style="btn" class="AudioButton" style:backgroundColor="blue"