<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sliding Background Image Menu with jQuery</title>
		<meta charset="UTF-8" />
        <meta name="description" content="Sliding Background Image Menu with jQuery" />
        <meta name="keywords" content="jquery, background image, image, menu, navigation, panels" />
		<meta name="author" content="Codrops" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/sbimenu.css" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=News+Cycle&v1' rel='stylesheet' type='text/css' />

    </head>
    <body>
		<div class="container">
			<div class="header">
				<h1>Sliding Background Image Menu<span>with jQuery</span></h1>
				<h2>Default - Show/hide</h2>
			</div>
			<div class="content">
				<div id="sbi_container" class="sbi_container">
					<div class="sbi_panel" data-bg="image url(/userUpload/images/Alanger/%E5%92%96%E5%95%A1%E7%9A%84%E9%85%B8%E5%91%B3.jpg)">
						<a href="#" class="sbi_label">About</a>
						<div class="sbi_content">
							<ul>
								<li><a href="#">Subitem</a></li>
								<li><a href="#">Subitem</a></li>
								<li><a href="#">Subitem</a></li>
							</ul>
						</div>						
					</div>
					<div class="sbi_panel" data-bg="images/2.jpg">
						<a href="#" class="sbi_label">Menu</a>
						<div class="sbi_content">
							<ul>
								<li><a href="#">Subitem</a></li>
								<li><a href="#">Subitem</a></li>
								<li><a href="#">Subitem</a></li>
							</ul>
						</div>						
					</div>
					<div class="sbi_panel" data-bg="images/3.jpg">
						<a href="#" class="sbi_label">Location</a>
						<div class="sbi_content">
							<ul>
								<li><a href="#">Subitem</a></li>
								<li><a href="#">Subitem</a></li>
								<li><a href="#">Subitem</a></li>
							</ul>
						</div>						
					</div>
				</div>
			</div>
			<div class="topbar">
				<a href="http://tympanus.net/Development/GridNavigationEffects/example5.html"><span>&laquo; Previous Demo: </span>Grid Navigation Effects</a>
				<span class="right_ab">
					<a href="http://www.flickr.com/people/manoelpetry/" target="_blank">Photos by Manoel Petry</a>
					<a href="http://tympanus.net/codrops/2011/07/03/sliding-background-image-menu/"><strong>back to the Codrops tutorial</strong></a>
				</span>
			</div>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.bgImageMenu.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#sbi_container').bgImageMenu();
			});
		</script>
    </body>
</html>