JSFiddle - React, Tailwind, and code Playground

by skydivematy

HTML

<div class="dropdown-catmenu">
    <div class="dr-menu dr-menu-close">
        <div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Destinations</a>

        </div>
        <ul class="dr-menu-content">
            <li><a href="/cat/stuff-we-love/">Stuff we LOVE... </a> 
            </li>
            <li><a href="/cat/gran/">Gran </a> 
            </li>
            <li><a href="/cat/sail/">Sail </a> 
            </li>
            <li><a href="/cat/news-stories/">News Stories </a> 
            </li>
            <li><a href="/cat/a-sailor/">tes.. </a> 
            </li>
            <li><a href="/cat/crew/">crew </a> 
            </li>
            <li><a href="/cat/boat/">boat </a> 
            </li>
        </ul>
    </div>
</div>

CSS

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.dropdown-catmenu {
}
.dr-menu {
    width: 100%;
    max-width: 400px;
    position: relative;
}
.dr-menu > div {
    cursor: pointer;
    position: absolute;
    width: 100%;
    z-index: 100;
}
.dr-menu > div .dr-icon {
    top: 0;
    left: 0;
    position: absolute;
    font-size: 150%;
    line-height: 1.6;
    padding: 0 10px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.dr-menu.dr-menu-open > div .dr-icon {
    left: 100%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
.dr-menu > div .dr-icon:after {
    content:"\e008";
    position: absolute;
    font-size: 50%;
    line-height: 3.25;
    left: -10%;
    opacity: 0;
}
.dr-menu.dr-menu-open > div .dr-icon:after {
    opacity: 1;
}
.dr-menu > div .dr-label {
    padding-left: 3em;
    position: relative;
    display: block;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 2.75;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.dr-menu.dr-menu-open > div .dr-label {
    -webkit-transform: translateY(-90%);
    -moz-transform: translateY(-90%);
    -ms-transform: translateY(-90%);
    transform: translateY(-90%);
}
ul.dr-menu-content {
    display: none;
    height: 0;
    background: #ccc;
    line-height: 1.8;
}
.dr-menu-open ul.dr-menu-content {
    opacity: 1;
    z-index: 200;
    pointer-events: auto;
    -webkit-transition: opacity 0s linear 0s;
    -moz-transition: opacity 0s linear 0s;
    transition: opacity 0s linear 0s;
}
ul.dr-menu-content li {
    display: block;
    margin: 0 0 5px 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
   ...

JavaScript

// News Catmenu Trigger Dropdown

//$('<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Destinations</a></div>').prependTo(".dr-menu");


if ($('.dr-menu').length > 0) {
    $('.dr-trigger').on('click', function (event) {
        event.preventDefault();


        if ($('.dr-menu').hasClass('dr-menu-close')) {
            $('.dr-menu').addClass('dr-menu-open').removeClass('dr-menu-close');
            $('.dr-label').css({
                'display': 'none'
            }, "slow")
            $('ul.dr-menu-content').animateAuto("height", 1000);
            $('.dr-menu-content').css({

                'display': 'block',


            });

        } else if ($('.dr-menu').hasClass('dr-menu-open')) {
            $('.dr-menu').removeClass('dr-menu-open').addClass('dr-menu-close');
            $('.dr-label').css({
                'display': 'block'
            }, "slow")
            $('ul.dr-menu-content').css({
                'height': '0',
                    'display': 'none',


            });

        }
    });
}

$.fn.animateAuto = function (prop, speed, callback) {
    var elem, height, width;
    return this.each(function (i, el) {
        el = jQuery(el), elem = el.clone().css({
            "height": "auto",
                "width": "auto"
        }).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();
        if (prop === "height") el.animate({
            "height": height
        }, speed, callback);
        else if (prop === "width") el.animate({
            "width": width
        }, speed, callback);
        else if (prop === "both") el.animate({
            "width": width,
                "height": height
        }, speed, callback);
    });
}