You can specify where the menu and submenus open relative to a trigger. For this tutorial, we will be using a button click to open the menu and trigger the Position property.

Complete the following steps:

1. Create an ASP.NET Web application.
2. Add an input button to the main content of your page using the following markup:
3. <input type="button" id="btn1" value="Click Here" />
4. Add a standard Panel control to the main content of  your page.
5. Add the following markup within the <asp:Panel> tags to create a list that will become the menu.

            <ul id="wijmenu1">

                <li><a href="#">Breaking News</a></li>

                <li><a href="#">Entertainment</a></li>

                <li><a href="#">Finance</a></li>

                <li><a href="#">Food &#38; Cooking</a></li>

                <li><a href="#">Lifestyle</a>

                    <ul><li><a href="#">submenu</a></li></ul>

                </li>

                <li><a href="#">News</a></li>

                <li><a href="#">Politics</a></li>

                <li><a href="#">Sports</a></li>

            </ul>

6. Click the Panel smart tag and select Add Extender from the Tasks menu.
7. In the Extender Wizard, select C1MenuExtender and click OK. A C1MenuExtender control is added to the page and the TargetControlID is set to Panel1.
8. After the closing </asp:Panel> tag, add the following markup to create buttons that, when clicked, will perform the specified menu function.

<p>

        <input type="button" id="previous" value="previous" />

        <input type="button" id="next" value="next" />

        <input type="button" id="previousPage" value="previousPage" />

        <input type="button" id="nextPage" value="nextPage" />

    </p>

9. After the markup for the buttons, add the following script which will call the client-side widget functions we want to perform:

  <script type="text/javascript">
       $(document).ready(function () {
           $("#previous").click(function () {
               $("#<%=Panel1.ClientID %>").focus().wijmenu("previous");
           });
           $("#next").click(function () {
               $("#<%=Panel1.ClientID %>").focus().wijmenu("next");
           });
           $("#previousPage").click(function () {
               $("#<%=Panel1.ClientID %>").focus().wijmenu("previousPage");
           });
           $("#nextPage").click(function () {
               $("#<%=Panel1.ClientID %>").focus().wijmenu("nextPage");
           });
       });
    </script>

10. In the HeadContent ContentPlaceholder, add links to the CDN, or the content delivery network that contains the dependencies required by the client-side wijmenu widget to access the events and methods that we'll be using in this example. The markup will look similar to the following, but make sure to visit the CDN to get the most recent version of the dependency files:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.wijmo.com/jquery.wijmo-open.x.x.x.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.wijmo.com/jquery.wijmo-complete.x.x.x.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-x.x.x.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/x.x.x/jquery-ui.min.js" type="text/javascript"></script>

<script src="http://cdn.wijmo.com/external/jquery.bgiframe-x.x.x-pre.js" type="text/javascript"></script>

<script src="http://cdn.wijmo.com/external/globalize.min.js" type="text/javascript"></script>

<script src="http://cdn.wijmo.com/external/jquery.mousewheel.min.js" type="text/javascript"></script>

<script src="http://cdn.wijmo.com/external/raphael.js" type="text/javascript"></script>

<script src="http://cdn.wijmo.com/jquery.wijmo-open.x.x.x.min.js" type="text/javascript"></script>

<script src="http://cdn.wijmo.com/jquery.wijmo-complete.x.x.x.min.js" type="text/javascript"></script>

</asp:Content>

11. Press F5 to run the application. Click the Click Here button. The menu appears vertically and is aligned to the right of the bottom of the button.