Scroll to Top

Mega Menu

Mega Menu's are very important feature of the corporations. Material Grammi provides a plugin for creating mega menu's and this plugin is very extensible and customize-able. This mega menu is responsive in nature and can be embedded for small devices as this mega menu can also change the layout of dropper on small devices as well as change the HTML of the links.

SITEMAP Documentation / Js Plugins / Mega Menu

Demo

Code copy

<div class="mega-example">
    <div class="mega-nav">
        <a data-target="#megamenu-example-1" data-screen-s='1'>Menu 01</a>
    </div>
    <div class="mega-drop" id="megamenu-example-1">
        <div class="mega-item">
            <img src="17.png" class="img img-responsive">
        </div>
        <div class="mega-item">
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
        </div>
        <div class="mega-item">
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
            <a class="hover-grey3">Link</a>
        </div>
    </div>
</div>
<script>
    $(".mega-example").megaDropDown({
        dropmenuDiv: ".mega-drop",
        dropItemsDiv: ".mega-item",
        mainLinksDiv: ".mega-nav",
        d_items_bgColor: "#E0E0E0",
        d_items_Color: "#212121",
        d_items_HoColor: "#424242",
        mainNav_HobgColor: "#757575",
        mainNav_bgColor: "#E0E0E0",
        mainNav_Color: "#212121",
        mainNavDivBarBg: "#EEEEEE",
        mainNavDivPad: "0px 5px",
        mainLinksPadding: "10px 5px",
        main_nav_fontSz: 12,
        mainNavDivHeight: "35px",
        MainLinksLineH: "15px"
    });
</script>

Expandable, options.

Demo

variable default data-type options function
dropmenuDiv .mydrop-menu string class, id or tagname wrapper of the drop menu
dropItemsDiv .mydrop-items string class, id or tagname items identifier inside the drop menu
mainLinksDiv .main-nav string class, id or tagname links for the main navigation.
navDisplay horizontal string horizontal , vertical style of the navigation bar.
dropColumns 3 numeric 1 to 12 columns of drop menu
dropColumnsOns 1 numeric 1 to 12 columns of drop menu on small devices
mainLinksColumn 3 numeric 1 to 12 number of columns for main nav links
DropMenuWidth 100% string any measurement width of the drop down menu
DropperMarginLeft 0px string any measurement margin left for the dropper
DropperMarginTop 50px string any measurement margin top for the drop menu
d_items_bgColor #ffc107 string hex, rgb or rgba background color of drop items
d_items_Color #212121 string hex, rgb or rgba text color of drop items
d_items_HoColor #fafafa string hex, rgb or rgba text color of drop items on hover
mainNav_Color #212121 string hex, rgb or rgba text color of the main navigation
mainNav_bgColor #fafafa string hex, rgb or rgba background color of main navigation
mainNav_HoColor #fafafa string hex, rgb or rgba text color of link on hover
mainNav_HobgColor #ff9800 string hex, rgb or rgba background color of link on hover
D_items_fontSz 15 numeric number for pixels font size of the menu text
main_nav_fontSz 14 numeric number for pixels font size of the main navigation text
DropperOpenPos right string right, left position of the drop down menu
targetAttr data-target string attr name attribute through which target would be selected
mainNavDivWidth 100% string any measurement in its unit width of the main navigation bar
mainNavDivHeight 50px string any measurement in its unit height of the main navigation bar
MainLinksLineH 30px string any measurement in its unit line height of the main links
mainNavDivBarBg #fafafa string hex, rgb, or rgba background of navigation bar of menu
mainLinksPadding 10px string css measurement main links padding
mainNavDivPad 0px 10px string css measurement padding of the main navigation bar
dropLinksHeading h5 string tagname headings of drop links
DropMenuMax 500px string any measurement maximum height of the drop menu
activateScroll true bool true, false activate the scrollbar inside the menu

Code copy

<script>
        $(".mega-example").megaDropDown({
            dropmenuDiv: ".mega-drop",
            dropItemsDiv: ".mega-item",
            mainLinksDiv: ".mega-nav",
            d_items_bgColor: "#fafafa",
            d_items_Color: "#757575",
            d_items_HoColor: "#fafafa",
            mainNav_HobgColor: "#2196F3",
            mainNav_bgColor: "#424242",
            mainNav_Color: "#fff",
        });

    </script>

Feedback