jGlideMenu-jquery滑动式菜单插件

发布于，归属于jquery插件。 只剩下板凳啦！ 共有612人围观    

glidemenu

点此下载

这是一款颇有意思的滑动式菜单，它与其他的多级菜单有很大不同，在切换菜单时候采用滑动变化，而且还有上滚下滚按钮，同时支持ajax读取菜单数据。

引入JQ库与JQ的UI文件以及jQuery.jGlideMenu.067.min.js和样式

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2.     <!-- Remove the following line to disabled dragging-dropping / Also Edit CSS to Remove cursor:move from .jGM_header -->
  3.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
  4.     <script type="text/javascript" src="js/jQuery.jGlideMenu.067.min.js"></script>
  5.     <link rel="stylesheet" type="text/css" href="css/jGlideMenu.css" />

建立如下html结构

  1. <ul id="tile_001" class="jGlide_001_tiles" title="Tile One" alt="Description for tile number one">
  2.             <li rel="tile_002">Link One</li>
  3.             <li rel="tile_003">Link Two</li>
  4.             <li rel="tile_004">Link Three</li>
  5.             <li><a href="http://www.google.com">Link to Google 1</a></li>
  6.             <li><a href="http://www.google.com">Link to Google 2</a></li>
  7.             <li><a href="http://www.google.com">Link to Google 3</a></li>
  8.             <li><a href="http://www.google.com">Link to Google 4</a></li>
  9.             <li><a href="http://www.google.com">Link to Google 5</a></li>
  10.             <li><a href="http://www.google.com">Link to Google 6</a></li>
  11.             <li><a href="http://www.google.com">Link to Google 7</a></li>
  12.             <li><a href="http://www.google.com">Link to Google 8</a></li>
  13.         </ul>
  14.         <ul id="tile_002" class="jGlide_001_tiles" title="Tile Two" alt="Another Tile in This Example">
  15.             <li rel="tile_005">Click Here</li>
  16.             <li><a href="http://www.google.com">Link to Google</a></li>
  17.         </ul>
  18.         <ul id="tile_003" class="jGlide_001_tiles" title="Tile Three" alt="Third Tile is loaded up">
  19.             <li><a href="http://www.google.com">Link to Google</a></li>
  20.         </ul>
  21.         <ul id="tile_004" class="jGlide_001_tiles" title="Search Engines" alt="Find your favorite search engine">
  22.                         <li><a href="http://www.google.com">Link to Google</a></li>
  23.             <li><a href="http://www.yahoo.com">Link to Yahoo!</a></li>
  24.             <li><a href="http://www.ask.com">Link to Ask.com</a></li>
  25.                 </ul>
  26.         <ul id="tile_005" class="jGlide_001_tiles" title="Tile Five" alt="Active Spot Light Link">
  27.                         <li><a href="http://www.active8media.com">Link to ASL</a></li>
  28.                 </ul>

这里的菜单结构与之前我所见到的结构非常不一样，有必要说明下。
jGlideMenu的菜单结构没有使用嵌套结构，每个UL代表一个层级，每个LI代表一个子项，如果子项含有子菜单，那就加个rel属性指向子项菜单UL。所以这里UL的ID非常重要，必须指定。

初始化插件

  1. $('#jGlide_001').jGlideMenu({
  2.                 tileSource    : '.jGlide_001_tiles' ,
  3.                 demoMode    : true 
  4.             }).show();
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. Pingback: jquery插件大全（不断更新中） | ria之家--RIA三部曲：JQ、ext、flex

同类