{"version":3,"file":"component---src-pages-examples-vertical-js-841bc84b9cb30464fcb7.js","mappings":"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","sources":["webpack://superfish-docs-2022/./src/components/vertical-menu-example.js","webpack://superfish-docs-2022/./src/pages/examples/vertical.js"],"sourcesContent":["/* eslint-disable */\n// links are invalid as they are merely examples\n\nimport React from \"react\"\nimport \"../helpers/legacy\"\nimport PrismCode from \"react-prism\"\n\nimport \"../../node_modules/superfish/src/css/superfish.css\"\nimport \"../../node_modules/superfish/src/css/superfish-vertical.css\"\n\nexport default class VerticalMenuExample extends React.Component {\n  componentDidMount() {\n    // jQuery was added to window in \"../helpers/legacy\"\n    window.jQuery('#sample-menu-3').superfish({\n      animation: {height:'show'},\n      delay: 1200,\n    })\n  }\n\n  render() {\n    return (\n      <>\n        <h2 className=\"subtitle  is-4\">The result:</h2>\n        <ul id=\"sample-menu-3\" className=\"sf-menu sf-vertical\">\n          <li className=\"current\">\n            <a href=\"#a\">menu item</a>\n            <ul>\n              <li>\n                <a href=\"#aa\">menu item</a>\n              </li>\n              <li className=\"current\">\n                <a href=\"#ab\">menu item</a>\n                <ul>\n                  <li className=\"current\"><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#aba\">menu item</a></li>\n                  <li><a href=\"#abb\">menu item</a></li>\n                  <li><a href=\"#abc\">menu item</a></li>\n                  <li><a href=\"#abd\">menu item</a></li>\n                </ul>\n              </li>\n              <li>\n                <a href=\"#\">menu item</a>\n                <ul>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                </ul>\n              </li>\n              <li>\n                <a href=\"#\">menu item</a>\n                <ul>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                </ul>\n              </li>\n            </ul>\n          </li>\n          <li>\n            <a href=\"#\">menu item</a>\n          </li>\n          <li>\n            <a href=\"#\">menu item</a>\n            <ul>\n              <li>\n                <a href=\"#\">menu item</a>\n                <ul>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                </ul>\n              </li>\n              <li>\n                <a href=\"#\">menu item</a>\n                <ul>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                </ul>\n              </li>\n              <li>\n                <a href=\"#\">menu item</a>\n                <ul>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                </ul>\n              </li>\n              <li>\n                <a href=\"#\">menu item</a>\n                <ul>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                </ul>\n              </li>\n              <li>\n                <a href=\"#\">menu item</a>\n                <ul>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                  <li><a href=\"#\">menu item</a></li>\n                </ul>\n              </li>\n            </ul>\n          </li>\n          <li>\n            <a href=\"#\">menu item</a>\n          </li>\n        </ul>\n        <br style={{ clear: 'left' }} />\n        <br style={{ clear: 'left' }} />\n        <div className=\"content\">\n          <h2>The code:</h2>\n          <p>To create an all-vertical menu, simply add the class <PrismCode>sf-vertical</PrismCode> to the parent ul along with the usual <PrismCode>sf-menu</PrismCode> class (space-separated, eg. className=\"sf-menu sf-vertical\"), and initialise as normal. For this example I will also demonstrate altering some of the options in order to create a slide-down animation and a longer delay on mouseout:</p>\n        </div>\n        <pre>\n          <PrismCode className=\"language-markup\">\n{`<!-- link to the CSS files for this menu type -->\n<link rel=\"stylesheet\" media=\"screen\" href=\"superfish.css\">\n<link rel=\"stylesheet\" media=\"screen\" href=\"superfish-vertical.css\">\n\n<!-- link to the JavaScript files (hoverIntent is optional) -->\n<script src=\"hoverIntent.js\"></script>\n<script src=\"superfish.js\"></script>\n\n<!-- initialise Superfish -->\n<script>\n\tjQuery(document).ready(function(){\n\t\tjQuery('ul.sf-menu').superfish({\n\t\t\tanimation: {height:'show'},\t// slide-down effect without fade-in\n\t\t\tdelay:\t\t 1200\t\t\t// 1.2 second delay on mouseout\n\t\t});\n\t});\n</script>`}\n          </PrismCode>\n        </pre>\n      </>\n    )\n  }\n}\n","import React from 'react'\n\nimport Layout from '../../components/layout'\nimport Seo from '../../components/seo'\nimport VerticalMenuExample from '../../components/vertical-menu-example'\nimport GeneralSupport from '../../components/general-support'\n\nconst IndexPage = () => (\n  <Layout>\n    <Seo\n      title=\"Vertical Menu Example\"\n      description=\"Superfish vertical menu example.\"\n      keywords={[\n        `jQuery`,\n        `Superfish`,\n        `Menu`,\n        `Plugin`,\n        `Example`,\n        `Vertical`,\n      ]}\n    />\n\n    <div id=\"examples\" className=\"section\">\n      <h1 className=\"title\">Example / Vertical</h1>\n\n      <div id=\"samples\" className=\"samples\">\n        <div id=\"sample3\">\n          <VerticalMenuExample />\n        </div>\n      </div>\n\n      <GeneralSupport />\n    </div>\n  </Layout>\n)\n\nexport default IndexPage\n"],"names":["VerticalMenuExample","componentDidMount","window","jQuery","superfish","animation","height","delay","render","className","id","href","style","clear","React","title","description","keywords"],"sourceRoot":""}