JSFiddle - React, Tailwind, and code Playground

by jarod51

HTML

<div id="cssmenu">
    <ul id="list">
        <li id="item1"><a href="#home">Home</a></li>
        <ul class="hide">
            <li><a href="#home2"></a></li></ul>
        <li id="item3"><a href="#newsletter">Newsletter</a></li>
        <li id="item4"><a href="#directions">Directions</a></li>
        <li id="item5"><a href="#directions2">Directions2</a></li>
        <li id="item6"><a href="#contact">Contact us</a></li>
		<li id="item7"><a href="#actor">actor</a></li>
		<ul class="hide">
		<li id="item8" class="hide"><a href="#actor2"></a></li>
		<li id="item9" class="hide"><a href="#actor3"></a></li></ul>
		<li id="item10"><a href="#market">market</a></li>
		<ul class="hide">
		<li id="item11" class="hide"><a href="#market2"></a></li>
		<li id="item12" class="hide"><a href="#market3"></a></li></ul>
		<li id="item13"><a href="#calendar">calendar</a></li>
		
    </ul>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
</div>
<div id="wrap">
    <div id="home" class="panel">
    <h2>Home</h2>
    </div>
	<div id="home2" class="panel">
    <h2>We are still in Home item</h2>
    </div>
    <div id="newsletter" class="panel">
        <h2>Newsletter</h2>
    </div>
    <div id="directions" class="panel">
        <h2>Directions</h2>
    </div>
    <div id="directions2" class="panel">
        <h2>Directions2</h2>
    </div>
    <div id="contact" class="panel">
        <h2>Contact</h2>
    </div>
	<div id="actor" class="panel">
        <h2>actor</h2>
    </div>
	<div id="actor2" class="panel">
        <h2>we are still in actor</h2>
    </div>
	<div id="actor3" class="panel">
        <h2>we are still in actor</h2>
    </div>
	<div id="market" class="panel">
        <h2>market</h2>
    </div>
	<div id="market2" class="panel">
        <h2>we are still in market</h2>
    </div>
	<div id="market3" class="panel">
        <h2>we are still in market</h2>
    </div>
    <div id="calendar" class="panel">
        <h2>we are in calendar</h2>
    </div>
</div>

CSS

body {
    margin: 0;
}

body, #wrap, .panel {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.panel {
    width: 100%;
	display: table;
    background: #eee;
}


#wrap {
    width: 1300%; /* 100 multiplied by the number of sections ( 13 ) */
	margin: 0 auto;
    margin-top: 60px;
    float: left;
}

#wrap > div {
    width: 7.69%; /* 100 divided by the number of sections ( 13 ) */
    float: left;
}

#cssmenu ul {
    height: 35px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    background: #f2f1f2;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #f2f1f2;
    overflow: hidden;
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li {
    float: left;
    margin: 0 auto;
    padding: 0 4px;
    list-style: none;
}

#cssmenu li a {
    display: block;
    float: left;
    color: #797978;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
}

#cssmenu li a:hover {
    color: #6c8cb5;
    border-bottom: 3px solid #00b8fd;
}

#cssmenu li.active >a {
    display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;
}

#cssmenu li.active2 a {
    display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;
}

#cssmenu {
    width: 100%;
    position: fixed;
}

/* Class */

.hide {
     display: none;   
}

JavaScript

$('#cssmenu').find('li').click(function(){
   //removing the previous selected menu state
   $('#cssmenu').find('li.active').removeClass('active');

    //is this element from the second level menu?
    if($(this).closest('ul').hasClass('hide')){
         $(this).parents('li').addClass('active');

    //this is a parent element
    }else{
         $(this).addClass('active');
    }
});
/*$(document).ready(function(){
    $('.hide').find('li').click(function(){

       //removing the previous selected menu state
       $('#cssmenu').find('li.active').removeClass('active');

       //adding the state for this parent menu
       $(this).parents('li').addClass('active');
    });
});*/
/*$('#cssmenu').find('li').click(function(){
   //removing the previous selected menu state
   $('#cssmenu').find('li.active2').removeClass('active2');

    //is this element from the second level menu?
    if($(this).closest('ul').hasClass('active')){
         $(this).parents('li').addClass('active2');

    //this is a parent element
    }else{
         $(this).addClass('active');
    }
});*/

$(document).ready(function() {
    //$("body").css("display", "none");
    // $(".panel").fadeOut(1000);

    $(".panel").fadeIn(1000);
 
    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $(".panel").fadeOut(500); 
        $(".panel").fadeIn(1000);
    });
         
    
});

/*$(function(){
if( $("#item2").hasClass('active' ))
{
  $("item1").addClass('active2');
}
if ( $('#item2').hasClass('') && $('item1').hasClass('active2' )) {
$('#item1').removeClass('active2');
}
    

    if($("item8").hasClass('active'))
    {
        $("item7").addClass('active2');
    }
if ( $('#item8').hasClass('') && $('item7').hasClass('active2' ) && $('item9').hasClass('')) {
$('#item7').removeClass('active2');
}
    
});*/

$(function () {
		var 
			animation = function ( href ) {
				var 
					name = "active",
					element = $( "a[href='" + href + "']"...