这是一款炫酷的jquery水平手风琴折叠菜单效果。该jquery风琴折叠菜单效果以1870年为主题，在切换菜单项时带有幻影效果，并在整体上配以炫酷的文字动画效果。
使用方法
在页面中引入1870primary.css和1870Level2.css样式文件，jquery和其它js文件。
<link href="css/1870primary.css" rel="stylesheet" type="text/css">
<link href="css/1870Level2.css" rel="stylesheet" type="text/css">
<script src='js/jquery.min.js'></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.transform2d.js"></script>
<script src="js/clientLogin.js"></script>
<script src="js/warTextEffect_jvollmer3.js"></script>
<script src="js/jquery.accordianMenu_jvollmer3.js"></script>
HTML结构
其中，构成水平手风琴效果的HTML结构如下：
<div id="subMenu" class="subMenu">
<ul>
<li>
<a href="#" class="pos1">
<span class="menuPreview"></span>
<span class="menuImage"></span>
</a>
<div class="menuDescription">
<h2>Road to War</h2>
<h3>The Preliminaries</h3>
<p>
This section will discuss the conditions
in Europe leading up to 1870 concentrating
on the roles played by Prussia and France.
</p>
<p>
<ul class="subNav">
<li><a href="#">Pre-1870 Europe</a></li>
<li><a href="#">1866 - The Austro-Prussian War</a></li>
<li><a href="#">The Hohenzollern Candidature</a></li>
<li><a href="#">France declares War</a></li>
<li><a href="#">The Armies Mobilise</a></li>
</ul>
</p>
</div> <!-- end menuDescription div -->
</li>
<li>
<a href="#" class="pos2">
<span class="menuPreview"></span>
<span class="menuImage"></span>
</a>
<div class="menuDescription">
<h2>The Armies</h2>
<h3>The Fighting Men of 1870</h3>
<p>
The war of 1870 saw armies made up of diverse
colorful units that fought in large-scale battles.
</p>
<p>
<ul class="subNav">
<li><a href="#">The French (Imperial forces)</a></li>
<li><a href="#">The Prussians</a></li>
<li><a href="#">The Bavarians</a></li>
<li><a href="#">The Minor German States</a></li>
<li><a href="#">The French (Republican forces)</a></li>
</ul>
</p>
</div> <!-- end menuDescription div -->
</li>
<li>
<a href="#" class="pos3">
<span class="menuPreview"></span>
<span class="menuImage"></span>
</a>
<div class="menuDescription">
<h2>The Leaders</h2>
<h3>Movers and Shakers of 1870</h3>
<p>
The moral effect of leadership was to profoundly
impact the outcome of the Franco-Prussian War
- one of the most interesting aspects of 1870.
</p>
<p>
<ul class="subNav">
<li><a href="#">A Narrative on Leadership</a></li>
<li><a href="#">Political Leaders of 1870</a></li>
<li><a href="#">French Leaders (Imperial phase)</a></li>
<li><a href="#">German Leaders</a></li>
<li><a href="#">French Leaders (Republican phase)</a></li>
</ul>
</p>
</div> <!-- end menuDescription div -->
</li>
<li>
<a href="#" class="pos4">
<span class="menuPreview"></span>
<span class="menuImage"></span>
</a>
<div class="menuDescription">
<h2>The Timeline</h2>
<h3>The Chronology of 1870</h3>
<p>
The timeline of the Franco-Prussian War
organized into its distinctive parts.
</p>
<p>
<ul class="subNav">
<li><a href="#">Pre-war events</a></li>
<li><a href="#">The Imperial Phase - to Sep, 1870</a></li>
<li><a href="#">The Republican Phase</a></li>
<li><a href="#">Aftermath</a></li>
</ul>
</p>
</div> <!-- end menuDescription div -->
</li>
<li>
<a href="#" class="pos5">
<span class="menuPreview"></span>
<span class="menuImage"></span>
</a>
<div class="menuDescription">
<h2>The Battles</h2>
<h3>Battle Narratives of 1870-71</h3>
<p>
Battle narratives containing essential information
for each battle including opposing plans, terrain, battle
progress, orders of battle, and the resulting consequences.
</p>
<p>
<ul class="subNav">
<li><a href="#">Frontier Battles</a></li>
<li><a href="#">The Metz Campaign</a></li>
<li><a href="#">Sedan - End of the Empire</a></li>
<li><a href="#">Republican Phase Campaigns</a></li>
<li><a href="#">End Game - the Surrender</a></li>
</ul>
</p>
</div> <!-- end menuDescription div -->
</li>
</ul>
</div> <!-- end subMenu div -->
该jquery水平手风琴折叠菜单插件的github地址为：https://github.com/jjv329/AccordianSlider
