ComponentOne Wijmo Open for Juice UI
Wijmo Open for Juice UI Extender Controls / WijMenu / WijMenu Task-Based Help / Setting Menu Triggers
In This Topic
    Setting Menu Triggers
    In This Topic

    You can change the trigger that opens the submenus. For this tutorial, we will be using a right click to trigger the submenus to open.

    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 a standard Panel to the main content of your page.
    3. Add the following markup within the <asp:Panel> tags to create a list that will become the menu.
      <ul id="menu1">
      
                  <li><a href="#">MenuItem</a></li>
      
                  <li><a href="#">Breaking News</a>
      
                      <ul>
      
                          <li class="header">
      
                              <h3>
      
                                  header2</h3>
      
                          </li>
      
                          <li class="separator">s1</li>
      
                          <li><a href="#">Entertainment</a></li>
      
                          <li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
      
                          <li><a href="#">A&amp;E</a></li>
      
                          <li><a href="#">Sports</a> </li>
      
                          <li><a href="#">Local</a></li>
      
                          <li><a href="#">Health</a></li>
      
                      </ul>
      
                  </li>
      
                  <li><a href="#">Entertainment</a>
      
                      <ul>
      
                          <li><a href="#">Celebrity news</a></li>
      
                          <li><a href="#">Gossip</a></li>
      
                          <li><a href="#">Movies</a></li>
      
                          <li><a href="#">Music</a>
      
                              <ul>
      
                                  <li><a href="#">Alternative</a></li>
      
                                  <li><a href="#">Country</a></li>
      
                                  <li><a href="#">Dance</a></li>
      
                                  <li><a href="#">Electronica</a></li>
      
                                  <li><a href="#">Metal</a></li>
      
                                  <li><a href="#">Pop</a></li>
      
                                  <li><a href="#">Rock</a>
      
                       <li><a href="#">Finance</a>
      
                      <ul>
      
                          <li><a href="#">Personal</a>
      
                              <ul>
      
                                  <li><a href="#">Loans</a></li>
      
                                  <li><a href="#">Savings</a></li>
      
                                  <li><a href="#">Mortgage</a></li>
      
                                  <li><a href="#">Debt</a></li>
      
                              </ul>
      
                          </li>
      
                          <li><a href="#">Business</a></li>
      
                      </ul>
      
                  </li>
      
                  <li><a href="#">Food &#38; Cooking</a>
      
                      <ul>
      
                          <li><a href="#">Breakfast</a></li>
      
                          <li><a href="#">Lunch</a></li>
      
                          <li><a href="#">Dinner</a></li>
      
                          <li><a href="#">Dessert</a>
      
                              <ul>
      
                                  <li><a href="#">Dump Cake</a></li>
      
                                  <li><a href="#">Doritos</a></li>
      
                                  <li><a href="#">Both please.</a></li>
      
                              </ul>
      
                          </li>
      
                      </ul>
      
                  </li>
      
                  <li><a href="#">Lifestyle</a></li>
      
                  <li><a href="#">News</a></li>
      
                  <li><a href="#">Politics</a></li>
      
                  <li><a href="#">Sports</a></li>
      
                  <li><a href="#">Novels</a></li>
      
                  <li><a href="#">Magazine</a></li>
      
                  <li><a href="#">Books</a></li>
      
                  <li><a href="#">Education</a></li>
      
              </ul>
      
    4. In Source view, 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>
      
    5. Select View | Properties Window in the Visual Studio menu.
    6. Click the drop-down list at the top of the Properties window and select Panel1_WijMenu.
    7. Set the Trigger property to .wijmo-wijmenu-item
    8. Set the TriggerEvent property to RtClick.
    9. Press to run the application. Note that the submenus only appear when you right click on the main menu item.