Scroll to Top

Js Plugins can be use to increase the creativeness of design and to remove the limitations to some extent. Our team is still working on new plugins and they will be included in the package soon.

SITEMAP Documentation / Js Plugins

Create Beautiful slideshow with Material Grammi as Material Grammi uses the animate.css library for transitions and you can also create your custom animation and add it to the slideshow plugin.

Demo

Code copy

<div class="row">
        <div class="col m12 s12 l12">
            <div class="mainSlider">
                <div class="slide">
                    <img src="4.png" class="img img-responsive fullPic">
                </div>
                <div class="slide">
                    <img src="3.png" class="img img-responsive fullPic">
                </div>
                <div class="slide">
                    <img src="2.png" class="img img-responsive fullPic">
                </div>
                <div class="slide">
                    <img src="1.png" class="img img-responsive fullPic">
                </div>
            </div>
        </div>
    </div>

<!-- Initialize after including jquery and material grammi .js -->

<script>
        $(".mainSlider").slideshow({
                autoPlay: true,
                controlsAutohide: true,
                controlsBtnClass: 'btn btn-light marginX-5 padX-10 padY-5',
                outbox: false,
                alignImages: true,
                setHeight: true,
                WaitTime: 4000,
                animationNextEntrance: "pulse",
                animationNextExit: "fadeOutUp"
            });
    </script>

Options

Through these options you can make creative sliders as your wishes.

Demo

variable default data-type options function
slides .slide string class, tagname select the div to slide
animationTimeEnterance 500 numeric any number it will count milli seconds, 1000ms = 1s set the time of animation entrance
animationTimeExit 400 numeric any number set the time of animation exit
animationNextEntrance slideInDown string animation name @keyframe animation to perform in normal entrance
animationNextExit slideOutDown string animation name @keyframe animation to perform in normal Exit
animationPreviousEntrance slideInDown string animation name @keyframe animation on prev button click entrance
animationPreviousExit slideOutUp string animation name @keyframe animation on prev button click exit
WaitTime 2000 numeric any number in ms total time of the animation
animationTimeFunction ease-in-out string timing function how the animation would carry out
mainHeight 100 numeric number in pixels initially sets the height of slider
alignImages true bool true, false center align image vertically and horizontally.
alignReference .fullPic string class, tagname alignment will occur to these referers only
autoPlay false bool true, false automatically plays the slider
addControls true bool true, false will hide or show the slide controls
controlsAutohide false bool true, false automatically hides the slider controls after sometime.
controlsBtnClass btn btn-dark pad-5 marginX-5 hover-blue8 string class name it will activated on controls
controlPrev prev string any html previous button control name or html/symbol
controlNext next string any html next button control name or html/symbol
controlStart start string any html start button control name or html/symbol
controlStop stop string any html stop button control name or html/symbol
controlPause pause string any html pause button control name or html/symbol
outbox false bool true, false animation will occour out of the box if true.
HeightOnLarge 600 numeric number in px height of slider on large devices
HeightOnMedium 400 numeric number in px height of slider on large devices
HeightOnSmall 100 numeric number in px height of slider on large devices
setHeight true bool true, false set the height of the images.

Code copy

<script>
        $(".mainSlider").slideshow({
            autoPlay: true,
            controlsAutohide: true,
            controlsBtnClass: 'btn btn-light marginX-5 padX-10 padY-5',
            outbox: false,
            alignImages: true,
            setHeight: true,
            WaitTime: 3000,
            animationNextEntrance: "pulse",
            animationNextExit: "slideOutRight",
            HeightOnMedium: 300
        });

    </script>

Commonly referred as Light Box, modal, etc. create your customized dialog and use your favorite colors with the color classes of Material Grammi. choose the width of modal and margin from top of the screen. choose how much opacity should modal's overlay have, you can also choose the rgb value of background of modal's overlay. choose any content class and any close class of modal. You can use grid system inside the modal's contents.

Demo

Open Modal

Dialog Heading

Dialog can be manipulated into different examples.

Click the close button to close this dialog.

You can add anything in the modal

Code copy

<!-- Button to launch dialog / modal -->
<a class="openmodal btn btn-dark" data-target="#dialog1"> Open Modal </a>
<!-- Dialog which will appear after clicking launch dialog button -->
<div id="dialog1">
    <div class="dialog-contents shadow-dark-1">
        <div class="grey8 text-white padX-20 padY-15">
            <p class="font-20">Dialog Heading</p>
        </div>
        <div class="amber6 padY-40 padX-20">
            <p class="padY-10 text-grey8">Dialog can be manipulated into different examples.</p>
            <p class="padY-10 text-grey8">Click the <a class="dialog-close hover-grey3 radius-5 grey2 pad-5">close</a> button to close this dialog.</p>
        </div>
        <div class="grey8 text-grey2 padX-20 padY-10 row">
            <div class="col m8 l8 s12">
                <p>You can add anything in the modal</p>
            </div>
            <div class="col m4 l4 s12">
                <a class="dialog-close right btn btn-flat-transparent text-grey2 btn-danger animated bounce">close</a>
            </div>

        </div>
    </div>
</div>
<!-- Initialize dialog after jquery and materialgrammi javascript files -->
<script>
    $(".openmodal").dialog({
        background: "rgba(0,0,0,0.4)",
        speed: 800,
        TopMargin: "5%"
    });

</script>

Options

Make your dialog box outstanding by using these options.

Demo

variable default data-type options function
Dialogwidth 80% string any measurement width of the dialog/modal box
mainScroll false bool true, false do you want the scroll to activate on main screen
dialogHei 200px string any measurement set the time of animation exit
contentClass .dialog-contents string class, tagname, id dialog main content, will be helpfull in activating inner scroll
bodyClass .dialog-body string class, tag or id class of the body
closeClass .dialog-close string class, tag or id by clicking on this dialog can be closed
innerScroll true bool true, false activate scroll on content body
attrSet data-target string any attribute it will get the modal id or class to activate modal from this attribute.
TopMargin 10% string any measurement gives the dialog margin from top
speed 1200 numeric any number in ms. speed of appearance and dis-appearance
animIn true bool animation name @keyframe animation on entrance
animOut .fullPic string animation name @keyframe animation on exit
background rgba(0,0,0,0.1) string css background select the background of the dialog/modal
ShowDialog false bool true, false will show dialog when true without click
timingFunction ease-in-out string timing function css timing function to perform on animation

Code copy

<script>
        $(".openmodal").dialog({
            background: "url(any-image.jpg)"
        });
    </script>

Use this plugin to filter alike elements. Make filter on text, can be used with Data Science Projects.

Demo

Code copy

<div class="row padY-20">
    <div class="col m12 s12 l12">
        <input type="text" class="form-control" placeholder="Please Type anyword starts from A, B, or C" id="myInput">
        <ul id="myUL">
            <li>
                <a class="font-30 text-grey8">A</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Action Script</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Argus,</a>
                <a class="filt">Autocoder,</a>
                <a class="filt">Assembly Language</a>
            </li>
            <li>
                <a class="font-30 text-grey8">B</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Babbage</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">Bean Shell</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">BASIC</a>
            </li>
            <li>
                <a class="font-30 text-grey8">C</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">C++</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">CHIP-8</a>
            </li>
            <li class="fildiv pad-10 grey3 marginB-10">
                <a class="filt">CLIST</a>
            </li>
        </ul>

    </div>
</div>
<!--Initialize the list filter-->
<script>
    $("#myInput").filterList({
        div: "#myUL",
        watchtext: ".filt",
        watchdiv: ".fildiv"
    });
</script>

Options

List Filter is an expandable plugin. use these options to customize your ideas.

Demo

variable default data-type options function
div .filtered-list string class, tagname, id main wrapper
watchtext .filter-element string class, tagname, id find the text in this div, element.
watchdiv .filter-file string class, tagname, id find the watch text in this div, element.

Code copy

<script>
        $("#myInput").filterList({
            div: "#myUL",
            watchtext: ".filt",
            watchdiv: ".fildiv"
        });

    </script>

Use this plugin to filter Images with the css3 filters.

Demo

Sepia

Grayscale

Blur

Code copy

<img src="3.png" class="img img-responsive PutEffect" effect-name="sepia" effect-value="60%" />
<script>
    $(".PutEffect").iMageEffects({
        Attributes: true
    });
</script>

Options

Customize your image effects by using these options.

Demo

variable default data-type options function
iMageEffects sepia string CSS Effect name Effect to be applied on image
effectval 50% string Percentage in string Percentage of effect
Attributes false bool true, false if you want to execute by attributes turn it true.
attr_name effect-name string attr name to get the name of effect from attribute, use this attr
attr_value effect-value string attr name to get the value of effect from attribute, use this attr

Code copy

<script>
    $(".PutEffect").iMageEffects({
           Attributes: true
    }); 
</script>

Chips are used to represent different type of html informations. These chips come with the close button and you can change the chip to uncloseable by excluding the close class. or you can also use other than close class to close the chip, see the options for more information.

Demo

CSS3 ×

Code copy

    <div class="chip blue8 text-grey1">
        CSS3
        <a class="close text-hover-white">×</a>
    </div>
    
    <script>
        $(".chip").chips(); 
    </script>

Options

customization options.

Demo

variable default data-type options function
round 25px string pixels border radius
closebtn .close string class, id, element name of the class through which chip can be closeable.
padX 10px string pixels paddings from left and right
padY 5px string pixels padding from top and bottom
marGin 10px string margin in px
ImgHeight 50 numeric number for pixel height of the image in chip.
Imgs false bool true, false if chip have image turn this true

Code copy

<script>
    $(".chip").chips({imgs: true});
</script>

This plugin will automatically devide your content divs and users will be able to paginate through your content.

Demo

Post 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 05

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 06

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code copy

<div class="pager">
    <div class="row grey3 padY-20 padX-10">
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 01</h3>
                <img src="10.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 02</h3>
                <img src="12.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 03</h3>
                <img src="17.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 04</h3>
                <img src="11.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 05</h3>
                <img src="16.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 06</h3>
                <img src="18.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>
<!--Initialize The Plugin-->
<script>
    $(".pager").pagination({
        itemstopaginate: ".post",
        itemsPerPage: 3,
        paginationstyle: "top",
        listBackColor: "#FFC107",
        listItembgCOlor: "#fafafa",
        listItemCOlor: "#212121",
        listSelectionbgColor: "#4CAF50",
        listSelectionColor: "#fafafa",
        listPadding: "5px 15px",
        listMargin: "0px 5px"
    });

</script>

Options

pagination customization options.

Demo

variable default data-type options function
itemsPerPage 5 numeric number number of items per page
itemstopaginate .paginateMe string class, id, element item identifier => to be paginated.
listBackColor #212121 string Hex Or rgb, rgba backgound of pagination bar.
listItembgCOlor #e0e0e0 string Hex Or rgb, rgba background color of the page number button.
listItemCOlor #212121 string Hex Or rgb, rgba text color of page number in pagination
listSelectionbgColor #2962ff string Hex Or rgb, rgba page selected number background color.
listSelectionColor #fff string Hex Or rgb, rgba page selected number text color.
listPadding 5px 10px string padding in pixels padding of the list
listMargin 5px string margin in pixels margin for the list
paginationstyle bottom string top, bottom or both position of the page number bar.

Code copy

<script>
        $(".pager").pagination({itemstopaginate: ".post", itemsPerPage: 3, paginationstyle: "top"}); 
</script>

Some people call it sidebar, some drawer and some might call it bottom sheets. we call it hidden bar because it is all in one. This bar can be used as menu, can be used as hidden content trigger on click etc.

Demo

From Left From Right From Top From Bottom

Hidden Bar Left

Hidden Bar Left

Hidden Bar Left

Hidden Bar Left

Code copy

<a class="btn btn-flat btn-success" id="openHiddenBarLeft">From Left</a>
<div class="sidebarLeft green8" data-closebtn=".close-left" data-openbtn="#openHiddenBarLeft">
    <div class="row padY-10">
        <div class="col m9 l9 s12">
            <p class="text-grey4 padL-10">Hidden Bar Left</p>
        </div>
        <div class="col m3 l3 s12">
            <a class="close-left btn btn-light">close</a>
        </div>
    </div>
</div>
<script>
    $(".sidebarLeft").HiddenBar({
        behindNavbar: false
    });
</script>

Options

Expand the hidden bar with these options.

Demo

variable default data-type options function
sidebarType overlay numeric overlay, offcanvas and fullscreen style of the hidden bar
BarPosition left string left, top, right, bottom position of the hidden bar
HiddenBarWidth 250px string any meaurement with its unit hidden bar width
HiddenBarHeight 200px string any meaurement with its unit hidden bar height
animSpeedOn 50 numeric time in microseconds appearing time of hidden bar
animSpeedOff 10 numeric time in microseconds disappearing time of hiddenbar
marginLeftCombo 25px string any measurement with its unit. when type is overlay, after the initiating it would combine two divs, second div margin is required.
allowScroll false bool true, false allow the scrollbar inside the hidden bar
behindNavbar true bool true, false hiddenbar should appear on navbar or behind navbar

Code copy

    <script>
        $(".sidebarLeft").HiddenBar({behindNavbar: false});
    </script>

use this plugin to instantly fix your div or any element, this plugin is expandable.

Demo

Activate this plugin

this div is fixed.

close

Code copy

<a class="btn btn-warning s" id="clicktoopenfixed">Activate this plugin</a>
    <div class="pad-20 red6 thisisfixed border-dark">
        <p class="text-white">this div is fixed.</p>
        <a class="btn btn-dark" id="closeFixedDiv">close</a>
    </div>
<script>
        $(document).ready(function(){
            $(".thisisfixed").hide();
            $("#closeFixedDiv").click(function(){
                $(".thisisfixed").hide();
            });
            $(".thisisfixed").fixedDiv();
            $("#clicktoopenfixed").click(function(){
                $(".thisisfixed").show();
            });
        });
    </script>

Options

Expandable, options

Demo

variable default data-type options function
positiOnX right string left, right horizontal position
positiOnY bottom string top, bottom vertical position
DivMarginX 30px string any measurement margin from left and right
DivMarginY 80px string any measurement margin from top and bottom

Code copy

<script> 
    $(".thisisfixed").fixedDiv({positiOnX: 'left'});
</script>

Simple snackbar is used for major or minor notification purposes.

Demo

click to open snackbar

Code copy


    <script>
            $(document).snackbar({
                hide: false,
                message: "Welcome to Material Grammi",
                timer: 5000,
                bgColor: "#0d47a1",
                cOlor: "#fafafa"
            });
    </script>

Options

settings of the plugin

Demo

variable default data-type options function
bgColor #212121 string hex, rgb or rgba background color of the snackbar
cOlor #fafafa string hex, rgb or rgba text color of the snackbar
timer 2000 string any time in microseconds after this time snackbar will hide
message this is a simple message string any string message to show
hide true bool true, false hide on page load
delayed 0 numeric time in microseconds delay of the snackbar

Code copy


    <script>
            $(document).snackbar({
                hide: false,
                message: "Welcome to Material Grammi",
                timer: 5000,
                bgColor: "#0d47a1",
                cOlor: "#fafafa"
            });
    </script>

This plugin is simply adding class if the element is within the scroll. working as wow.js but you can create your custom animation and you can also use animate.css with this plugin as well. You can create custom functionallity with this plugin which will be activated when the element is within the scroll, scalability of this plugin depends upon your imagination. To use this pugin with animate.css add animated and keyframes classes to the activate-class, data-duration, data-delay attributes and then initiate the jquery or define duration and delay in options. see the options table.

Demo

activate on scroll

Code copy

<a class="activateme btn btn-success" activate-class="animated bounce">activate on scroll</a> 
    <script>$(".activateme").ScrollFactor(); </script>

Options

expandable, options.

Demo

variable default data-type options function
everytime false bool true, false you want to execute functionality everytime
animation true bool true, false you want to use animations?
duration 3 numeric time in seconds duration of the animation
delay 0 numeric time in seconds delay of the animation

Code copy

<script>$(".activateme").ScrollFactor({animation: false}); </script>

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.

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>

Options

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>

Implement the ripple effects on any object. This plugin is customizable within limits with two type of events *click and *hover.

Demo

Click to ripple

Code copy

<a class="btn btn-primary Exampleripple">Click to ripple</a>
    <script>
        $(".Exampleripple").rippleEffect();
    </script>

Options

expandable options.

Demo

variable default data-type options function
FadeTime 3000 numeric any number of time in microseconds fade duration of the ripple
type click string click, hover event on which it will be activated

Code copy

<script> $(".Exampleripple").rippleEffect({FadeTime: 2000}); </script>

Navigate within the document on page smoothly by using this plugin.

Demo

Click link 01, link 02, .. Buttons below.

Code copy

            <a class="scrollspy" data-target="#id-of-target">go to link 1</a>
            <a class="scrollspy" data-target=".class-of-target">go to link 2</a>
            <div id="id-of-target"> 
                <p>This is the example that could be used with id</p>
            </div>
            <div class="class-of-target"> 
                <p>This is the example that could be used with class</p>
            </div>
            <script>$(".scrollspy").scrollSpy();</script>

Reduce your text to your controlled letters by using this plugin. user can view text by clicking buttons.

Demo

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Code copy

<p class="mini-text text-grey8">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

<script>
        $(".mini-text").textminifier({
            more_text: "more",
            less_text: "less",
            moreClass: "text-blue8",
            lessClass: "text-red8"
        });
</script>

Animate your text by simple plugin.

Demo

This is Demo of textglow plugin. It can be useful in many projects.

Code copy

<p class="text-glow">This is Demo of textglow plugin. It can be useful in many projects.</p>
<script>
        $(".text-glow").textglow({
            speed: 200
        });
</script>

Feedback