jQuery实现精美的多级下拉菜单特效


Posted in Javascript onMarch 14, 2015

这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单,有加载等待效果,有层级分类展示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Filament Group Lab</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="fg.menu.js"></script>

<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" />

<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" />

<!-- styles for this example page only -->

<style type="text/css">

body { font-size:62.5%; margin:0; padding:0; }

#menuLog { font-size:1.4em; margin:20px; }

.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }

.fg-button { clear:left; margin:0 4px 40px 450px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }

.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }

a.fg-button { float:left; }

button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */

.fg-button-icon-left { padding-left: 2.1em; }

.fg-button-icon-right { padding-right: 2.1em; }

.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }

.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }

.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }     /* solo icon buttons must have block properties for the text-indent to work */

.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }

</style>

<!-- style exceptions for IE 6 -->

<!--[if IE 6]>

    <style type="text/css">

        .fg-menu-ipod .fg-menu li { width: 95%; }

        .fg-menu-ipod .ui-widget-content { border:0; }

    </style>

    <![endif]-->

<script type="text/javascript">    

    $(function(){

        // BUTTONS

        $('.fg-button').hover(

            function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },

            function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }

        );

        // MENUS        

        $('#flat').menu({ 

            content: $('#flat').next().html(), // grab content from this page

            showSpeed: 400 

        });

        $('#hierarchy').menu({

            content: $('#hierarchy').next().html(),

            crumbDefaultText: ' '

        });

        $('#hierarchybreadcrumb').menu({

            content: $('#hierarchybreadcrumb').next().html(),

            backLink: false

        });

        // or from an external source

        $.get('menuContent.html', function(data){ // grab content from another page

            $('#flyout').menu({ content: data, flyOut: true });

        });

    });

    </script>

<!-- theme switcher button -->

<script type="text/javascript" src="js/themeswitchertool"></script>

<script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 300px;" />').appendTo('body').themeswitcher(); }); </script>

</head>

<body>

<p id="menuLog">You chose: <span id="menuSelection"></span></p>

<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a>

<div id="search-engines" class="hidden">

  <ul>

    <li><a href="#">Google</a></li>

    <li><a href="#">Yahoo</a></li>

    <li><a href="#">MSN</a></li>

    <li><a href="#">Ask</a></li>

    <li><a href="#">AOL</a></li>

  </ul>

</div>

<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> <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>

