レンダリング: 上記のレンダリングを見れば、それが JD メニューの模倣である理由がすでに理解できたかもしれません。それでも理解できない場合は、http://list.jd.com/list.html?cat=9987,653,655 にアクセスして、左上のメニューをご覧ください。もちろん、この HoverTree メニューはさらに強力で、無制限のメニューを実現できます。 HTMLコード: コードをコピー コードは次のとおりです: HoverTree - jquery菜单插件 http://keleyi.com/jq/hovertree/css/jquery.hovertree.0.1.2.min.css" type="text/css" rel="Stylesheet" /> </script">http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script</a>><br> <script type="text/javascript" src="<a href="http://keleyi.com/jq/hovertree/js/jquery.hovertree.0.1.2.min.js"></script">http://keleyi.com/jq/hovertree/js/jquery.hovertree.0.1.2.min.js"></script</a>><br> </head><br> <body><br> <div style="width: 234px; margin-left:30px;"><br> <div><br> <h3><br> HoverTree菜单 0.1.2</h3><br> </div><br> <div style="width: 200px;"><br> <div id="keleyihovertree" class="hovertree"><br> <div class="hovertreeitem hvtcurrent"><br> <h3><br> <b></b><a href="<a href="http://keleyi.com/list/">http://keleyi.com/list/</a>">文章列表</a></h3><br> <ul><br> <li><a href="<a href="http://keleyi.com/menu/jquery/">jquery</a></li">http://keleyi.com/menu/jquery/">jquery</a></li</a>><br> <li><a href="<a href="http://keleyi.com">Folder">http://keleyi.com">Folder 2</a><br> <ul><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.1</a></li><br> <li><a href="<a href="http://keleyi.com">Folder">http://keleyi.com">Folder 2.2</a><br> <ul><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.2.1</a></li><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.2.2</a></li><br> <li><a href="<a href="http://keleyi.com">Folder">http://keleyi.com">Folder 2.2.3</a><br> <ul><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.2.3.1</a></li><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.2.3.2</a></li><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.2.3.3</a></li><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.2.3.4</a></li><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.2.3.5</a></li><br> </ul><br> </li><br> <li><a href="<a href="http://keleyi.com">Sub">http://keleyi.com">Sub Item 2.1.4</a></li><br> </ul><br> </li><br> </ul><br> </li><br> <li><a href="<a href="http://keleyi.com/menu/javascript/">javascript</a></li">http://keleyi.com/menu/javascript/">javascript</a></li</a>><br> <li><a href="<a href="http://keleyi.com/menu/html5/">html5</a></li">http://keleyi.com/menu/html5/">html5</a></li</a>><br> <li><a href="<a href="http://keleyi.com/menu/webqd/">web">http://keleyi.com/menu/webqd/">web前端</a></li><br> <li><a href="<a href="http://keleyi.com/jq/">jQuery">http://keleyi.com/jq/">jQuery插件</a></li><br> </ul><br> </div><br> <div><br> <h3> <br> <b></b><a href="<a href="http://keleyi.com/jq/">jQuery">http://keleyi.com/jq/">jQuery プラグイン</a></h3><br> <ul><br> <li><a href="<a href="http://keleyi.com/keleyi/">keleyi">http://keleyi.com/keleyi/">keleyi菜单</a></li><br> <li><a href="<a href="http://keleyi.com/jq/randomvisit/">RandomVisit</a></li">http://keleyi.com/jq/randomvisit/">RandomVisit</a></li</a>><br> <li><a href="<a href="http://keleyi.com/jq/zonemenu/">ZoneMenu">http://keleyi.com/jq/zonemenu/">ZoneMenu菜单</a></li><br> <li><a href="<a href="http://keleyi.com/jq/myslider/">myslider</a></li">http://keleyi.com/jq/myslider/">myslider</a></li</a>><br> <li><a href="<a href="http://keleyi.com/jq/hovertree/">hovertree</a></li">http://keleyi.com/jq/hovertree/">hovertree</a></li</a>><br> </ul><br> </div><br> <div class="hovertreeitem"><br> <h3> <br> <b></b><a href="<a href="http://tool.keleyi.com">http://tool.keleyi.com</a>">ツール</a></h3><br> <ul><br> <li><a href="<a href="http://tool.keleyi.com/t/md5.htm">MD5">http://tool.keleyi.com/t/md5.htm">MD5加密</a></li><br> <li><a href="<a href="http://keleyi.com/tool/md5.htm">MD5">http://keleyi.com/tool/md5.htm">MD5加密（Silverlight）</a></li><br> <li><a href="<a href="http://keleyi.com/tool/htmlencode.htm">HTML">http://keleyi.com/tool/htmlencode.htm">HTML编б与解</a></li><br> <li><a href="<a href="http://keleyi.com/tool/urldecode.htm">URL">http://keleyi.com/tool/urldecode.htm">URL编б与解</a></li><br> <li><a href="<a href="http://keleyi.com/tool/regex.htm">.NET">http://keleyi.com/tool/regex.htm">.NET正则表达式適合工具</a></li><br> <li><a href="<a href="http://tool.keleyi.com/ip/wodeip.htm">http://tool.keleyi.com/ip/wodeip.htm</a>">查看IPアドレス</a></li><br> </ul><br> </div><br> <div><br> <h3> <br> <b></b><a href="<a href="http://keleyi.com/menu/aspnet/">ASP.NET</a></h3">http://keleyi.com/menu/aspnet/">ASP.NET</a></h3</a>><br> </div><br> </div><br> </div><br> <a href="<a href="http://keleyi.com/jq/hovertree/demo/demo.0.1.0.htm">http://keleyi.com/jq/hovertree/demo/demo.0.1.0.htm</a>">以前のバージョン</a> <a href="<a href="http://plugins.jquery.com/hovertree/">http://plugins.jquery.com/hovertree/</a>"><br> ダウンロード</a><br> </div><br> <スクリプトタイプ="text/javascript"><br> $("#keleyihovertree").hovertree({ "width": "keleyi", "initStatus": 'keleyi' });<br> は不必常棒の効果呢，小伙伴们自己拿走使用吧
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
