Mega menu
The Mega menu has been designed as a replacement for the aging Classic Header. When it is inserted into the markup
it will dynamically inject itself and replace the Classic Header.
Usage
Add the following code to the <head>
of your document.
<link href="https://dds-gen4.web.unimelb.edu.au/2.0.2/integration/client.css" rel="stylesheet" /> <script src="https://dds-gen4.web.unimelb.edu.au/2.0.2/integration/client.js" async="" ></script>
Add the following code to the <body>
of your document where ...
is a JSON object. Refer to the JSON payload section below on how to structure it properly.
<div data-um-mega-menu="..."></div>
Your code should look something like this.
<html lang="en"> <head> <link href="https://dds-gen4.web.unimelb.edu.au/2.0.2/integration/client.css" rel="stylesheet" /> <script src="https://dds-gen4.web.unimelb.edu.au/2.0.2/integration/client.js" async="" ></script> </head> <body> <div data-um-mega-menu="..."></div> <div class="uomcontent"> <div class="page-inner">...</div> </div> </body> </html>
JSON payload
The shape and layout of the mega menu is configured by passing a JSON-stringified object as the data-um-mega-menu
attribute.
- If
external
is set to true it will use thealt
andsrc
to render the co-brand logo. - The
selected
attribute can be set on a major nav item to indicate that it's the relevant navigation tree topNavItems
is optionalasides
is optional
Example:
{ "facultyName": "Faculty Name", "facultyHref": "https://faculty.unimelb.edu.au", "external": false, "alt": "alt text goes here", "src": "/link/to/logo.svg", "navItems": [ { "title": "Main item", "href": "/main-item", "selected": true }, { "title": "Main item with children", "href": "/main-item-with-children", "navItems": [ { "title": "Website sections", "href": "/layouts#website-sections", "navItems": [ { "title": "Second-level item", "href": "/second-level-item" }, { "title": "Second-level item with children", "href": "/second-level-item-with-children", "navItems": [ { "title": "Third-level item-1", "href": "/third-level-item-1" } ] } ] } ], "asides": [ { "title": "Aside 1", "color": "purple", "imageUrl": "/link/to/img.jpg", "content": "Lorem ipsum dolor sit amet." }, { "title": "Aside 2", "imageUrl": "/link/to/img.jpg" } ] } ], "topNavItems": [ { "title": "Students", "href": "/students" }, { "title": "Staff", "href": "/staff" } ] }