JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div id="cssmenu">
    <ul id="list">
        <li><a href="#home" ><br />HOME<br /> <strong>HHHHH</strong><br /><br /></a></li>
        <li><a style="display:none" href="#home2"></a></li>
        <li><a href="#newsletter"><br />NEW<br /> <strong>SPIRIT</strong><br /><br /></a></li>
        <li><a href="#directions"><br />ROYAL<br /><strong>ARCHI</strong><br /><br /></a></li>
		<li><a href="#dir"><br />UNDER<br /> <strong>CONSTRUCTION</strong><br /><br /></a></li>
		<li><a href="#contact"><br />FIGURE<br /><strong>RENOV</strong><br /><br /></a></li>
        <li><a href="#acteur1"><br />MARKET<br /><strong>ACTOR</strong><br /><br /></a></li>
        <li><a style="display:none" href="#acteur2"></a></li>
        <li><a style="display:none" href="#acteur3"></a></li>
        <li><a href="#market1"><br />NEW<br /><strong>GALLERY</strong><br /><br /></a></li>
        <li><a style="display:none" href="#market2"></a></li>
        <li><a style="display:none" href="#market3"></a></li>
        <li><a href="#calendar"><br />CALENDAR<br /><strong>OF THE YEAR</strong><br /><br /></a></li>
    </ul>
	</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="dir" 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">
     ...

CSS

body {
    margin: 0;
	overflow:hidden;
}

.panel, #wrap {
    height:100%;
    overflow: hidden;
    position: relative;
    margin-top:64px; /*32px*//*ajout*/
	
	}



/* panels setup */



.panel {
	width: 100%;
	display: table;
	/*background: #eee;*/
	height: 768px;
	background: transparent url(../background.jpg) repeat 0% 0%;
}




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

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

#cssmenu ul {
    margin: 0;
    padding: 0.5px; /*0*/
    font-size: 13pt;/*12pt*//*12px;*/
    /*font-weight: bold;*/
    background: #94adc1; /*#f2f1f2;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
	font-family: 'ITCAvantGardeStd-Bk'; /*ajout*/
    border-bottom: 1px solid #f2f1f2;
    zoom: 1;
	text-align:center; /*ajout*/
	height:94px; /*ajout*/
}

#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;
	/*border-right:1px solid black;*/
}

#cssmenu li a {
 display: block;
    float: left;
    color: #123b59; /*#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:before {
   /* display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
    content: ' ';
    width: 0px; 
	height: 10px; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid black;
    display: inline-block;
    position:absolute;
    bottom:20px;
    /*ou bien*/
    /* position: relative;
    left: -40px;
    top: 20px;*/
   ...

JavaScript

$(function () {
		var 
			animation = function ( href ) {
				var 
					name = "active",
					element = $( "a[href='" + href + "']" );
				
				$( "html, body" ).stop().animate( {
					scrollLeft: $( href ).offset().left
				}, 1200 );
				
				element.closest( "ul" ).find( "li" ).removeClass( name );
				element.parent().addClass( name );
			},
			menu = $( "#list" );
			
		animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
		
		$( "#cssmenu a" ).bind( "click", function( event ) {
			var target = $( this ).attr("href");
			
			animation( target );
			
			event.preventDefault();
		} );
		
		$( "#next, #prev" ).click( function ( event ) {
			var
				positionActiveClass = menu.find( "> li.active" ).index(),
				menuLength = menu.find( "> li" ).length - 1,
				buttonId = $( this ).attr( "id" );
			
			if ( buttonId === "next" ) {
				if ( positionActiveClass === ( menuLength ) ) {
					newElementActiveClass = menu.find( "li" ).eq( 0 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass );
				} else {
					newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass );
				}
			} else {
				if ( positionActiveClass === 0 ) {
					newElementActiveClass = menu.find( "li" ).eq( menuLength );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass );
				} else {
					newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
					newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
					
					animation( newPositionActiveClass );
				}
			}
			
			event.preventDefault();
		} );
		
	} );