首页
所有分类
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 相关文章推荐
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
vue实现数字滚动效果
Jun 29 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
mysqldump(1) ACID(1) sentinel(1) XPathParser(1) Stater(1) csgo(1) sock(2) protocol(1) Windows server 2003(1) xps(1)
You might like
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式，官方实例)
2021/01/10 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
微软中国官方旗舰店：销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
豪华床上用品 ：Jennifer Adams
2019/09/15 全球购物
美国最大最全的亚洲购物网站：美国亚米网（Yamibuy）
2020/05/05 全球购物
什么是抽象
2015/12/13 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
财务出纳岗位职责
2014/02/03 职场文书
未婚证明书模板
2014/10/08 职场文书
高中教师个人总结
2015/02/10 职场文书
2016公司新年问候语
2015/11/11 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server