首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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能够有所帮助。

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
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
HBuilder(1) MutationObserver(1) celery(1) Mysql8(2) OOP(1) 条形码(1) Three.js(1) Outlook(1) tree shaking(1) SeaTable(1)
You might like
PHP5 面向对象（学习记录）
2009/12/02 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
thinkPHP5框架实现多数据库连接，跨数据连接查询操作示例
2019/05/29 PHP
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
vue实现计算器功能
2020/02/22 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python将回车作为输入内容的实例
2018/06/23 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python进行统计建模
2020/08/10 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
美国网上购买眼镜：Eyeconic
2017/07/29 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
综合素质的自我鉴定
2013/10/07 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
微电影大赛策划方案
2014/06/05 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL