JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<nav id="nav">
                        <span class="mob-nav" data-hide="tab desk"><a href="#" id="home-button" class="icon-home">Home</a></span>
                        <a href="#" id="menu-button" data-hide="tab desk" class="icon-menu">Menu</a>
                        <ul id="root" class="tablesque open">
                            <li class="on" data-hide="mob"><a href="#" class="icon-home">Home</a></li>
                            <li><a href="#">Marketplace</a></li>
                            <li><a href="#">Sale Items</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Latest Stock</a></li>
                            <li><a href="" data-target="#browse">Browse Stock</a>
                                <div class="mm">
                                    <div class="mm_col">
                                        <ul id="browse" >
                                            <li><a href="" data-target="#clothing">Clothing</a>
                                                <ul id="clothing" class="show-first" data-show-first-count="3">
                                                    <li><a href="#">Sub section</a></li>
                                                    <li><a href="#">Sub section</a></li>
                                                    <li><a href="#">Sub section</a></li><li class="view-parent"><a class="view-all" href="#">View All</a></li>
                                                    <li class="li-hide"><a href="#">Sub section</a></li>
                                                    <li class="li-hide"><a href="#">Sub section</a></li>
                                                    <li class="li-hide"><a href="#">Sub section</a></li>
                                                </ul>
                                            </li>
                                            <li><a href=""...

CSS

html, body {margin:0; height:100%; min-height:100%;}
#mobile-nav {margin:0px; border:1px solid red; position:relative; overflow:hidden; overflow-x: hidden;
  overflow-y: hidden; height:400px;}
ul {display:block; margin:0; padding:0; width:100%;}
li {display:block; background:#eee;}
li ul {
    display:block;
    position:absolute; top:0; left:100%;
    z-index:0;
    width:100%;
}
li ul ul {
    display:none;
}
li ul:target {
    display:block!important;
    z-index:1000;
}

li.back {
    background:orange
}

JavaScript

$(function(){
    console.clear();
    var $desktopNav = $("#nav");
    var $nav = $desktopNav.clone();
    //prefix any id's with mobile-
    $nav.find("*[id]").attr("id",function(){return "mobile-"+this.id;});
    $nav.attr("id","mobile-nav");
    //prefix any anchors id's with mobile-
    $nav.find("*[data-target^='#']").attr("href",function(){return "#mobile-"+$(this).data("target").replace("#","");});
    
    //unwrap
    $nav.find(".mm_col>ul").unwrap();
    //merge sibling uls
    $nav.find(".mm").each(function(){
        var $this = $(this);
        var $firstul = $this.find("ul:first");
        var $siblinguls = $this.find("ul+ul");
        var $otherlis = $siblinguls.children("li");
        $otherlis.appendTo($firstul);
        $siblinguls.remove();
    });
    //more unwrapping
    $nav.find(".mm_col").unwrap();
    
    //remove these
    $nav.find(".view-parent").remove();
    $nav.find(".li-hide").removeClass("li-hide");
    
    //add a back link
    $nav.find("ul ul").each(function(){
        var $this = $(this);
        var $id = $(this).parent("li").parent("ul").attr("id");
        var $text = $(this).parent("li").find("a:first").text();
        var $back = ("<li class='back'><a href='#"+$id+"'>&larr; "+$text+"</a></li>");
        $this.prepend($back);
    });
    
    //this is what your new nav looks like:
    console.log($nav[0]);
    
    //add it to the DOM after the desktop nav:
    $desktopNav.after($nav);
    
    //hide the desktop nav:
    $desktopNav.hide();
    
    //resize
    $nav.find("a").on("click mousedown touchstart",function(){
       var href = $(this).attr("href");
        var $target = $nav.find(""+href);
        console.log($target.outerHeight());
        $nav.css("height",$target.outerHeight()+"px");
    })
});