当前位置:主页 > 网页特效 > 手风琴代码 >

jquery水平手风琴折叠菜单插件

发布时间:2018/06/28 来源:互联网 浏览: 关键词:jquery 手风琴 
jquery水平手风琴折叠菜单插件 jquery水平手风琴折叠菜单插件
阿里云

简要教程

这是一款炫酷的jquery水平手风琴折叠菜单效果。该jquery风琴折叠菜单效果以1870年为主题,在切换菜单项时带有幻影效果,并在整体上配以炫酷的文字动画效果。

使用方法

在页面中引入1870primary.css和1870Level2.css样式文件,jquery和其它js文件。

<linkhref="css/1870primary.css"rel="stylesheet"type="text/css">
<linkhref="css/1870Level2.css"rel="stylesheet"type="text/css">
<scriptsrc='js/jquery.min.js'></script>
<scriptsrc="js/jquery.easing.1.3.js"></script>
<scriptsrc="js/jquery.transform2d.js"></script>
<scriptsrc="js/clientLogin.js"></script>
<scriptsrc="js/warTextEffect_jvollmer3.js"></script>
<scriptsrc="js/jquery.accordianMenu_jvollmer3.js"></script>

HTML结构

jquery水平手风琴折叠菜单效果

其中,构成水平手风琴效果的HTML结构如下:

<divid="subMenu"class="subMenu">
  <ul>
    <li>
      <ahref="#"class="pos1">
        <spanclass="menuPreview"></span>
        <spanclass="menuImage"></span>
      </a>
      <divclass="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>
          <ulclass="subNav">
            <li><ahref="#">Pre-1870 Europe</a></li>
            <li><ahref="#">1866 - The Austro-Prussian War</a></li>
            <li><ahref="#">The Hohenzollern Candidature</a></li>
            <li><ahref="#">France declares War</a></li>
            <li><ahref="#">The Armies Mobilise</a></li>
          </ul>
        </p>
      </div> <!-- end menuDescription div -->
    </li>
    <li>
      <ahref="#"class="pos2">
        <spanclass="menuPreview"></span>
        <spanclass="menuImage"></span>
      </a>
      <divclass="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>
          <ulclass="subNav">
            <li><ahref="#">The French (Imperial forces)</a></li>
            <li><ahref="#">The Prussians</a></li>
            <li><ahref="#">The Bavarians</a></li>
            <li><ahref="#">The Minor German States</a></li>
            <li><ahref="#">The French (Republican forces)</a></li>
          </ul>
        </p>
      </div> <!-- end menuDescription div -->
    </li>
    <li>
      <ahref="#"class="pos3">
        <spanclass="menuPreview"></span>
        <spanclass="menuImage"></span>
      </a>
      <divclass="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>
          <ulclass="subNav">
            <li><ahref="#">A Narrative on Leadership</a></li>
            <li><ahref="#">Political Leaders of 1870</a></li>
            <li><ahref="#">French Leaders (Imperial phase)</a></li>
            <li><ahref="#">German Leaders</a></li>
            <li><ahref="#">French Leaders (Republican phase)</a></li>
          </ul>
        </p>
      </div> <!-- end menuDescription div -->
    </li>
    <li>
      <ahref="#"class="pos4">
        <spanclass="menuPreview"></span>
        <spanclass="menuImage"></span>
      </a>
      <divclass="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>
          <ulclass="subNav">
            <li><ahref="#">Pre-war events</a></li>
            <li><ahref="#">The Imperial Phase - to Sep, 1870</a></li>
            <li><ahref="#">The Republican Phase</a></li>
            <li><ahref="#">Aftermath</a></li>
          </ul>
        </p>
      </div> <!-- end menuDescription div -->
    </li>
    <li>
      <ahref="#"class="pos5">
        <spanclass="menuPreview"></span>
        <spanclass="menuImage"></span>
      </a>
      <divclass="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>
          <ulclass="subNav">
            <li><ahref="#">Frontier Battles</a></li>
            <li><ahref="#">The Metz Campaign</a></li>
            <li><ahref="#">Sedan - End of the Empire</a></li>
            <li><ahref="#">Republican Phase Campaigns</a></li>
            <li><ahref="#">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

共有人阅读,期待你的评论!评论
Top