首页
所有分类
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 相关文章推荐
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
微信小程序 支付功能（前端）的实现
May 24 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
vue组件内部引入外部js文件的方法
Jan 18 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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
解密(1) 面向对象(3) 相对路径(1) requests(1) Mint UI(1) openpyxl(1) hashlib(1) 相对路径 (1) 加密(1) hmac(1)
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
解密效果
2006/06/23 Javascript
论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】
2019/02/27 jQuery
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
Python数据结构之Array用法实例
2014/10/09 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python看某个模块的版本方法
2018/10/16 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
一套软件测试笔试题
2014/07/25 面试题
求职简历中个人的自我评价
2013/12/25 职场文书
护士在校生自荐信
2014/02/01 职场文书
中秋晚会活动方案
2014/08/31 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年档案室工作总结
2014/12/01 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
Java 多线程协作作业之信号同步
2022/05/11 Java/Android