Repository navigation
Expand file tree
/
Copy pathhamburger-mode-stack.json
More file actions
1 lines (1 loc) · 8.07 KB
/
Copy pathhamburger-mode-stack.json
File metadata and controls
1 lines (1 loc) · 8.07 KB
1
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"col-lg-8 control-section\">\n <div class=\"menu-control\">\n <div id=\"layoutcontainer\" class=\"deviceLayout\">\n <div class=\"speaker\">\n <div class=\"camera\"></div>\n </div>\n <div class=\"layout\">\n <div id=\"container\">\n <ul id=\"menu\"></ul>\n </div>\n </div>\n <div class=\"outerButton\"> </div>\n </div>\n </div>\n </div>\n <div class=\"col-lg-4 menu-section property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody>\n <tr>\n <td style=\"width: 50%;padding-top:10px\">\n <div>View Mode</div>\n </td>\n <td style=\"width: 50%;padding-top:10px\">\n <div style=\"max-width: 200px\">\n <select id=\"ddlViewMode\">\n <option value=\"mobile\">Mobile</option>\n <option value=\"tablet\">Tablet</option>\n <option value=\"desktop\">Desktop</option>\n </select>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n\n\n<style>\n /**\n * ej2 Menu styles customization\n */\n .deviceLayout #menu {\n -ms-overflow-style: none;\n scrollbar-width: none;\n height: 363px;\n }\n .deviceLayout #menu::-webkit-scrollbar {\n width: 0;\n }\n\n /**\n * ej2 Menu styles\n */\n .menu-control {\n text-align: center;\n }\n\n #layoutcontainer:not(.deviceLayout) {\n margin-top: 45px;\n }\n \n .deviceLayout {\n line-height: initial;\n border: 1px solid black;\n width: 285px;\n height: 505px;\n margin: auto;\n margin-bottom: 15px;\n border-radius: 28px;\n position: relative;\n background-image: linear-gradient(to top, #ffffff, #f5f5f5);\n }\n\n .deviceLayout.tabletview {\n width: 767px;\n z-index: 1;\n }\n\n .deviceLayout .speaker {\n border: 1px solid black;\n border-radius: 5px;\n width: 20%;\n height: 5px;\n margin: 15px auto 0px auto;\n position: relative;\n }\n\n .deviceLayout .outerButton {\n width: 30px;\n height: 30px;\n border: 1px solid black;\n border-radius: 50%;\n position: absolute;\n bottom: calc(0% + 10px);\n left: calc(50% - 15px);\n }\n\n .deviceLayout .camera {\n position: absolute;\n left: calc(-15% - 10px);\n top: -100%;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid black;\n }\n\n .deviceLayout .layout {\n border: 1px solid black;\n margin: 20px 13px 0px 13px;\n }\n\n .layout #container {\n height: 405px;\n background-color: white;\n overflow: hidden;\n }\n\n #header {\n width: 100%;\n background-color: #7b8cfb;\n }\n\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Hamburger Menu sample.\n */\n\n\n // Menu items definition \n var menuItems = [\n {\n \"text\": \"Accessories\",\n \"items\": [\n {\n \"text\": \"Mobile\",\n \"id\": \"mobile\",\n \"items\": [\n {\n \"text\": \"Headphones\"\n },\n {\n \"text\": \"Batteries\"\n },\n {\n \"text\": \"Memory Cards\"\n }\n ]\n },\n {\n \"text\": \"Laptops\"\n },\n {\n \"text\": \"Desktop PC\",\n \"items\": [\n {\n \"text\": \"Pendrives\"\n },\n {\n \"text\": \"External Hard Disks\"\n }\n ]\n },\n {\n \"text\": \"Camera\",\n \"items\": [\n {\n \"text\": \"Lens\"\n },\n {\n \"text\": \"Tripods\"\n }\n ]\n }\n ]\n },\n {\n \"text\": \"Fashion\",\n \"items\": [\n {\n \"text\": \"Men\"\n },\n {\n \"text\": \"Women\"\n }\n ]\n },\n {\n \"text\": \"Home & Living\",\n \"items\": [\n {\n \"text\": \"Furniture\"\n },\n {\n \"text\": \"Decor\"\n },\n {\n \"text\": \"Smart Home Automation\"\n },\n {\n \"text\": \"Dining & Serving\"\n }\n ]\n },\n {\n \"text\": \"Entertainment\",\n \"items\": [\n {\n \"text\": \"Televisions\"\n },\n {\n \"text\": \"Home Theatres\"\n },\n {\n \"text\": \"Gaming Laptops\"\n }\n ]\n },\n {\n \"text\": \"Contact Us\"\n },\n {\n \"text\": \"Help\"\n }\n ];\n\n //Menu initialization\n var menuObj = new ej.navigations.Menu(\n {\n\n items: menuItems,\n //Enable the hamburger mode.\n hamburgerMode: true,\n //Enable the item show on click.\n showItemOnClick: true,\n // Increased duration for smooth animation.\n animationSettings: { duration: 800 }\n },\n '#menu');\n\n //DropDownList initialization\n new ej.dropdowns.DropDownList(\n {\n value: 'mobile',\n popupHeight: '200px',\n change: function (args) {\n var container = document.querySelector('#layoutcontainer');\n switch (args.value) {\n case 'mobile':\n case 'tablet':\n menuObj.close();\n container.classList.add('deviceLayout');\n container.classList[args.value === 'mobile' ? 'remove' : 'add']('tabletview');\n menuObj.element.parentElement.classList[args.value === 'mobile' ? 'remove' : 'add']('e-menu-icon-right');\n menuObj.hamburgerMode = true;\n menuObj.showItemOnClick = true;\n break;\n case 'desktop':\n container.classList.remove('deviceLayout', 'tabletview');\n menuObj.hamburgerMode = false;\n menuObj.showItemOnClick = false;\n break;\n }\n }\n },\n '#ddlViewMode');\n\n"}