<div id="news-items" class="hidden">

  <ul>

    <li><a href="#">Breaking News</a>

      <ul>

        <li><a href="#">Entertainment</a></li>

        <li><a href="#">Politics</a></li>

        <li><a href="#">A&E</a></li>

        <li><a href="#">Sports</a>

          <ul>

            <li><a href="#">Baseball</a></li>

            <li><a href="#">Basketball</a></li>

            <li><a href="#">A really long label would wrap nicely as you can see</a></li>

            <li><a href="#">Swimming</a>

              <ul>

                <li><a href="#">High School</a></li>

                <li><a href="#">College</a></li>

                <li><a href="#">Professional</a>

                  <ul>

                    <li><a href="#">Mens Swimming</a>

                      <ul>

                        <li><a href="#">News</a></li>

                        <li><a href="#">Events</a></li>

                        <li><a href="#">Awards</a></li>

                        <li><a href="#">Schedule</a></li>

                        <li><a href="#">Team Members</a></li>

                        <li><a href="#">Fan Site</a></li>

                      </ul>

                    </li>

                    <li><a href="#">Womens Swimming</a>

                      <ul>

                        <li><a href="#">News</a></li>

                        <li><a href="#">Events</a></li>

                        <li><a href="#">Awards</a></li>

                        <li><a href="#">Schedule</a></li>

                        <li><a href="#">Team Members</a></li>

                        <li><a href="#">Fan Site</a></li>

                      </ul>

                    </li>

                  </ul>

                </li>

                <li><a href="#">Adult Recreational</a></li>

                <li><a href="#">Youth Recreational</a></li>

                <li><a href="#">Senior Recreational</a></li>

              </ul>

            </li>

            <li><a href="#">Tennis</a></li>

            <li><a href="#">Ice Skating</a></li>

            <li><a href="#">Javascript Programming</a></li>

            <li><a href="#">Running</a></li>

            <li><a href="#">Walking</a></li>

          </ul>

        </li>

        <li><a href="#">Local</a></li>

        <li><a href="#">Health</a></li>

      </ul>

    </li>

    <li><a href="#">Entertainment</a>

      <ul>

        <li><a href="#">Celebrity news</a></li>

        <li><a href="#">Gossip</a></li>

        <li><a href="#">Movies</a></li>

        <li><a href="#">Music</a>

          <ul>

            <li><a href="#">Alternative</a></li>

            <li><a href="#">Country</a></li>

            <li><a href="#">Dance</a></li>

            <li><a href="#">Electronica</a></li>

            <li><a href="#">Metal</a></li>

            <li><a href="#">Pop</a></li>

            <li><a href="#">Rock</a>

              <ul>

                <li><a href="#">Bands</a>

                  <ul>

                    <li><a href="#">Dokken</a></li>

                  </ul>

                </li>

                <li><a href="#">Fan Clubs</a></li>

                <li><a href="#">Songs</a></li>

              </ul>

            </li>

          </ul>

        </li>

        <li><a href="#">Slide shows</a></li>

        <li><a href="#">Red carpet</a></li>

      </ul>

    </li>

    <li><a href="#">Finance</a>

      <ul>

        <li><a href="#">Personal</a>

          <ul>

            <li><a href="#">Loans</a></li>

            <li><a href="#">Savings</a></li>

            <li><a href="#">Mortgage</a></li>

            <li><a href="#">Debt</a></li>

          </ul>

        </li>

        <li><a href="#">Business</a></li>

      </ul>

    </li>

    <li><a href="#">Food & Cooking</a>

      <ul>

        <li><a href="#">Breakfast</a></li>

        <li><a href="#">Lunch</a></li>

        <li><a href="#">Dinner</a></li>

        <li><a href="#">Dessert</a>

          <ul>

            <li><a href="#">Dump Cake</a></li>

            <li><a href="#">Doritos</a></li>

            <li><a href="#">Both please.</a></li>

          </ul>

        </li>

      </ul>

    </li>

    <li><a href="#">Lifestyle</a></li>

    <li><a href="#">News</a></li>

    <li><a href="#">Politics</a></li>

    <li><a href="#">Sports</a>

      <ul>

        <li><a href="#">Baseball</a></li>

        <li><a href="#">Basketball</a></li>

        <li><a href="#">Swimming</a>

          <ul>

            <li><a href="#">High School</a></li>

            <li><a href="#">College</a></li>

            <li><a href="#">Professional</a>

              <ul>

                <li><a href="#">Mens Swimming</a>

                  <ul>

                    <li><a href="#">News</a></li>

                    <li><a href="#">Events</a></li>

                    <li><a href="#">Awards</a></li>

                    <li><a href="#">Schedule</a></li>

                    <li><a href="#">Team Members</a></li>

                    <li><a href="#">Fan Site</a></li>

                  </ul>

                </li>

                <li><a href="#">Womens Swimming</a>

                  <ul>

                    <li><a href="#">News</a></li>

                    <li><a href="#">Events</a></li>

                    <li><a href="#">Awards</a></li>

                    <li><a href="#">Schedule</a></li>

                    <li><a href="#">Team Members</a></li>

                    <li><a href="#">Fan Site</a></li>

                  </ul>

                </li>

              </ul>

            </li>

            <li><a href="#">Adult Recreational</a></li>

            <li><a href="#">Youth Recreational</a></li>

            <li><a href="#">Senior Recreational</a></li>

          </ul>

        </li>

        <li><a href="#">Tennis</a></li>

        <li><a href="#">Ice Skating</a></li>

        <li><a href="#">Javascript Programming</a></li>

        <li><a href="#">Running</a></li>

        <li><a href="#">Walking</a></li>

      </ul>

    </li>

  </ul>

</div>

<a tabindex="0" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu w/ breadcrumb</a>

