Collection Responsive Menu, Forms and grid, amination

    Rating: ★★★★☆
    View: 643
    Download: 660
    Từ khóa:


    1. Download the zipped pack from codecanyon and extract to a folder on your computer.
    2. Include css and js files to your project.


    3. Copy HTML code from one of the demo files.
    4. Replace demo content with yours.

    HTML structure

    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:

    CSS structure

    Collection Responsive Menu includes 11 css files.

    1. demo.css - demo page styles
    2. sky-mega-menu.css - required main styles
    3. sky-mega-menu-ie8.css - styles for IE8
    4. sky-mega-menu-red.css - red color scheme
    5. sky-mega-menu-orange.css - orange color scheme
    6. sky-mega-menu-green.css - green color scheme
    7. sky-mega-menu-purple.css - purple color scheme
    8. sky-mega-menu-pink.css - pink color scheme
    9. sky-mega-menu-yellow.css - yellow color scheme
    10. sky-mega-menu-blue.css - blue color scheme
    11. sky-mega-menu-black.css - black color scheme

    The file "sky-mega-menu.css" contains all of the specific styling and separated into sections:

    1. defaults
    2. level 1
    3. level 2+
    4. positions
    5. animations
    6. grid
    7. icons
    8. forms
    9. pad
    10. phone

    If you would like to edit a specific section, simply find the appropriate label in the CSS file.

    JavaScript files

    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.

    Color schemes

    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:


    Mobile versions

    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-switchersky-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-scalesky-mega-menu-anim-flipsky-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-rightsky-mega-menu-pos-bottomsky-mega-menu-pos-left. If you need fixed version of the menu add sky-mega-menu-fixed class to the menu element:


    loading Đang tải...

    template được ưa chuộng