JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div id="wrapper">
    <div id="main" class="navigation">
        <ul>
            <li><a id="home" href="#">home</a></li>
            <li><a id="work" href="#">work</a></li>
            <li><a id="about" href="#">about</a></li>
            <li><a id="contact" href="#">contact</a></li>
        </ul>
        
        <div class="clear"></div>
        
        <div class="bar">
            <ul id="ulhome">
                <li><a href="#">ulhome1</a></li>
                <li><a href="#">ulhome2</a></li>
                <li><a href="#">ulhome3</a></li>
            </ul>
            <ul id="ulwork">
                <li><a href="#">ulwork1</a></li>
                <li><a href="#">ulwork2</a></li>
                <li><a href="#">ulwork3</a></li>
            </ul>
            <ul id="ulabout">
                <li><a href="#">ulabout1</a></li>
                <li><a href="#">ulabout2</a></li>
                <li><a href="#">ulabout3</a></li>
            </ul>
            <ul id="ulcontact">
                <li><a href="#">ulcontact1</a></li>
                <li><a href="#">ulcontact2</a></li>
                <li><a href="#">ulcontact3</a></li>
            </ul>
        </div>
    </div>
    
    <div id="content">
    content
    </div>
</div>

CSS

* {
    padding: 0 ;
    margin: 0 ;
    border: 0 none ;
}

html, body {
    width: 100% ;
    height: 100% ;
}

#wrapper {
    width: 100% ;
    height: 100% ;
}

.clear {
    clear: both ;
}

ul {
    list-style: none ;
}

ul li {
    display: block ;
    float: left ;
}

.navigation {
    position: absolute ;
    width: 100% ;
}

.navigation > ul:first-child {
    margin-left: 100px ;
}

.navigation > ul li a {
    display: block ;
    padding: 10px ;
    text-decoration: none ;
    color: #000 ;
}

.bar {
    padding-left: 100px ;
    height: 0 ;
    overflow: hidden ;
    background-color: #333 ;
}

.bar ul {
    display: hidden ;
}

.bar ul li a {
    display: block ;
    padding: 10px ;
    text-decoration: none ;
    color: #FFF ;
}

.bar ul li a:hover {
    background-color: #444 ;
}

#content {
    padding-top: 100px ;
}

JavaScript

( function( $ ) {
    
    var methods = {
        
        init : function( e ) {
            // Animationssteuerung initialisieren
            e.t.data( 'aprocshow', false ) ;
            e.t.data( 'aprochide', false ) ;
            e.t.data( 'ashow', false ) ;
            e.t.data( 'ahide', false ) ;
            
            // Animationen stoppen
            e.bar.stop( true, true ) ;
            e.bar.clearQueue( ) ;
        },
        
        initUI : function( e ) {
            // Oberfläche initialisieren
            e.barul.hide( ) ;
        },
        
        animateBar : function( e, show ) {
            if( ! e.t.data( 'aprocshow' ) && ! e.t.data( 'aprochide' ) ) {
                methods.init.call( e.t, e ) ;
                
                if( show ) {
                    
                    e.t.data( 'aprocshow', true ) ;
                    e.bar.stop( )
                         .animate( { 'height' : '40px' }, 400, function( ) { methods.callbackAnimationBar.call( e.t, e, show ) ; } ) ;
                    
                } else {
                    
                    e.t.data( 'aprochide', true ) ;
                    e.bar.stop( )
                         .delay( 4000 )
                         .animate( { 'height' : '0px' }, 400, function( ) { methods.callbackAnimationBar.call( e.t, e, show ); } ) ;
                    
                }
            } else {
                if( show ) {
                    e.t.data( 'ashow', true ) ;
                } else {
                    e.t.data( 'ahide', true ) ;
                }
            }
        },
        
        callbackAnimationBar : function( e, show ) {
            if( show ) {
                e.t.data( 'aprocshow', false ) ;
                if( e.t.data( 'ahide' ) ) {
                    methods.animateBar.call( e.t, e, false ) ;
                }        
            } else {
                e.t.data( 'aprochide', false ) ;
                e.t.data( 'ahide', false ) ;
            ...