JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<script src="http://static.livedemo00.template-help.com/wt_34740/js/swicher.js"></script>
<nav>
   <ul>
      <li class="itm1">
         <a href="#!/main">
            <cufon style="width: 58px; height: 22px;" alt="main" class="cufon cufon-canvas">
               <canvas style="width: 65px; height: 22px; top: 0px; left: -1px;" height="22" width="65"></canvas>
               <cufontext>main</cufontext>
            </cufon>
            <span style="opacity: 1;" class="hoverOut"></span><span style="opacity: 0;" class="hoverIn"></span>
         </a>
      </li>
      <li class="itm2">
         <a href="#!/about_us">
            <cufon style="width: 78px; height: 22px;" alt="about " class="cufon cufon-canvas">
               <canvas style="width: 96px; height: 22px; top: 0px; left: -1px;" height="22" width="96"></canvas>
               <cufontext>about </cufontext>
            </cufon>
            <cufon style="width: 26px; height: 22px;" alt="us" class="cufon cufon-canvas">
               <canvas style="width: 38px; height: 22px; top: 0px; left: -1px;" height="22" width="38"></canvas>
               <cufontext>us</cufontext>
            </cufon>
            <span style="opacity: 1;" class="hoverOut"></span><span style="opacity: 0;" class="hoverIn"></span>
         </a>
      </li>
      <li class="itm3">
         <a href="#!/catalogue">
            <cufon style="width: 135px; height: 22px;" alt="catalogue" class="cufon cufon-canvas">
               <canvas style="width: 146px; height: 22px; top: 0px; left: -1px;" height="22" width="146"></canvas>
               <cufontext>catalogue</cufontext>
            </cufon>
            <span style="opacity: 1;" class="hoverOut"></span><span style="opacity: 0;" class="hoverIn"></span>
         </a>
      </li>
      <li class="itm4">
         <a href="#!/services">
            <cufon style="width: 97px; height: 22px;" alt="services" class="cufon cufon-canvas">
               <canvas style="width: 110px; height: 22px; top: 0px;...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    outline: 0px none;
    font-size: 100%;
    vertical-align: baseline;
    background: none repeat scroll 0% 0% transparent;
}
ul, ol {
    list-style: none outside none;
}
nav{
	width:978px;
	height:207px;
	background:url(http://static.livedemo00.template-help.com/wt_34740//images/nav-bg.png) no-repeat;
	position:absolute;
	top:330px;
	left:1px;
	z-index:1;
}

nav .area-map{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}

nav ul{
	position:relative;
	z-index:1;
}

nav ul li a{
	width:284px;
	height:152px;
	position:absolute;
	display:block;
	top:8px;
	text-decoration:none;
	text-transform:uppercase;
	font:22px/152px Arial, Helvetica, sans-serif;
	padding-top:40px;
	text-align:center;
	color:#fff;
}

nav ul li.itm1 a{
	left:6px;
}

nav ul li.itm2 a{
	left:177px;
}

nav ul li.itm3 a{
	left:347px;
}

nav ul li.itm4 a{
	left:517px;
}

nav ul li.itm5 a{
	left:687px;
}

nav ul li.itm2 a,nav ul li.itm4 a{
	padding-top:0;
	padding-bottom:40px;
}

.hoverIn,.hoverOut{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
}

nav a .hoverIn{
	background:url(http://static.livedemo00.template-help.com/wt_34740/images/nav-sprite.png) 0 100% no-repeat;
}

nav ul li.itm2 a .hoverIn,nav ul li.itm4 a .hoverIn{
	background:url(http://static.livedemo00.template-help.com/wt_34740/images/nav-sprite.png) 100% 100% no-repeat;
}

nav a...

JavaScript

var nav=$('nav'),
		nav_li=$('>ul>li',nav),
		content=$('#content')
	if($.browser.msie&&$.browser.version<9)
		$('.hoverIn').hide()
	else
		$('.hoverIn').css({opacity:0})
	nav.navs({
		useHash:true,
		hoverIn:function(li){
			if($.browser.msie&&$.browser.version<9)
				$('.hoverIn',li).show(),
				$('.hoverOut',li).hide()
			else
				$('.hoverIn',li)
					.stop()
					.animate({
						opacity:1
					},500),
				$('.hoverOut',li)
					.stop()
					.animate({
						opacity:0
					},500)
		},
		hoverOut:function(li){
			if($.browser.msie&&$.browser.version<9)
				$('.hoverIn',li).hide(),
				$('.hoverOut',li).show()
			else
				$('.hoverIn',li)
					.stop()
					.animate({
						opacity:0
					},500),
				$('.hoverOut',li)
					.stop()
					.animate({
						opacity:1
					},500)
		}
	})
	$('map[name=nav1] area').each(function(i){
		$(this)
			.bind('mouseenter',function(){
				nav_li.eq(i).find('a').trigger('mouseenter')
			})
			.bind('mouseleave',function(){
				nav_li.eq(i).find('a').trigger('mouseleave')
			})			
	})