JSFiddle - React, Tailwind, and code Playground

by matthewbj

HTML

<nav>
    <a title="View pricing information" href="http://kapfeedback.com/pricing">Pricing</a> | 
    <a title="Login to your KAP Feedback account" href="http://kapfeedback.com/login">Login</a> | 
    <a title="Get a free KAP Feedback account" href="http://kapfeedback.com/login?m=signup">Signup</a>
</nav>

JavaScript

/*
  from KAP Site JS
  (C) 2012 KAP Feedback. All Righst Reserved.
*/

(function ($) {
    $.fn.mobileNav = function () {
        var nhtml = '<select name="mobilNav" id="mobileNav" style="display:none">';
        this.find('a').each(function (i) {
            nhtml += '<option value="' + $(this).attr('href') + '">';
            nhtml += $(this).text();
            nhtml += '</option>';
        });
        nhtml += '</select>';
        this.append(nhtml);
        $(window).resize(function () {
            var width = $(window).width();
            if (width <= 600) {
                $("#mobileNav").show()
            } else {
                $("#mobileNav").hide()
            }
        });
        $(document).on("change", "#mobileNav", function () {
            //window.location.href = $(this).val();
            console.log($(this).val())
        });
    };
})(jQuery);

$('nav').mobileNav();