locked
App bar with select option RRS feed

  • Question

  • Hi all,

    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

    Wednesday, January 23, 2013 1:27 AM

Answers

  • Hi,

    I modified the app bar to have two sections. One the buttons and other a listview. On click of button I populate the list view with items and make it visible. that worked.

    - Girija

    • Marked as answer by Girija Beuria Tuesday, March 19, 2013 9:47 PM
    Tuesday, March 19, 2013 9:47 PM