Tombol Split

Sama dengan tombol dropdown sebelumnya, tetapi atribut data-dropdown ditaruh pada tag <span> yang terdapat di dalam tag <a>. Sedangkan tag <a> ditambah class .split.

Skrip button split.html

<div class="row ">

    <div class="columns large-8">

        <a class="button split">Button Dropdown

                <span data-dropdown="drop1"></span></a>

        <ul id="drop1" class="f-dropdown" data-dropdown-content>

            <li><a href="#">Link 1</a></li>

            <li><a href="#">Link 2</a></li>

            <li><a href="#">Link 3</a></li>

        </ul>

        <a class="button split round alert">Button Dropdown

                <span data-dropdown="drop2"></span></a>

        <ul id="drop2" class="f-dropdown" data-dropdown-content>

            <li><a href="#">Link 1</a></li>

            <li><a href="#">Link 2</a></li>

            <li><a href="#">Link 3</a></li>

        </ul>

    </div>

</div>

<script src=". ./foundation/js/vendor/j query. js"></script>

<script src=". ./foundation/js/foundation .min.js"></script>

<script>

    $ (document) .foundation () ;

</script>

Share :