bYou 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 with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
2. Add an input button to the main content of your page using the following markup:

   <input type="button" id="btn1" value="Click Here" />
   

3. Add a standard Panel control to the main content of  your page.
4. 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>
   

5. Use the following markup to add a WijMenu control to the page and set the TargetControlID to Panel1.

   <cc1:WijMenu ID="Panel1_WijMenu" runat="server"   
   

           TargetControlID="Panel1">
   

   </cc1:WijMenu>
   

6. 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>
   

7. After the makrup 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>
   

8. 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>
   

9. 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.