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

<!DOCTYPE html>
<html>
<head>
    <title>Orientation</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>Orientation Settings</h4>
            <ul class="options">
                <li>
                    <label for="orientation">Orientation:</label>
                    <input id="orientation" name="orientation" />
                </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 () {
            $("#orientation").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                value: "horizontal",
                dataSource: [{ text: "Horizontal", value: "horizontal" },
                { text: "Vertical", value: "vertical" }]
            });
            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 initMenu = function () {
                var orientation = $("#orientation").data("kendoDropDownList").value();
                $("#menu").kendoMenu({
                    orientation: orientation
                }).data("kendoMenu").wrapper.css("width", (orientation == "horizontal") ? "100%" : 120);
            };

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


    
</body>
</html>