<div id="news-items-2" class="hidden">

  <ul>

    <li><a href="#">Breaking News</a>

      <ul>

        <li><a href="#">Entertainment</a></li>

        <li><a href="#">Politics</a></li>

        <li><a href="#">A&E</a></li>

        <li><a href="#">Sports</a>

          <ul>

            <li><a href="#">Baseball</a></li>

            <li><a href="#">Basketball</a></li>

            <li><a href="#">A really long label would wrap nicely as you can see</a></li>

            <li><a href="#">Swimming</a>

              <ul>

                <li><a href="#">High School</a></li>

                <li><a href="#">College</a></li>

                <li><a href="#">Professional</a>

                  <ul>

                    <li><a href="#">Mens Swimming</a>

                      <ul>

                        <li><a href="#">News</a></li>

                        <li><a href="#">Events</a></li>

                        <li><a href="#">Awards</a></li>

                        <li><a href="#">Schedule</a></li>

                        <li><a href="#">Team Members</a></li>

                        <li><a href="#">Fan Site</a></li>

                      </ul>

                    </li>

                    <li><a href="#">Womens Swimming</a>

                      <ul>

                        <li><a href="#">News</a></li>

                        <li><a href="#">Events</a></li>

                        <li><a href="#">Awards</a></li>

                        <li><a href="#">Schedule</a></li>

                        <li><a href="#">Team Members</a></li>

                        <li><a href="#">Fan Site</a></li>

                      </ul>

                    </li>

                  </ul>

                </li>

                <li><a href="#">Adult Recreational</a></li>

                <li><a href="#">Youth Recreational</a></li>

                <li><a href="#">Senior Recreational</a></li>

              </ul>

            </li>

            <li><a href="#">Tennis</a></li>

            <li><a href="#">Ice Skating</a></li>

            <li><a href="#">Javascript Programming</a></li>

            <li><a href="#">Running</a></li>

            <li><a href="#">Walking</a></li>

          </ul>

        </li>

        <li><a href="#">Local</a></li>

        <li><a href="#">Health</a></li>

      </ul>

    </li>

    <li><a href="#">Entertainment</a>

      <ul>

        <li><a href="#">Celebrity news</a></li>

        <li><a href="#">Gossip</a></li>

        <li><a href="#">Movies</a></li>

        <li><a href="#">Music</a>

          <ul>

            <li><a href="#">Alternative</a></li>

            <li><a href="#">Country</a></li>

            <li><a href="#">Dance</a></li>

            <li><a href="#">Electronica</a></li>

            <li><a href="#">Metal</a></li>

            <li><a href="#">Pop</a></li>

            <li><a href="#">Rock</a>

              <ul>

                <li><a href="#">Bands</a>

                  <ul>

                    <li><a href="#">Dokken</a></li>

                  </ul>

                </li>

                <li><a href="#">Fan Clubs</a></li>

                <li><a href="#">Songs</a></li>

              </ul>

            </li>

          </ul>

        </li>

        <li><a href="#">Slide shows</a></li>

        <li><a href="#">Red carpet</a></li>

      </ul>

    </li>

    <li><a href="#">Finance</a>

      <ul>

        <li><a href="#">Personal</a>

          <ul>

            <li><a href="#">Loans</a></li>

            <li><a href="#">Savings</a></li>

            <li><a href="#">Mortgage</a></li>

            <li><a href="#">Debt</a></li>

          </ul>

        </li>

        <li><a href="#">Business</a></li>

      </ul>

    </li>

    <li><a href="#">Food & Cooking</a>

      <ul>

        <li><a href="#">Breakfast</a></li>

        <li><a href="#">Lunch</a></li>

        <li><a href="#">Dinner</a></li>

        <li><a href="#">Dessert</a>

          <ul>

            <li><a href="#">Dump Cake</a></li>

            <li><a href="#">Doritos</a></li>

            <li><a href="#">Both please.</a></li>

          </ul>

        </li>

      </ul>

    </li>

    <li><a href="#">Lifestyle</a></li>

    <li><a href="#">News</a></li>

    <li><a href="#">Politics</a></li>

    <li><a href="#">Sports</a>

      <ul>

        <li><a href="#">Baseball</a></li>

        <li><a href="#">Basketball</a></li>

        <li><a href="#">Swimming</a>

          <ul>

            <li><a href="#">High School</a></li>

            <li><a href="#">College</a></li>

            <li><a href="#">Professional</a>

              <ul>

                <li><a href="#">Mens Swimming</a>

                  <ul>

                    <li><a href="#">News</a></li>

                    <li><a href="#">Events</a></li>

                    <li><a href="#">Awards</a></li>

                    <li><a href="#">Schedule</a></li>

                    <li><a href="#">Team Members</a></li>

                    <li><a href="#">Fan Site</a></li>

                  </ul>

                </li>

                <li><a href="#">Womens Swimming</a>

                  <ul>

                    <li><a href="#">News</a></li>

                    <li><a href="#">Events</a></li>

                    <li><a href="#">Awards</a></li>

                    <li><a href="#">Schedule</a></li>

                    <li><a href="#">Team Members</a></li>

                    <li><a href="#">Fan Site</a></li>

                  </ul>

                </li>

              </ul>

            </li>

            <li><a href="#">Adult Recreational</a></li>

            <li><a href="#">Youth Recreational</a></li>

            <li><a href="#">Senior Recreational</a></li>

          </ul>

        </li>

        <li><a href="#">Tennis</a></li>

        <li><a href="#">Ice Skating</a></li>

        <li><a href="#">Javascript Programming</a></li>

        <li><a href="#">Running</a></li>

        <li><a href="#">Walking</a></li>

      </ul>

    </li>

  </ul>

</div>

</body>

</html>

以上就是本文所述的全部内容了,希望对大家学习jQuery能够有所帮助。

Javascript 相关文章推荐
jquery indexOf使用方法
Aug 19 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 #Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 #Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 #Javascript
javascript实现数独解法
Mar 14 #Javascript
You might like
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python入门之后再看点什么好?
2018/03/05 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python @classmethod 的使用场合详解
2019/08/23 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
结对共建工作方案
2014/06/02 职场文书
刑事辩护词范文
2015/05/21 职场文书
合理化建议书范文
2015/09/14 职场文书
golang为什么要统一错误处理
2022/04/03 Golang