首页
所有分类
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是如何实现继承的
Dec 12 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
jquery实现图片切换代码
Oct 13 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
layui实现三级导航菜单
Jul 26 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
metaclass(1) Bean(3) zip(1) IOC(3) 触发器(3) XML(1) Geospatial(1) enumerate(1) 数据类型(8) 自动化(1)
You might like
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP5 面向对象（学习记录）
2009/12/02 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP实现简易图形计算器
2020/08/28 PHP
让焦点自动跳转
2006/07/01 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python ip正则式
2009/05/07 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python Shapely使用指南详解
2020/02/18 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
压铸汽车模型收藏家：Diecastmodelswholesale.com
2016/12/21 全球购物
Hello Molly美国：女性时尚在线
2019/08/26 全球购物
Math.round(11.5)等於多少？ Math.round(-11.5)等於多少？
2015/01/27 面试题
安全宣传标语口号
2014/06/06 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
四年级数学上册教学计划
2015/01/20 职场文书