所属分类:网页特效-导航菜单
使用方法:
引入CSS样式文件、jQuery库文件、插件JS文件
<link href="css/preview.css" type="text/css" rel="stylesheet">
<link href="css/modern-menu.css" type="text/css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.transit.min.js" type="text/javascript"></script>
<script src="js/jquery.modern-menu.min.js" type="text/javascript"></script>
HTML结构
<ul class="modern-menu theme1">
<li><a href="#"><span>HOME</span></a></li>
<li><a href="#"><span>ABOUT</span></a></li>
<li><a href="#"><span>SERVICES</span></a>
<ul>
<li><a href="#"><span>WEB DESIGN</span></a></li>
<li><a href="#"><span>PROGRAMING</span></a></li>
<li><a href="#"><span>ADVERTISING</span></a></li>
<li><a href="#"><span>MARKETING</span></a></li>
</ul>
</li>
<li><a href="#"><span>PORTFOLIO</span></a>
<ul>
<li><a href="#"><span>WEB DESIGN</span></a></li>
<li><a href="#"><span>PROGRAMING</span></a>
<ul>
<li><a href="#"><span>JAVASCRIPT</span></a></li>
<li><a href="#"><span>MOBILE</span></a>
<ul>
<li><a href="#"><span>OBJECTIVE-C</span></a></li>
<li><a href="#"><span>JAVASCRIPT</span></a></li>
<li><a href="#"><span>NODE.JS</span></a></li>
<li><a href="#"><span>RUBY</span></a></li>
</ul>
</li>
<li><a href="#"><span>PHP / PERL</span></a></li>
<li><a href="#"><span>C++ / C#</span></a></li>
</ul>
</li>
<li><a href="#"><span>ADVERTISING</span></a></li>
<li><a href="#"><span>MARKETING</span></a></li>
</ul>
</li>
<li><a href="#"><span>CLIENTS</span></a>
<ul>
<li><a href="#"><span>GREAT BRITAIN</span></a></li>
<li><a href="#"><span>UNITED STATES</span></a>
<ul>
<li><a href="#"><span>LOS ANGELES</span></a></li>
<li><a href="#"><span>NEW YORK</span></a></li>
<li><a href="#"><span>WASHINGTON</span></a></li>
<li><a href="#"><span>BOSTON</span></a></li>
<li><a href="#"><span>LAS VEGAS</span></a></li>
</ul>
</li>
<li><a href="#"><span>FRANCE</span></a></li>
<li><a href="#"><span>CANADA</span></a></li>
<li><a href="#"><span>AUSTRALIA</span></a></li>
</ul>
</li>
<li><a href="#"><span>OFFICES</span></a>
<ul>
<li><a href="#"><span>LOS ANGELES</span></a></li>
<li><a href="#"><span>NEW YORK</span></a></li>
<li><a href="#"><span>LONDON</span></a></li>
<li><a href="#"><span>PARIS</span></a></li>
</ul>
</li>
<li><a href="#"><span>CONTACT</span></a></li>
<ul class="mm-group mm-right">
<li class="mm-icon"><a href="#"><span class="mm-facebook"></span></a></li>
<li class="mm-icon"><a href="#"><span class="mm-twitter"></span></a></li>
<li class="mm-icon"><a href="#"><span class="mm-googleplus"></span></a></li>
<li class="mm-icon"><a href="#"><span class="mm-linkedin"></span></a></li>
</ul>
</ul>
插件初始化、配置
<script type="text/javascript">$(".modern-menu").modernMenu();</script>