jQuery网站侧边隐藏展开导航插件

jQuery网站侧边隐藏展开导航插件

1. 引入CSS

<link rel="stylesheet" type="text/css" href="fancynav/css/fancynav.min.css">
<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">

2. 引入JS

<script type="text/javascript" src="assets/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="fancynav/js/jquery.fancynav.min.js"></script>

3. HTML代码

<ul class="menubar">
	<li><i class="fa fa-lg fa-bars" aria-hidden="true"></i> Open demos
		<ul>
			<li class="opener"><span>FancyNav default options <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
			<li>Built-in animation effects <i class="fa fa-arrow-right fa-pull-right" aria-hidden="true"></i>
				<ul>
					<li class="opener"><span data-fancynav-animation="slide-along">slide-along <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="slide-reverse">slide-reverse <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="reveal">reveal <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="push">push <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="rotate-in">rotate-in <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="rotate-out">rotate-out <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="rotate-delayed">rotate-delayed <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="scale-up">scale-up <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-animation="fall-down">fall-down <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
				</ul>
			</li>
			<li class="opener"><span data-fancynav-animation="flip">Custom <q>flip</q><br>animation <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
			<li>Header text/image <i class="fa fa-arrow-right fa-pull-right" aria-hidden="true"></i>
				<ul>
					<li class="opener"><span data-fancynav-header="My cool company name">Navigation Header <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-class="fancynav-logo">Header with Logo <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
				</ul>
			</li>
			<li class="opener"><span data-fancynav-back="Back to parent item">Custom <q>back</q> text <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
			<li>Built-in Skins <i class="fa fa-arrow-right fa-pull-right" aria-hidden="true"></i>
				<ul>
					<li class="opener"><span data-fancynav-class="fancynav-green">fancynav-green <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
					<li class="opener"><span data-fancynav-class="fancynav-blue">fancynav-blue <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
				</ul>
			</li>
			<li class="opener"><span data-fancynav-animation="rotate-in" data-fancynav-class="fancynav-green fancynav-icons">Customization with icons <i class="fa fa-hand-o-up" aria-hidden="true"></i></span></li>
		</ul>
	</li>
</ul>
<div class="wrapper">
	<div class="column demo-buttons">
		<h2>Demos:</h2>
		<span>点击查看效果</span>
		<h3>Built-in Animation Effects:</h3>
		<span data-fancynav-animation="slide-along">效果一</span>
		<span data-fancynav-animation="slide-reverse">效果二</span>
		<span data-fancynav-animation="reveal">效果三</span>
		<span data-fancynav-animation="push">效果四</span>
		<span data-fancynav-animation="rotate-in">效果五</span>
		<span data-fancynav-animation="rotate-out">效果六</span>
		<span data-fancynav-animation="rotate-delayed">效果七</span>
		<span data-fancynav-animation="scale-up">效果八</span>
		<span data-fancynav-animation="fall-down">效果九</span>
		<h3>Example for Custom Animations:</h3>
		<span data-fancynav-animation="flip">效果十</span>
		<h3>Header Text/Image &amp; Back Text:</h3>
		<span data-fancynav-header="My cool company name">效果十一</span>
		<span data-fancynav-class="fancynav-logo">效果十二</span><br>
		<span data-fancynav-back="Back to parent item">效果十三</span>
		<h3>Built-in Skins:</h3>
		<span data-fancynav-class="fancynav-green">效果十四</span>
		<span data-fancynav-class="fancynav-blue">效果十五</span>
		<h3>Advanced CSS Customization Example with Font Awesome Icons:</h3>
		<span data-fancynav-animation="rotate-in" data-fancynav-class="fancynav-green fancynav-icons">效果十六</span>
	</div>
	<p class="left">All examples on this page are using the same unstyled list:</p>
	<ul class="demolist fancynav-add">
		<li><a href="index.html">Item #1</a></li>
		<li><a href="index.html">Item #2</a></li>
		<li><a href="index.html">Item #3</a>
			<ul>
				<li><a href="index.html">Item #3/1</a></li>
				<li><a href="index.html">Item #3/2</a>
					<ul>
						<li><a href="index.html">Item #3/2/1</a>
						<li><a href="index.html">Item #3/2/2</a>
					</ul>
				</li>
				<li><a href="index.html">Item #3/3</a></li>
				<li><a href="index.html">Item #3/4</a></li>
				<li><a href="index.html">Item #3/5</a></li>
			</ul>
		</li>
		<li><a href="index.html">Item #4</a></li>
	</ul>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$('.demo-buttons span, .opener > span').fancynav();
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到