jube-fork/Jube.App/wwwroot/kendo/examples/menu/direction.html

<!DOCTYPE html>
<html>
<head>
    <title>Direction</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
<div id="example">

    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Direction Settings</h4>
            <ul class="options">
                <li>
                    <input id="default" name="direction" type="radio" checked="checked" /> <label for="default">default / bottom</label>
                </li>
                <li>
                    <input id="left" name="direction" type="radio" /> <label for="left">left</label>
                </li>
                <li>
                    <input id="right" name="direction" type="radio" /> <label for="right">right</label>
                </li>
                <li>
                    <input id="top" name="direction" type="radio" /> <label for="top">top</label>
                </li>
                <li>
                    <input id="custom" name="direction" type="radio" /> <label for="custom">custom:</label>
                    <input id="customValue" type="text" value="top left" class="k-textbox customValue" />
                </li>
            </ul>
            <br />
            <a class="k-button" id="apply" href="#" style="width: 80px;">Apply</a>
        </div>
    </div>

    <div class="demo-section k-content">
        <ul id="menu">
            <li>
                Men's
                <ul>
                    <li>
                        Footwear
                        <ul>
                            <li>Leisure Trainers</li>
                            <li>Running Shoes</li>
                            <li>Outdoor Footwear</li>
                            <li>Sandals/Flip Flops</li>
                            <li>Footwear Accessories</li>

                        </ul>
                    </li>
                    <li>
                        Leisure Clothing
                        <ul>
                            <li>T-Shirts</li>
                            <li>Hoodies &amp; Sweatshirts</li>
                            <li>Jackets</li>
                            <li>Pants</li>
                            <li>Shorts</li>
                        </ul>
                    </li>
                    <li>
                        Sports Clothing
                        <ul>
                            <li>Football</li>
                            <li>Basketball</li>
                            <li>Golf</li>
                            <li>Tennis</li>
                            <li>Swimwear</li>
                        </ul>
                    </li>
                    <li>
                        Accessories
                    </li>
                </ul>
            </li>
            <li>
                Women's
                <ul>
                    <li>
                        Footwear
                        <ul>
                            <li>Leisure Trainers</li>
                            <li>Running Shoes</li>
                            <li>Outdoor Footwear</li>
                            <li>Sandals/Flip Flops</li>
                            <li>Footwear Accessories</li>

                        </ul>
                    </li>
                    <li>
                        Leisure Clothing
                        <ul>
                            <li>T-Shirts</li>
                            <li>Jackets</li>
                        </ul>
                    </li>
                    <li>
                        Sports Clothing
                        <ul>
                            <li>Basketball</li>
                            <li>Golf</li>
                            <li>Tennis</li>
                            <li>Swimwear</li>
                        </ul>
                    </li>
                    <li>
                        Accessories
                    </li>
                </ul>
            </li>
            <li>
                Boy's
                <ul>
                    <li>
                        Footwear
                        <ul>
                            <li>Leisure Trainers</li>
                            <li>Running Shoes</li>
                            <li>Outdoor Footwear</li>
                            <li>Sandals/Flip Flops</li>
                            <li>Footwear Accessories</li>
                        </ul>
                    </li>
                    <li>
                        Leisure Clothing
                        <ul>
                            <li>T-Shirts</li>
                            <li>Hoodies &amp; Sweatshirts</li>
                            <li>Jackets</li>
                            <li>Pants</li>
                            <li>Shorts</li>
                        </ul>
                    </li>
                    <li>
                        Sports Clothing
                        <ul>
                            <li>Football</li>
                            <li>Basketball</li>
                            <li>Rugby</li>
                            <li>Tennis</li>
                            <li>Swimwear</li>
                        </ul>
                    </li>
                    <li>
                        Accessories
                    </li>
                </ul>
            </li>
            <li>
                Girl's
                <ul>
                    <li>
                        Footwear
                        <ul>
                            <li>Leisure Trainers</li>
                            <li>Running Shoes</li>
                            <li>Fitness Trainers</li>
                            <li>Sandals/Flip Flops</li>
                            <li>Footwear Accessories</li>
                        </ul>
                    </li>
                    <li>
                        Leisure Clothing
                        <ul>
                            <li>T-Shirts</li>
                            <li>Hoodies &amp; Sweatshirts</li>
                            <li>Jackets</li>
                            <li>Pants</li>
                            <li>Shorts</li>
                        </ul>
                    </li>
                    <li>
                        Sports Clothing
                        <ul>
                            <li>Basketball</li>
                            <li>Tennis</li>
                            <li>Swimwear</li>
                        </ul>
                    </li>
                    <li>
                        Accessories
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <script>
        $(document).ready(function () {
            var original = $("#menu").clone(true);

            original.find(".k-state-active").removeClass("k-state-active");

            $("#apply").click(function (e) {
                e.preventDefault();
                var menu = $("#menu"),
                    clone = original.clone(true);

                menu.data("kendoMenu").close($("#menu .k-link"));

                menu.replaceWith(clone);

                initMenu();
            });
            var getDirection = function () {
                var checked = $("input[type=radio]:checked")[0].id;
                return /custom|customValue/.test(checked) ? $("#customValue").val() : checked;
            };

            var initMenu = function () {
                $("#menu").kendoMenu({
                    direction: getDirection()
                });
            };

            initMenu();
        });
    </script>
</div>


    
</body>
</html>