JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div id="nav">


    <ul>
    <li><a href="#" class="bt">File</a></li>
    <li><a href="#" class="bt">Action</a></li>
    <li><a href="#" class="bt">Modules</a></li>
    <li><a href="#" class="bt">Reports</a></li>
    <li><a href="#" class="bt">Help</a></li>
    </ul>


</div>


 <div class="link_holder">dfdsafdsafdsa</div>    

 <div class="quick_links"></div>

CSS

#nav{min-height:27px; background:url(../images/nav_bg.jpg) repeat-x         #afc1d8;clear:both; border-bottom:solid 1px #8f9eb0}
#nav ul{ margin:0 0 0 50px;}
#nav li{float:left;}
#nav li .bt{color:#253c46; text-decoration:none; padding:5px 15px; border-right:solid 1px #6f86a4; float:left;}
#nav li .bt:hover{ color:#97a3b3; background:url(../images/nav_bg_H.jpg) repeat-x; }
#nav li .clicked{text-decoration:none; padding:5px 15px; border-right:solid 1px #6f86a4; float:left; color:#97a3b3; background:url(../images/nav_bg_H.jpg) repeat-x;}


.link_holder{ background:url(../images/sub_menu.jpg) repeat-x; height:138px; clear:both; display:none; }

.quick_links{background:#C4C4C4; clear:both; min-height:30px;}

JavaScript

$(document).ready(function(e) {
$("#nav li a").click(function() {
               if ($(this).hasClass("bt")) {
                   $("*").addClass("bt");
                   $(this).removeClass("bt");
                   $("*").removeClass("clicked");
                   $(this).addClass("clicked");
                   $(".link_holder").slideUp();
                   $(".link_holder").slideDown();
                   
               } 
          });

           });