Collapse All Expand All

You can specify where the menu and submenus open relative to a trigger.  For this tutorial, we will be using a a button click to open the menu and trigger the position option. See the Menu > Position sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/menu/Position .

Complete the following steps:

1. Create an ASP.NET MVC Wijmo application.
2. In the Solution Explorer, click Views | Shared folder and double-click  the _Layout.cshtml file to open it.
3. Add the following markup to the_Layout.cshtml file to add buttons and a list:

   <h2>Position</h2>
   <div class="main demo">
               <!-- Begin demo markup -->
               <button id="btn1">
                   click here</button>
               <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 & 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>
               <!-- End demo markup -->
               <div class="demo-options">
                   <!-- Begin options markup -->
                   <div class="option-row">
                       <label>
                           My</label>
                       <select id="my1">
                           <option value="left">left</option>
                           <option value="center">center</option>
                           <option value="right">right</option>
                       </select>
                       <select id="my2">
                           <option value="top">top</option>
                           <option value="center">center</option>
                           <option value="bottom">bottom</option>
                       </select>
                   </div>
                   <div class="option-row">
                       <label>
                           At</label>
                       <select id="at1">
                           <option value="left">left</option>
                           <option value="center">center</option>
                           <option value="right">right</option>
                       </select>
                       <select id="at2">
                           <option value="top">top</option>
                           <option value="center">center</option>
                           <option value="bottom" selected="selected">bottom</option>
                       </select>
                   </div>
                   <!-- End options markup -->
               </div>
           </div>
   

4. Add the following script to initialize the widget:

   <script type="text/javascript">
           $(document).ready(function () {
               $("#wijmenu1").wijmenu({
                   orientation: 'vertical',
                   trigger: "#btn1"
               });
               $("#my1,#my2,#at1,#at2").change(function () {
                   $("#wijmenu1").wijmenu("option", "position", { my: $("#my1").get(0).value + " " + $("#my2").get(0).value, at: $("#at1").get(0).value + " " + $("#at2").get(0).value });
               });
           });
       </script>
   

5. Run your application.  Your application should resemble the following image:

   

 

 

---

Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback