jQuery gxSideMenu Plugin Demos

Click the toggle icon or hover over the left/right sides of your screen to see it in action

#USAGE

#JavaScript:

$(function() {
	$('#gx-sidemenu').gxSideMenu({
		mode: isMobile.any() ? 'tiny' : 'normal', // normal | tiny
		interval: 300, // animations' interval
		direction: 'left', // left | right
		openOnHover: true, // true | false
		clickTrigger: true, // true | false
		followURLs: true, // true | false
		trigger: ".gx-menu-open.list", // class or id of trigger element
		startFrom: 60, // start pixel from corner on hover trigger
		startClosed: true, // menu opens on document load
		scrolling: true, // menu scrollable (iScroll plugin needed!)
		urlBase: '/sidemenu/', // document base URL
		backText: 'Prev | Back', // Back button text
		onOpen: function() { }, // Open callback
		onClose: function() { } // Close callback
	});
});

#HTML:

<div id="gx-sidemenu" style="z-index: 9998">
	<div class="gx-sidemenu-inner" id="gx-sidemenu-inner-1">
		<div class="scroll">
			<ul class="gx-menu">
				<li class="home">
					<a href="?home">
						<span class="icon entypo home"></span>
						<span class="text">Home</span>
					</a>
				</li>
				<li class="news">
					<a href="#news">
						<span class="icon entypo newspaper"></span>
						<span class="text">News / Events</span>
					</a>
					<ul>
						<li>
							<a href="javascript:">
								<span class="icon entypo pencil"></span>
								<span class="text">New Article</span>
							</a>
							<ul>
								<li>
									<a href="?article=false">
										<span class="icon entypo list"></span>
										<span class="text">Next level...</span>
									</a>
								</li>
								...
							</ul>
						</li>
					</ul>
				</li>
				...
			</ul>
		</div>
	</div>

	<div id="gx-sidemenu-login">
		<div class="divider"></div>
		<h2>
			<span class="icon entypo user"></span>
			<span class="text">Welcome, {{UserName}}!</span>
		</h2>
		<div class="divider"></div>
		<a href="?edit=profile" class="login-btn">Edit profile</a>
		<div class="divider"></div>
		<a href="?logout" class="login-btn">Log out...</a>
		<div class="divider"></div>
	</div>
	

</div>