JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<div id="contenedor">
    <div id="botonera">
        <a data-menu="submenu_1" class="boton verde">Boton</a>
        <a data-menu="submenu_2" class="boton lila">Boton</a>
        <a data-menu="submenu_3" class="boton naranja">Boton</a>
        <div class="clear"></div>
        <div id="menu">
            <div id="submenu_1" class="submenu verde">
                <h3>submenu_1</h3>
                <p>Parrafo cualquiera</p>
                <p>Otro parrafo</p>
               </div>
            <div id="submenu_2" class="submenu lila">
                <h3>submenu_2</h3>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
            </div>
            <div id="submenu_3" class="submenu naranja">
                <h3>submenu_3</h3>
                <form>
                    <input type="text" placeholder="input 1"/><br/>
                    <input type="text" placeholder="input 2"/><br/>
                    <textarea placeholder="textarea"></textarea>
                </form>
            </div>
        </div>
    </div>

    <div id="cuerpo">
        AQUI VA EL CONTENIDO DE LA WEB
    </div>
</div>

CSS

div#contenedor { width:900px; min-width:350px; margin:20px auto; padding:0px;}
div#botonera {height:40px; background-color:#eee;}
div#botonera > .boton { display:bloc; width:100px; height:40px; float:left; text-decoration:none; cursor:pointer; color:white; font-weight:900; text-align:center;}
div#botonera > .boton.activo {color:blue;}
div.clear{clear:both;}
div#menu {position:relative; }
div#menu > div.submenu {position:absolute; width:100%; height:0px; overflow:hidden; transition: height 0.8s; z-index:900;}
div#menu > div.submenu.activo {height:200px; z-index:910;}
.verde {background-color:green;}
.lila {background-color:purple;}
.naranja {background-color:orange;}
div#cuerpo{background-color:red; height:500px;}

JavaScript

var MENU = {
    datos: {
        clase_activa: 'activo'
    },
    elementos: {
        botones: null,
        submenus: null
    },
    funciones: {
        eventos: function(){
            MENU.elementos.botones.on('click', function(e){
                MENU.funciones.toggle($(this));
            });
        },
        toggle:function($btn){
            if ($btn.hasClass(MENU.datos.clase_activa)) {
                $btn.removeClass(MENU.datos.clase_activa);
                MENU.elementos.submenus.filter('#'+$btn.attr('data-menu')).removeClass(MENU.datos.clase_activa);
            } else {
                MENU.elementos.botones.removeClass(MENU.datos.clase_activa);
                MENU.elementos.submenus.removeClass(MENU.datos.clase_activa);
                $btn.addClass(MENU.datos.clase_activa);
                MENU.elementos.submenus.filter('#'+$btn.attr('data-menu')).addClass(MENU.datos.clase_activa);
            }
        }
    },
    load: function() {
        MENU.elementos.botones = $('#botonera a.boton');
        MENU.elementos.submenus = $('#botonera div.submenu');
        MENU.funciones.eventos();
    }
};

MENU.load();