JSFiddle - React, Tailwind, and code Playground

by corvallo

HTML

<div id="menu" style="float:left">
                    <div id="menu-elements">
                        <p><a href="#!dashboard">Dashboard</a></p>
                        <p id="articoli">
                            
                            <a href="#!articoli">Gestione News</a>
                        </p>
                        <p><a href="#!eventi">Gestione Eventi</a></p>
                        <p><a href="#!multimedia">Multimedia</a></p>
                        <p><a href="#!utenti">Gestione Utenti</a></p>
                        
                    </div>
                    <div id="menu-elements-articoli" style="text-align:center;display:none;">
                        <p><img id="backArticoli" style="float:left;margin-left:20px;margin-top:10px;margin-right:5px;" src="./css/images/prev-menu.png">
                            <span style="line-height:40px;font-weight:bolder;">Articoli</span>
                        </p>
                    </div>
                </div>

JavaScript

$('#menu-elements > p > a').click(function(){
                        var subMenu=$(this).attr('href').substring(2,$(this).attr('href').lenght);
                        if(subMenu!="dashboard")
                        {
                            var delay=0;
                            $.each($('#menu-elements > p > a'),function(){
                                
                                $(this).animate({"marginLeft":"-=500px"},"slow");
                                
                                delay=delay+150;
                            });
                            
                            if(subMenu=="articoli"){
                                $('#menu-elements-articoli').fadeIn();
                                
                                $('#backArticoli').click(function(){
                                    $('#menu-elements-articoli').fadeOut();
                                    var delay1=0;
                                    $.each($('#menu-elements > p > a'),function(){
                                            $(this).animate({"marginLeft":"0px"},"slow");
                                            delay1=delay1+150;
                                        });
                                });
                            }
                            if(subMenu=="eventi"){
                                $('#menu-elements-articoli').fadeIn().animate({"marginLeft":"+=500px"},"slow");
                            }
                            if(subMenu=="multimedia"){
                                $('#menu-elements-articoli').fadeIn().animate({"marginLeft":"+=500px"},"slow");
                            }
                            if(subMenu=="utenti"){
                                $('#menu-elements-articoli').fadeIn().animate({"marginLeft":"+=500px"},"slow");
                            }
                        }
                    });