JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<script src="http://www.sam3k.com/demos/hoverAccordionMenu/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="http://www.sam3k.com/demos/hoverAccordionMenu/jquery.hoverAccordionMenu.js" type="text/javascript"></script>

<div id="menu">
    <ul class="menu">
	<li><a href="#">Test</a>
		<ul>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
	</li>
	<li><a href="#">Test</a>
		<ul>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
	</li>
	<li><a href="#">Test</a>
		<ul>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
			<li><a href="#">Test</a></li>
		</ul>
	</li>
</ul>
</div>

CSS

#nav {
	margin:auto;
}
.caption { margin:auto; font-size:10px; text-align:center; }

/*	$__nav sidebar
	-------------------------------------------------*/
	#menu {
	width:235px;
	padding:0;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu li {
	margin: 0;
	margin-left:0; 
}
#menu li a {
	padding-left:10px;
	color:#333;
	text-decoration:none;
}
#menu li.active {
	font-weight:bold;
}
#menu li.active li {
	font-weight:normal;
} /*do not bold level 2 when parent is active*/
#menu li#current {
	font-weight:bold;
}
/*NOTE: the next line doesn't work on ie6 so we use jquery for ie6*/
#menu li a:hover {
	color:#80c142;
}
	#menu li li:hover {
	background:url(ico-arrow-level2.gif) top left no-repeat;
}
#menu li li#current {
	background:url(ico-arrow-level2.gif) top left no-repeat;
}
#menu a {
	display: block;
	font-size:20px;
	padding: 5px;
}
#menu ul li ul {
	width:235px;
	display:inline-block;
}
#menu li li {
	padding-top:2px;
	padding-left:9px;
	margin:0;
}
#menu li li a {
	color:#555;
	font-size:13px;
	line-height:15px;
}
#menu li li#current a {
	font-weight:bold;
}

JavaScript

$(document).ready(function(){
	$(this).hoverAccordionMenu();	//build left menu accordion effects	
	
	/*ie6 hack for mouse over icons on 2nd level. Not part of the plugin. optional!*/
	if ($.browser.msie && $.browser.version.substr(0,1)<7) {
		//rollover arrow which doesn't work with simple css
		$('ul.menu > li > ul > li').bind("mouseenter", function(e){
			$(this).css("background", "url(ico-arrow-level2.gif) no-repeat");
		});
		$('ul.menu > li > ul > li').bind("mouseleave", function(e){
			$(this).not(".active").css("background", "none");
		});
	}

});