`

模拟多层级连菜单

 
阅读更多

模拟多层级连菜单

 
模拟多层级连菜单
演示

 

XML/HTML Code
  1. <a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>flyout menu</a>  
  2.   
  3. <a tabindex="0" href="#news-items" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchy"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu</a>  
  4. <div id="news-items" class="hidden">  
  5. <ul>  
  6.     <li><a href="#">Breaking News</a>  
  7.         <ul>  
  8.             <li><a href="#">Entertainment</a></li>  
  9.             <li><a href="/tags/html5.asp">Politics</a></li>  
  10.             <li><a href="#">A&E</a></li>  
  11.             <li><a href="#">Sports</a>  
  12.                 <ul>  
  13.                     <li><a href="#">Baseball</a></li>  
  14.                     <li><a href="#">Basketball</a></li>  
  15.                     <li><a href="#">A really long label would wrap nicely as you can see</a></li>  
  16.                     <li><a href="#">Swimming</a>  
  17.                         <ul>  
  18.                             <li><a href="#">High School</a></li>  
  19.                             <li><a href="#">College</a></li>  
  20.                             <li><a href="#">Professional</a>  
  21.                                 <ul>  
  22.                                     <li><a href="#">Mens Swimming</a>  
  23.                                         <ul>  
  24.                                             <li><a href="#">News</a></li>  
  25.                                             <li><a href="#">Events</a></li>  
  26.                                             <li><a href="#">Awards</a></li>  
  27.                                             <li><a href="#">Schedule</a></li>  
  28.                                             <li><a href="#">Team Members</a></li>  
  29.                                             <li><a href="#">Fan Site</a></li>  
  30.                                         </ul>  
  31.                                     </li>  
  32.                                     <li><a href="#">Womens Swimming</a>  
  33.                                         <ul>  
  34.                                             <li><a href="#">News</a></li>  
  35.                                             <li><a href="#">Events</a></li>  
  36.                                             <li><a href="#">Awards</a></li>  
  37.                                             <li><a href="#">Schedule</a></li>  
  38.                                             <li><a href="#">Team Members</a></li>  
  39.                                             <li><a href="#">Fan <storng>牛</storng><u>图</u><i>库</i> Site</a></li>  
  40.                                         </ul>  
  41.                                     </li>  
  42.                                 </ul>  
  43.                             </li>  
  44.                             <li><a href="#">Adult Recreational</a></li>  
  45.                             <li><a href="#">Youth Recreational</a></li>  
  46.                             <li><a href="#">Senior Recreational</a></li>  
  47.                         </ul>  
  48.                     </li>  
  49.                     <li><a href="#">Tennis</a></li>  
  50.                     <li><a href="#">Ice Skating</a></li>  
  51.                     <li><a href="#">Javascript <storng>牛</storng><u>图</u><i>库</i> Programming</a></li>  
  52.                     <li><a href="#">Running</a></li>  
  53.                     <li><a href="#">Walking</a></li>  
  54.                 </ul>  
  55.             </li>  
  56.             <li><a href="#">Local</a></li>  
  57.             <li><a href="#">Health</a></li>  
  58.         </ul>  
  59.     </li>  
  60.     <li><a href="#">Entertainment</a>  
  61.     <ul>  
  62.         <li><a href="#">Celebrity news</a></li>  
  63.         <li><a href="#">Gossip</a></li>  
  64.         <li><a href="#">Movies</a></li>  
  65.         <li><a href="#">Music</a>  
  66.         <ul>  
  67.             <li><a href="#">Alternative</a></li>  
  68.             <li><a href="#">Country</a></li>  
  69.             <li><a href="#">Dance</a></li>  
  70.             <li><a href="#">Electronica</a></li>  
  71.             <li><a href="#">Metal</a></li>  
  72.             <li><a href="#">Pop</a></li>  
  73.             <li><a href="#">Rock</a>  
  74.                 <ul>  
  75.                     <li><a href="#">Bands</a>  
  76.                         <ul>  
  77.                             <li><a href="#">Dokken</a></li>  
  78.                         </ul>  
  79.                     </li>  
  80.                     <li><a href="#">Fan Clubs</a></li>  
  81.                     <li><a href="#">Songs</a></li>  
  82.                 </ul>  
  83.             </li>  
  84.         </ul>  
  85.         </li>  
  86.         <li><a href="#">Slide shows</a></li>  
  87.         <li><a href="#">Red carpet</a></li>  
  88.     </ul>  
  89.     </li>  
  90.     <li><a href="#">Finance</a>  
  91.     <ul>  
  92.         <li><a href="#">Personal</a>  
  93.         <ul>  
  94.             <li><a href="#">Loans</a></li>  
  95.             <li><a href="#">Savings</a></li>  
  96.             <li><a href="#">Mortgage</a></li>  
  97.             <li><a href="#">Debt</a></li>  
  98.         </ul>  
  99.         </li>  
  100.         <li><a href="#">Business</a></li>  
  101.     </ul>  
  102.     </li>  
  103.     <li><a href="#">Food & Cooking</a>  
  104.     <ul>  
  105.         <li><a href="#">Breakfast</a></li>  
  106.         <li><a href="#">Lunch</a></li>  
  107.         <li><a href="#">Dinner</a></li>  
  108.         <li><a href="#">Dessert</a>  
  109.             <ul>  
  110.                 <li><a href="#">Dump Cake</a></li>  
  111.                 <li><a href="#">Doritos</a></li>  
  112.                 <li><a href="#">Both please.</a></li>  
  113.             </ul>  
  114.         </li>  
  115.     </ul>  
  116.     </li>  
  117.     <li><a href="#">Lifestyle</a></li>  
  118.     <li><a href="#">News</a></li>  
  119.     <li><a href="#">Politics</a></li>  
  120.     <li><a href="#">Sports</a>  
  121.         <ul>  
  122.             <li><a href="#">Baseball</a></li>  
  123.             <li><a href="#">Basketball</a></li>  
  124.             <li><a href="#">Swimming</a>  
  125.             <ul>  
  126.                 <li><a href="#">High School</a></li>  
  127.                 <li><a href="#">College</a></li>  
  128.                 <li><a href="#">Professional</a>  
  129.                 <ul>  
  130.                     <li><a href="#">Mens Swimming</a>  
  131.                     <ul>  
  132.                             <li><a href="#">News</a></li>  
  133.                             <li><a href="#">Events</a></li>  
  134.                             <li><a href="#">Awards</a></li>  
  135.                             <li><a href="#">Schedule</a></li>  
  136.                             <li><a href="#">Team Members</a></li>  
  137.                             <li><a href="#">Fan Site</a></li>  
  138.                         </ul>  
  139.                     </li>  
  140.                     <li><a href="#">Womens Swimming</a>  
  141.                     <ul>  
  142.                         <li><a href="#">News</a></li>  
  143.                         <li><a href="#">Events</a></li>  
  144.                         <li><a href="#">Awards</a></li>  
  145.                         <li><a href="#">Schedule</a></li>  
  146.                         <li><a href="#">Team Members</a></li>  
  147.                         <li><a href="#">Fan Site</a></li>  
  148.                     </ul>  
  149.                     </li>  
  150.                 </ul>  
  151.                 </li>  
  152.                 <li><a href="#">Adult Recreational</a></li>  
  153.                 <li><a href="#">Youth Recreational</a></li>  
  154.                 <li><a href="#">Senior Recreational</a></li>  
  155.             </ul>  
  156.             </li>  
  157.             <li><a href="#">Tennis</a></li>  
  158.             <li><a href="#">Ice Skating</a></li>  
  159.             <li><a href="#">Javascript Programming</a></li>  
  160.             <li><a href="#">Running</a></li>  
  161.             <li><a href="#">Walking</a></li>  
  162.         </ul>  
  163.         </li>  
  164.     </ul>  
  165. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_301.html

0
顶
0
踩
分享到：
| 百叶窗折叠图片
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vue+elementui实现多层树形菜单

    一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。

    MAYA快捷键

    u 切换雕刻笔作用方式（弹出式标记菜单） F4 显示动力学菜单 o 修改雕刻笔参考值 F5 显示渲染菜单 b 修改笔触影响力范围（按下/释放） 吸附*作 m 调整最大偏移量（按下/释放） 快捷键 功能解释 n 修改值的大小（按...

    基于C++实现（WinForm）二叉树及模拟社会关系网络【100010542】

    完成界面各层级的设计以及菜单栏各种功能的实现。 完成实现类（二叉树）的设计与实现。包括先序、中序、后序遍历；先序、中序、后序线索化；统计叶子结点个数。 设计显示图形，并将图形与二叉树进行映射。 进行整体...

    资源管理器

    历时一天完成的模拟windows下的资源管理器。 本程序在vs2010下完成。请使用08的用户升级版本再使用。 树控件展示整个电脑文件层级。右侧展示所有当前文件夹下的所有文件，双击可打开文件，右键菜单可“打开”“删除...

    Unity游戏开发基础知识：新手入门全攻略

    Unity是由Unity Technologies开发的一个让玩家能够创建诸如三维视频游戏、实时三维动画、模拟环境等多种类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。 二、Unity界面概览 Unity的界面...

    js无限级分类递归

    在原有的基础上进行二次修改，通过ajax请求，获取json数组，迭代json数组生成多层级的数据字典。当前例子中数据源为模拟的json数据。当然该方法是支持无限级父子关系。修改之前的源码均来自网上，本人只是对当前做了...

    第六届全国信息技术应用水平大赛预赛试题

    * 例如，要制作成图 3 样式的鱼缸，比较可靠的修改方法是选择鱼缸造型，在修改堆栈进入车削层级，在【对齐】选项单击【最大】按钮。 知识点十：材质编辑器 * 在 3ds Max 中，可以使用材质编辑器来实现不同的材质...

    计算机应用基础第3章.pptx

    普通视图是一种简化的页面布局，取消了页面边距、分栏、页眉页脚和图片等元素，尽可能多地显示文档内容，可以对跨页内容进行编辑。 计算机应用基础第3章全文共188页，当前为第16页。 第一节 Word 2007简介 三、文档...

    H3BPM 试用系统操作手册

     子表中默认的下拉菜单列表； 业务场景 在流程设计中，父子流程的数据是来源于同一数据源，且属于同一条业务流程。 子流程可能需要用到父流程的数据，设计流程时可以设置数据项来源于父流程。如“机票预定”流程的...

    android群雄传

    12.1.1 材料的形态模拟 258 12.1.2 更加真实的动画 258 12.1.3 大色块的使用 259 12.2 Material Design主题 260 12.3 Palette 261 12.4 视图与阴影 263 12.5 Tinting和Clipping 265 12.5.1 Tinting（着色） ...

Magicbox
Global site tag (gtag.js) - Google Analytics