`
hvt
  • 浏览: 29141 次
社区版块
存档分类
最新评论

jQuery仿京东无限级菜单HoverTree

阅读更多

官方网址:http://keleyi.com/jq/hovertree/



效果图:

 

看了上面效果图,你或许已经明白为什么是仿京东菜单。如果还不明白,请访问http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜单。当然这个HoverTree菜单的功能更加强大,可以实现无限级菜单。这是买手机的页面,买安卓手机须知:http://keleyi.com/a/bjad/rx7ma1oy.htm

 

HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>HoverTree - jquery菜单插件</title>
<base target="_blank" />
<link href="http://keleyi.com/jq/hovertree/css/jquery.hovertree.0.1.2.min.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/jq/hovertree/js/jquery.hovertree.0.1.2.min.js"></script>
</head>
<body>
<div style="width: 234px; margin-left:30px;">
<div>
<h3>
HoverTree菜单 0.1.2</h3>
</div>
<div style="width: 200px;">
<div id="keleyihovertree" class="hovertree">
<div class="hovertreeitem hvtcurrent">
<h3>
<b></b><a href="http://keleyi.com/list/">文章列表</a></h3>
<ul>
<li><a href="http://keleyi.com/menu/jquery/">jquery</a></li>
<li><a href="http://keleyi.com">Folder 2</a>
<ul>
<li><a href="http://keleyi.com">Sub Item 2.1</a></li>
<li><a href="http://keleyi.com">Folder 2.2</a>
<ul>
<li><a href="http://keleyi.com">Sub Item 2.2.1</a></li>
<li><a href="http://keleyi.com">Sub Item 2.2.2</a></li>
<li><a href="http://keleyi.com">Folder 2.2.3</a>
<ul>
<li><a href="http://keleyi.com">Sub Item 2.2.3.1</a></li>
<li><a href="http://keleyi.com">Sub Item 2.2.3.2</a></li>
<li><a href="http://keleyi.com">Sub Item 2.2.3.3</a></li>
<li><a href="http://keleyi.com">Sub Item 2.2.3.4</a></li>
<li><a href="http://keleyi.com">Sub Item 2.2.3.5</a></li>
</ul>
</li>
<li><a href="http://keleyi.com">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://keleyi.com/menu/javascript/">javascript</a></li>
<li><a href="http://keleyi.com/menu/html5/">html5</a></li>
<li><a href="http://keleyi.com/menu/webqd/">web前端</a></li>
<li><a href="http://keleyi.com/jq/">jQuery插件</a></li>
</ul>
</div>
<div>
<h3>
<b></b><a href="http://keleyi.com/jq/">jQuery Plugins</a></h3>
<ul>
<li><a href="http://keleyi.com/keleyi/">keleyi菜单</a></li>
<li><a href="http://keleyi.com/jq/randomvisit/">RandomVisit</a></li>
<li><a href="http://keleyi.com/jq/zonemenu/">ZoneMenu菜单</a></li>
<li><a href="http://keleyi.com/jq/myslider/">myslider</a></li>
<li><a href="http://keleyi.com/jq/hovertree/">hovertree</a></li>
</ul>
</div>
<div class="hovertreeitem">
<h3>
<b></b><a href="http://tool.keleyi.com">工具</a></h3>
<ul>
<li><a href="http://tool.keleyi.com/t/md5.htm">MD5加密</a></li>
<li><a href="http://keleyi.com/tool/md5.htm">MD5加密(Silverlight)</a></li>
<li><a href="http://keleyi.com/tool/htmlencode.htm">HTML编码与解码</a></li>
<li><a href="http://keleyi.com/tool/urldecode.htm">URL编码与解码</a></li>
<li><a href="http://keleyi.com/tool/regex.htm">.NET正则表达式匹配工具</a></li>
<li><a href="http://tool.keleyi.com/ip/wodeip.htm">查看IP地址</a></li>
</ul>
</div>
<div>
<h3>
<b></b><a href="http://keleyi.com/menu/aspnet/">ASP.NET</a></h3>
</div>
</div>
</div>
<a href="http://keleyi.com/jq/hovertree/demo/demo.0.1.0.htm">以前版本</a> <a href="http://plugins.jquery.com/hovertree/">
download</a>
</div>
<script type="text/javascript">
$("#keleyihovertree").hovertree({ "width": "keleyi", "initStatus": 'keleyi' });
</script>
</body>
</html>

 

 

 

关于这个菜单的使用问题,欢迎在评论里提出。

1
3
分享到:
评论

相关推荐

    使用jquery菜单插件HoverTree仿京东无限级菜单

    当然这个HoverTree菜单的功能更加强大,可以实现无限级菜单。 HTML代码: 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HoverTree – jquery菜单插件&lt;/title&gt; &lt;base target=”_...

    jQuery简单实现仿京东商城的左侧菜单效果代码

    本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容,...通过阅读本文,读者应能掌握如何使用jQuery简单实现仿京东商城左侧菜单效果的代码,并在此基础上进行更深入的定制与优化。

    基于ajax、jquery 通用无限级联菜单

    基于ajax、jquery 通用无限级联菜单; 引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var ...

    jQuery仿京东商品分类导航菜单

    在IT行业中,构建高效、美观且用户友好的网站交互元素是至关重要的,而"jQuery仿京东商品分类导航菜单"就是一个典型的实例。这个项目旨在利用jQuery库来创建一个类似京东商城的商品分类导航菜单,以提供用户方便的...

    jQuery仿京东导航菜单

    **jQuery仿京东导航菜单** 在Web开发中,创建交互式、动态的用户界面是提高用户体验的关键因素之一。京东作为国内知名的电商平台,其商品分类导航菜单以其直观、易用的特点深受用户喜爱。本教程将深入探讨如何使用...

    jQuery仿京东商品筛选功能

    一个漂亮完善的jQuery仿京东商品筛选功能

    jquery_无限级联菜单 v1.0-源码.zip

    《jQuery实现无限级联菜单详解及源码分析》 在Web开发中,级联菜单(Cascading Menu)是一种常见的交互元素,它允许用户通过展开和收缩的方式浏览层次结构的数据。jQuery,作为一款轻量级的JavaScript库,以其简洁...

    jQuery多级无限级导航下拉菜单代码

    jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(document).ready(function() { $("ul.nav li").hover...

    js实现无限级菜单(jQuery)

    在JavaScript和jQuery的世界里,构建无限级菜单是一项常见的任务,特别是在网页设计中,它能为用户提供清晰的导航结构。本文将深入探讨如何使用这两种技术来创建一个可扩展且灵活的无限级菜单。 首先,让我们从HTML...

    jquery做的无限级菜单

    标题中的“jquery做的无限级菜单”指的是使用JavaScript库jQuery实现的一种动态、可扩展的多级导航菜单。在网页设计中,无限级菜单允许用户在层级结构中导航,这对于内容丰富的网站,如电子商务平台或大型组织的网站...

    jQuery仿京东商城首页模板

    **jQuery仿京东商城首页模板**是一款基于jQuery库的网页模板,设计目的是为了帮助开发者快速构建类似于京东商城的电商网站前端页面。这个模板包含了丰富的交互效果和动态展示,旨在提升用户体验,使得网页更具吸引力...

    jquery仿京东产品内页多图展示代码

    在IT领域,jQuery是一种广泛使用的...综上所述,这个"jquery仿京东产品内页多图展示代码"涵盖了jQuery基础、事件处理、图片切换、响应式设计等多个关键知识点,对于学习和实践前端开发技术具有很高的参考价值。

    jQuery仿京东搜索条件筛选代码.zip

    在本项目中,"jQuery仿京东搜索条件筛选代码.zip" 提供了一个实现类似京东商城商品搜索筛选功能的JavaScript代码示例。这个功能是基于jQuery库和JSON数据格式来设计的,目的是为了帮助用户快速准确地找到他们想要的...

    jQuery仿京东商城侧边栏购物车菜单代码.zip

    这篇文章将深入解析jQuery仿京东商城侧边栏购物车菜单代码,该代码主要用于创建一个与京东商城类似的购物体验,用户可以在网站的侧边栏查看购物车信息,并直接进行结算操作。这个功能是电子商务网站中常见的交互设计...

    s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar

    本项目“s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单”就是这样一个解决方案,它整合了多种技术来实现这一功能。 首先,我们来看“s2sh”。这是Struts2、Spring和Hibernate三者的简称,它们分别是MVC...

    jquery_无限级联菜单 v1.0

    jquery_无限级联菜单,无需ajax,纯json数据调用 简单的调用方式 $.getScript("toregion.js",function(){ var ops = { tree_json"regionConf",//json字符串变量名称 tree_obj"areas[]",//select name //tree_...

    jQuery多级无限级导航下拉菜单代码.zip

    jQuery多级无限级导航下拉菜单是Web开发中常见的交互元素,它允许用户在主菜单项下展开子菜单,提供更丰富的导航体验。这个压缩包包含了一套完整的jQuery实现的多级下拉菜单代码,适合那些希望在自己的网站上添加...

    jQuery仿京东侧边购物车菜单代码.zip

    【jQuery仿京东侧边购物车菜单代码】是一个用于创建类似京东商城网站的jQuery侧边栏购物车功能的代码实现。这个功能通常出现在电子商务网站中,为用户提供方便的购物体验,让用户在浏览商品时能快速查看购物车内的...

    jQuery 仿京东商城产品展示切换及放大效果

    总的来说,实现"jQuery 仿京东商城产品展示切换及放大效果"需要掌握jQuery基础,理解DOM操作,熟悉事件处理,了解CSS布局和动画,以及可能的响应式设计技巧。通过实际项目练习,你可以提升这些技能,并能够灵活应用...

Global site tag (gtag.js) - Google Analytics