JSFiddle - React, Tailwind, and code Playground

by brunogc

HTML

<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link rel="stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css">
<small><b>Hello!</b> This is a responsive Superfish Menu by Ryan Brackett of <a href="http://www.fullmedia.com">Full Media</a><br/>
    <br/>In this demo, you can drag the middle bar to see the responsive menu.</small>
<br/><br/><br/>
<br/>
<div id="mobnav-btn">Click Meh!</div>
<ul class="sf-menu">
    <li><a href="#">Item 1</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 1.1</a>

            </li>
            <li><a href="#">Subitem 1.2</a>

            </li>
            <li><a href="#">Subitem 1.3</a>

            </li>
            <li><a href="#">Subitem 1.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 2.1</a>

            </li>
            <li><a href="#">Subitem 2.2</a>

            </li>
            <li><a href="#">Subitem 2.3</a>

            </li>
            <li><a href="#">Subitem 2.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 3.1</a>

            </li>
            <li><a href="#">Subitem 3.2</a>

            </li>
            <li><a href="#">Subitem 3.3</a>

            </li>
            <li><a href="#">Subitem 3.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 4</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 4.1</a>

            </li>
            <li><a href="#">Subitem 4.2</a>

            </li>
            <li><a href="#">Subitem 4.3</a>

            </li>
            <li><a href="#">Subitem 4.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 5</a>

        <div...

CSS

body {
    font-family: Arial;
    font-size: 14px;
}
#mobnav-btn {
    display: none;
    font-size: 20px;
    font-weight: bold;
    background-color: blue;
    color: white;
    padding: 10px;
    cursor: pointer;
}
.mobnav-subarrow {
    display: none;
}
@media only screen and (max-width: 480px) {
    #mobnav-btn {
        display: block;
    }
    .mobnav-subarrow {
        display: block;
        background-color: #0f3975;
        opacity: .3;
        border-bottom: 1px solid white;
        border-top: 1px solid black;
        height: 20px;
        width: 30px;
        background-position: top left!important;
        position: absolute;
        top: 8px;
        right: 10px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }
    .sf-menu {
        width: 100%!important;
        display: none;
    }
    .sf-menu.xactive {
        display: block!important;
    }
    .sf-menu li {
        float: none!important;
        display: block!important;
        width: 100%!important;
    }
    .sf-menu li a {
        float: none!important;
    }
    .sf-menu ul {
        position:static!important;
        display: none!important;
    }
    .xpopdrop ul {
        display: block!important;
    }
}

JavaScript

$('#mobnav-btn').click(

function () {
    $('.sf-menu').toggleClass("xactive");


});


$('.mobnav-subarrow').click(

function () {
    $(this).parent().toggleClass("xpopdrop");


});