JSFiddle - React, Tailwind, and code Playground
by Nikhil krishnan
HTML
<article class="col-md-6">
<span class="main_cat_pst_ad"><i>1</i>Select a main category :</span>
<ul class="catagory_slect">
<li><a href="#mob" class="current"><i class="icon-mobile-phone"></i>Mobile Phones</a></li>
<li><a href="#home"><i class="icon-music"></i>Home & Lifestyles</a></li>
<li><a href="#elec"><i class="icon-desktop"></i>Electronics & Technology</a></li>
<li><a href="#veh"><i class="icon-truck"></i>Vehicles</a></li>
</ul>
</article>
<article class="col-md-6"><!--right/side content area-->
<span class="main_cat_pst_ad"><i>2</i>Select a sub category :</span>
<ul class="sub_catagory" id="mob">
<li><a href="#"><i class="icon-double-angle-right"></i>1Mobile Phones</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Mobile Phones Accessories</a></li>
</ul>
<ul class="sub_catagory" id="home">
<li><a href="#"><i class="icon-double-angle-right"></i>Air Conditioners & Coolers</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Mobile Phones Accessories</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Antiques - Handicrafts</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Baby - Infant Products</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Bags - Luggage</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Mobile Phones Accessories</a></li>
</ul>
<ul class="sub_catagory" id="elec">
<li><a href="#"><i class="icon-double-angle-right"></i>Camera Accessories</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Cameras - Digicams</a></li>
<li><a href="#"><i class="icon-double-angle-right"></i>Computer Peripherals</a></li>
<li><a href="#"><i...
CSS
ul.catagory_slect{
float:left;
clear:left;
width:100%;
padding:0;
}
.main_cat_pst_ad{
color:#33373b;
float:left;
margin-bottom:20px;
clear:left;
font-size:14px;
}
.main_cat_pst_ad i{
color:#fff;
background:#33373b;
padding:12px 16px;
display:inline-block;
margin-right:10px;
font-style:normal;
}
ul.catagory_slect li{
clear:left;
width:100%;
float:left;
list-style:none;
}
ul.catagory_slect li a{
width:100%;
font-size:14px;
float:left;
color:#333333;
text-decoration:none;
cursor:pointer;
-webkit-transition : all .0s ease-out;
-moz-transition : all .0s ease-out;
-o-transition : all .0s ease-out;
-ms-transition : all .0s ease-out;
transition : all .0s ease-out;
padding:15px 3%;
border-bottom:dashed 1px #c9c9c9;
}
ul.catagory_slect li a .icon-mobile-phone:before,
ul.catagory_slect li a .icon-music:before,
ul.catagory_slect li a .icon-desktop:before,
ul.catagory_slect li a .icon-truck:before{
color:#c62828;
margin-right:15px;
width:30px;
height:30px;
text-align:center;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
background:#f7f7f7;
}
ul.catagory_slect li a .icon-mobile-phone:before{
font-size:26px;
line-height:28px;
}
ul.catagory_slect li a .icon-music:before,
ul.catagory_slect li a .icon-desktop:before,
ul.catagory_slect li a .icon-truck:before{
font-size:18px;
line-height:28px;
}
ul.catagory_slect li a:hover,
ul.catagory_slect li a:active,
ul.catagory_slect li a:visited,
ul.catagory_slect li a.current{
border-right:solid #DADADA 10px;
border-bottom:dashed 1px #c9c9c9;
-webkit-transition : all .0s ease-out;
-moz-transition : all .0s ease-out;
-o-transition : all .0s ease-out;
-ms-transition : all .0s ease-out;
transition : all .0s ease-out;
}
ul.sub_catagory{
float:left;
clear:left;
width:100%;
padding:0;
}
ul.sub_catagory li{
clear:left;
width:100%;
float:left;
list-style:none;
}
ul.sub_catagory li...
JavaScript
$(function(){
$('ul.sub_catagory').hide();
if ($(window).width() < 768) {
$('ul.catagory_slect li a').bind('click', function(e){
$('ul.catagory_slect li a.current').removeClass('current');
$('ul.sub_catagory:visible').hide();
$(this.hash).show();
$(this).addClass('current');
e.preventDefault();
}).filter(':first').click();
}
else {
$('ul.catagory_slect li a').bind('mouseover', function(e){
$('ul.catagory_slect li a.current').removeClass('current');
$('ul.sub_catagory:visible').hide();
$(this.hash).show();
$(this).addClass('current');
e.preventDefault();
}).filter(':first').click();
}
});