JSFiddle - React, Tailwind, and code Playground

by freginold

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav_Wrapper_dk">

<nav id="dk_Nav" role="navigation" class="cf">

		<div><a href="#home" class="link_Button sliding-u-l-r scroll">Home</a></div>
		<div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
		<div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
		<div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
		<div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
		<div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
		<div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>

	</nav>

</div>

<div id="home"></div>

<div id="about"></div>

CSS

#nav_Wrapper_dk {
	position: fixed;
	width: 100%;
	height: 50px;
	background: white;
	border-bottom: 1px solid #f1f1f1;
}


	#dk_Nav {
		max-width: 1280px;
		/* width: 742.6167px; */
		height: 50px;
		margin-left: auto;
		margin-right: auto;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2001;
	}

		#dk_Nav div {
			margin-top: 11px;	
		}



		#dk_Nav #logo_dk {
			margin-top: 0px;	
		}

		.link_Button {
			display: block;
			float: left;
			height: 40px;
			font-family: 'Open Sans', sans-serif;
			font-size: .7em;
			color: black;
			line-height: 3.3em;
			text-transform: uppercase;
			letter-spacing: .2em;
			padding-left: 12px;
		}

		/* LEFT TO RIGHT */
		.sliding-u-l-r {
			display: inline-block;
		}

		.sliding-u-l-r:after {
			content: '';
			display: block;
			height: 3px;
			width: 0;
			background: transparent;
			transition: width .3s ease, background-color .3s ease;
		}

		.sliding-u-l-r:hover:after {
			width: 124%;
			background: black;
      margin: 0px -12% 0px -12%;
		}

		.sliding-u-l-r.active:after {
		  width: 100%;
		  background: black;
		}
    
    
    #home {
  width: 100%;
  height: 1000px;
  background: #ccc;
}

#about {
  width: 100%;
  height: 1000px;
  background: white;
}

JavaScript

// Scroll Menu
$(function() {


  $("nav  a").click(function() {
    //**Add class active to current clicked menu item  and remove class active from other menu item**//
    $(this).addClass('active').parent().siblings().children().removeClass('active');
    //** Smooth scroll Logic **?
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});