- Download the zipped pack from codecanyon and extract to a folder on your computer.
- Include css and js files to your project.
- Copy HTML code from one of the demo files.
- Replace demo content with yours.
The main HTML structure of the menu consists of list items, that can contain another nested items. Each item contains link, and optional icon. Here is the basic structure:
Collection Responsive Menu includes 11 css files.
- demo.css - demo page styles
- sky-mega-menu.css - required main styles
- sky-mega-menu-ie8.css - styles for IE8
- sky-mega-menu-red.css - red color scheme
- sky-mega-menu-orange.css - orange color scheme
- sky-mega-menu-green.css - green color scheme
- sky-mega-menu-purple.css - purple color scheme
- sky-mega-menu-pink.css - pink color scheme
- sky-mega-menu-yellow.css - yellow color scheme
- sky-mega-menu-blue.css - blue color scheme
- sky-mega-menu-black.css - black color scheme
The file "sky-mega-menu.css" contains all of the specific styling and separated into sections:
- level 1
- level 2+
If you would like to edit a specific section, simply find the appropriate label in the CSS file.
This menu uses jQuery library and jQuery placeholder plugin. These files need only for placeholder support in IE8 and IE9, so don't include them if you are not using forms.
There are 9 color schemes at your disposal. Cyan is the default scheme and to choose other you need to include appropriate css file. For example, if you want to use orange scheme include sky-mega-menu-orange.css file:
Mega Menu includes 3 different responsive versions: icons, stack and switcher. To choose one of them you need to add specific class to the main container: sky-mega-menu-response-to-switcher, sky-mega-menu-response-to-stack or sky-mega-menu-response-to-icons. If you don't want to use responsiveness just do not add any of these classes.
Also, when you are using switcher version you need to add additional element:
The default animations effect is fade and there are 3 additional classes for choosing animations: sky-mega-menu-anim-scale, sky-mega-menu-anim-flip, sky-mega-menu-anim-slide. For example, if you want scale animation effect:
To change menu position you need to add one of 3 classes: sky-mega-menu-pos-right, sky-mega-menu-pos-bottom, sky-mega-menu-pos-left. If you need fixed version of the menu add sky-mega-menu-fixed class to the menu element: