Scroll to Top

Drop Downs

Two types of drop-downs are provided with mateialgrammi. Explore and get what you need.

SITEMAP Documentation / Components / Drop Downs

Multi dropdown is a component that will generate a menu hidden within the menu

Code copy

<div class="row">
    <div class="col m2">
        <ul class="multidropdown dropdown-primary">
            <li><a href="#">Level 0</a>
                <ul>
                    <li><a href="#">Level 1</a></li>
                    <li><a href="#">Level 1</a></li>
                    <li><a href="#">Level 1</a>
                        <ul>
                           <li><a href="#">Level 2</a>
                               <ul>
                                   <li><a href="#">Level 3</a></li>
                                   <li><a href="#">Level 3</a></li>
                               </ul>
                           </li>
                       </ul>
                   </li>
               </ul>
           </li>
       </ul>
    </div>
</div>

Ink dropper can be used as dropdown menu, It can be dropped up, we can also set the position of the dropper by simple classes.

Demo

Code copy

<div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu small small-on-s border-light on-bottom on-left grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>

You can set the position of the dropper on x-axis by using classes: "on-left" for left & "on-right" for right. Add these classes to div with menu class.

Code copy

<div class="text-center">
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Left</a>
                    <div class="menu small small-on-s border-light on-bottom on-left grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Right</a>
                    <div class="menu small small-on-s border-light on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

You can set the position of the dropper on y-axis by using classes: "on-top" for top & "on-bottom" for bottom. Add these classes to div with menu class.

Code copy

<div class="text-center">
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Top</a>
                    <div class="menu small small-on-s border-light on-top on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropmenu marginX-20">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i> Bottom</a>
                    <div class="menu small small-on-s border-light on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

You can also use different color classes with the dropper as well as button. Ink dropper is fully supported by css classes of material grammi as well as user-defined style.

Demo

Code copy

<div class="text-center">
                <div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey3 text-hover-grey1 opensans pad-5 padX-10 grey8"><i class="fas fa-bars"></i></a>
                    <div class="menu small small-on-s on-bottom on-right yellow6 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

There are three sizes for the Ink Dropper Menu: small, medium and large. you can also use responsive classes for these menu's just add -on-s, -on-m, -on-l in front of menu size classes. eg, small-on-s.

Demo

Code copy

<div class="text-center">
                <div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu medium small-on-s on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 1</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 2</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 3</a>
                                <a class="text-grey6 hover-grey3 text-hover-grey8">Link 4</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Form elements can also be used inside the Ink Dropper Menu.

Demo

Code copy

<div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu medium small-on-s on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5">Ink Dropper</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <div class="padY-10">
                                    <label for="ink-dropper-form-example">Search</label>
                                    <input type="text" class="Material-form" id="ink-dropper-form-example" label-color="#9E9E9E">
                                </div>
                                <div class="text-right">
                                    <a class="btn btn-info">Search</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

You can use Images in the menu too.

Demo

Code copy

<div class="dropmenu">
                    <a class="toggle-button shadow-dark-1 text-grey6 text-hover-grey8 opensans pad-5 padX-10 grey3"><i class="fas fa-bars"></i></a>
                    <div class="menu small small-on-s on-bottom on-right grey2 text-left">
                        <div class="pad-10 row">
                            <div class="col m12 s12 l12">
                                <h3 class="text-grey8 padY-5 text-center">Ink Dropper Image</h3>
                            </div>
                            <div class="col m12 l12 s12">
                                <div class="padY-10">
                                    <img src="1.png" class="img img-responsive">
                                </div>
                                <div class="text-right">
                                    <a class="btn btn-dark">About me</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Feedback