Scroll to Top

Drop Position x-Axis

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.

SITEMAP Documentation / Components / Drop Downs / Ink Dropper / Drop Position x-Axis

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>

Feedback

Developed By Egrammi Studios