WinJS App bar with select option - winjs

Question

I have an app bar that has custom controls as shown below :
<div class="appBarMain" data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar"
data-win-options="{layout:'custom',placement:'top'}">
<header class="upperNavBar">
<div class="divHome item">
<img class="image" src="/images/storelogo.png"/>
<div class="overlay">
<h4 class="title">Go Home</h4>
</div>
</div>
<div class="div1 item">
<img class="image" src="/images/storelogo.png"/>
<div class="overlay">
<h4 class="title">First Item</h4>
</div>
</div>
<div class="div2 item">
<img class="image" src="/images/storelogo.png"/>
<div class="overlay">
<h4 class="title">Second Item</h4>
</div>
</div>
</header>
</div>
The "First Item" and "Second Item" are div and on click navigate to pages for 1 or 2. Our requirement has changed and we now require to show a kind of drop down from "First Item" and "Second Item". So when user clicks on drop down in "First Item" it shows two buttons below " "SubItem 1" and "SunItem 2" and when user clicks "Second Item" it shows a two buttons "SubItem 3" and "SubItem 4".
This implementation is there in the Windows 8 weather app. On top navigation bar "places" has this option select if you have more that one places.
My app bar is exactly same as the Weather app upper nav bar. We want this drop down option as well.
I am just not sure what is the control that I have to use in this case (if I want drop down).
Any help is appreciated.
Girija

Answer 1

#GotDibbs recommended the WinJS.UI.Flyout, but I think more specifically you should look WinJS.UI.Menu. The two are closely related, but a Flyout will require that you build all of the submenu functionality, while the Menu has that done for you.

Answer 2

What you're looking for is the WinJS.UI.Flyout control. You can see more information on the control and how to implement one here on MSDN.

Answer 3

I recommend using WinJS NavBar and Flyout together to achieve the Windows 8 weather app top navigation bar. MSDN NavBar sample scenario #6 shows how to enable this scenario: http://code.msdn.microsoft.com/windowsapps/HTML-NavBar-control-sample-4472d92a/view/SourceCode#content
Here's the code from the sample:
<div id="useSplit" data-win-control="WinJS.UI.NavBar">
<div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }"></div>
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite', splitButton: 'true' }"></div>
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Your account', icon: 'people' }"></div>
</div>
</div>
<div id="contactFlyout" data-win-control="WinJS.UI.Flyout" data-win-options="{ placement: 'bottom' }">
<div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"}">
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Family' }"></div>
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Work' }"></div>
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Friends' }"></div>
<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Blocked' }"></div>
</div>
</div>