Set Functions

The wijmenu widget allows you to set certain events. This section shows you how to use the itemFocus.wijmenu and the itemClick.wijmenu events to click through menu items. See the Menu > Functions sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/menu/Functions .

Create an ASP.NET MVC Wijmo application.
In the Solution Explorer, click Views | Shared folder and double-click the _Layout.cshtml file to open it.
In the Solution Explorer, click the Views | Home folder and double-click the Index.cshtml file to open it.

Add the following markup to the Index.cshtml View to add a buttons and a list:

<div class="main demo">
            <!-- Begin demo markup -->
            <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&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>
                                    <ul>
                                        <li><a href="#">Bands</a>
                                            <ul>
                                                <li><a href="#">Dokken</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Fan Clubs</a></li>
                                        <li><a href="#">Songs</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Slide shows</a></li>
                        <li><a href="#">Red carpet</a></li>
                    </ul>
                </li>
                <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 & 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>
            <p>
                <button id="previous">
                    previous</button>
                <button id="next">
                        next</button>
                <button id="previousPage">
                            previousPage</button>
                <button id="nextPage">
                                nextPage</button></p>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>

Insert the following script to initialize the widget:

<script type="text/javascript">
        $(document).ready(function () {
            $("#menu1").wijmenu({
                mode: "sliding"
                //orientation: 'vertical',
            });
            $("#previous").click(function () {
                $("#menu1").focus().wijmenu("previous");
            });
            $("#next").click(function () {
                $("#menu1").focus().wijmenu("next");
            });
            $("#previousPage").click(function () {
                $("#menu1").focus().wijmenu("previousPage");
            });
            $("#nextPage").click(function () {
                $("#menu1").focus().wijmenu("nextPage");
            });
        });
    </script>
    <style type="text/css">
        p
        {
            margin: 15px 0;
        }
        p button
        {
            margin: 0 5px 0 0;
        }
    </style>

Run the application. Your menu should resemble the following image: