Drop-Down Menus in 100% Pure Markup


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="http://www.dvdforum.org/2005/ihd" xmlns:style="http://www.dvdforum.org/2005/ihd#style" xmlns:state="http://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 (4)

  1. wmerydith says:

    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.

  2. ptorr says:

    You mean like all the Universal and Warner titles? 🙂

    Something should be coming down the pipe soon... stay tuned. Scrolling lists of things are not that hard, either.

  3. wmerydith says:

    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.

  4. After looking at drop-down menus in 100% pure markup, we turn our attention to scrolling lists. These...

Skip to main content