JSFiddle - React, Tailwind, and code Playground

by Dragan Novkovic

HTML

<body>
<div id="top-bar">
    <div id="nav">
	<ul id="navigationWraper">
		<li><a href="#" class="menuLink" name="Home">Home</a>
        <ul class="submenu">
			<li><a href="#">345345</a></li>
			<li><a href="#">3453453</a></li>
			<li><a href="#">3455666</a></li>
		</ul>
		</li>
		
		<li><a href="#" class="menuLink" name="About Us">About Us</a></li>
		<li><a href="#" class="menuLink" name="Services">Services</a>
		<ul class="submenu">
			<li><a href="#">asdasd</a></li>
			<li><a href="#">asdasdas</a></li>
			<li><a href="#">derwer</a></li>
		</ul>
		</li>
		<li><a href="#" class="menuLink" name="Shop">Shop</a></li>
		<li><a href="#" class="menuLink" name="Portfolio">Portfolio</a></li>
		<li><a href="#" class="menuLink" name="Gallery">Gallery</a></li>
		<li><a href="#" class="menuLink" name="Contact Us">Contact Us</a></li>
	</ul>
</div>
<div id="search">
	<a href=""><img src="images/search.png"></a>
</div>
</div>

<div id="status-bar">
<div class="pageName">Welcome</div>
<div class="pageSubItems"></div>

</div>

<div id="pageWraper"><?php include("home.php"); ?></div>



</body>

CSS

#top-bar {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  background: #000;
}

#nav {
  position: relative;
  display: inline-table;
  float: none;
  width: 75%;
  min-height: 90px;
  background: red;
  
}

#navigationWraper {
  position: relative;
  display: inline;
  width: 100%;
  margin-bottom: none;
  height: auto;
}
#navigationWraper li {
  position: relative;
  display: block;
  padding: 20px 10px;
  float: left;
  background: red;
}

.current{color:red;background:yellow;}

.submenu {
position: relative;
font-size: 24px;
font-weight: bold;
float: right;
padding: 10px;
}
.submenu li {
  float: right;
  padding: 0px 20px 0px 0px;
}
.activeSub {
  background: blue;
}
#status-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  border-top: 5px solid #aaa;
  border-bottom: 5px solid #aaa;
  background: red;
}
.pageName {
  position: relative;
  display: inline-block;
  float: left;
  height: auto;
  width: 40%;

}
.pageSubItems {
  position: relative;
  display: inline-block;
  float: right;
  height: auto;
  width: 60%;
}

JavaScript

$(document).ready(function(){

     

    $('#pageWraper').css({'display':'none'}).slideDown('fast');
    $('ul.submenu').hide();

    $('a.menuLink').on("click", function(event) {
        var pageLink = $(this).attr('href'); 
        var pageName = $(this).attr('name');
        var currentSub = $(this).next('ul.submenu');
        event.preventDefault();
         
         
         $(".currentPage").fadeOut('slow', function(){
             $("#pageWraper").load(pageLink);
         });

         $('#navigationWraper li a').removeClass('current');
         $(this).addClass('current');
         $('.pageName').text(pageName);

         
      
        $('a.menuLink').next('ul.submenu').removeClass('activeSub').hide();
        $('.pageSubItems').empty();
        currentSub.addClass('activeSub').show().appendTo('.pageSubItems');
        
            
       
        
    });



   
});