First download the Mega Menu ZIP file from inside your Zomex/Envato account. Extract the files and move the extracted folder to your desktop.
File Structure
Before installation let's go through the file structure of the script.
mega-menu.html - Contains all of the HTML of the Mega Menu broken down into 4 code examples (mega, dropdown, basic & mixed)
/fonts/ - Contains the fonts used by Font Awesome (icons)
/js/megamenu.min.js - Contains all of the Javascript used by the Mega Menu
/js/jquery.min.js - Contains the Javascript framework, jQuery
/css/megamenu.css - Contains all of the CSS used by the Mega Menu
/css/fontawesome.min.css - Contains the CSS of the icons frame work Font Awesome
/css/body.css - Contains the CSS of the demo page (not used by the Mega Menu)
How To Install
Installing this Mega Menu script within your existing website is a quick and easy process.
First upload the CSS, JS and fonts directories to your server or local application.
Decide which page you'd like to install the Mega Menu on.
CSS/Javascript
The CSS handles the styling of the menus (colors/spacing/design) and the Javascript handles the function.
Within the <head> section of that page paste the following:
<!-- Mega Menu -->
<link href="/css/fontawesome.min.css" type="text/css" rel="stylesheet" />
<link href="/css/megamenu.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery.min.js"></script>
<script src="/js/megamenu.min.js"></script>
<!-- Mega Menu -->These lines load the CSS and Javascript files used by Mega Menu, the jQuery Javascript framework and the CSS used by the icons (Font Awesome). If your website is already using jQuery or Font Awesome v6.1 you can remove those lines from the above.
Paths - You will need to modify the paths to match your upload location. The above will work if your CSS, Javascript and fonts directories have been uploaded to root (public_html).
HTML
The HTML handles the structure/data of the menus.
Open mega-menu.html in your text editor. This file contains all of the HTML used by the Mega Menu broken down into 4 options. The options are mega menu, dropdown, basic & mixed. Search the file for the version of menu you'd like to install. Each version is cleary separated within the code.
For this example let's go with the mega menu layout. Select and copy all of the code between the two <!-- Mega Menu - Mega --> lines.
Paste this code within the <body> section of your website where you would like the menu to be displayed.
Completed
Your menu should now be displayed within your page as per our demo. If you run into any issues please contact us, we will be happy to assist you.
Customization
The Mega Menu is fully customizable as all of the code is open and editable. Please refer to our Mega Menu documentation page to find our customization guides.
Comments
If you have any questions please leave a comment below or contact our support.