Compartir a través de

Drop-Down Menus in 100% Pure Markup

  • Artículo

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"

Comments

  • Anonymous
    July 11, 2006
    That is pretty cool.  I'm going to play around with this some more.

    What I want to do is 'grow' a single pane of buttons from off screen.  So that during playback I can pull a pane of chapter selection buttons out from the side (or up from the bottom) to navigate elsewhere without stopping the current playback.
  • Anonymous
    July 11, 2006
    The comment has been removed
  • Anonymous
    July 12, 2006
    Yes - exactly!

    What's cool about this example is that it's purely markup.  I didn't really consider a non-jscript route until seeing this example.
  • Anonymous
    September 01, 2006
    After looking at drop-down menus in 100% pure markup, we turn our attention to scrolling lists. These...