首页>>导航菜单>>jQuery3D垂直多级菜单 可筛选菜单项(2016-07-12)

jQuery3D垂直多级菜单 可筛选菜单项

 搜索框可以筛选符合条件的菜单

jQuery3D垂直多级菜单 可筛选菜单项
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="content">  
  2.   
  3.     <div id="jquery-accordion-menu" class="jquery-accordion-menu red">  
  4.         <div class="jquery-accordion-menu-header" id="form"></div>  
  5.         <ul id="demo-list">  
  6.            
  7.            <li class="active"><a href="#"><i class="fa fa-home"></i>Home </a></li>  
  8.             <li><a href="#"><i class="fa fa-glass"></i>Events </a></li>  
  9.             <li><a href="#"><i class="fa fa-file-image-o"></i>Gallery </a><span class="jquery-accordion-menu-label">  
  10.                 12 </span></li>  
  11.             <li><a href="#"><i class="fa fa-cog"></i>Services </a>  
  12.                 <ul class="submenu">  
  13.                     <li><a href="#">Web Design </a></li>  
  14.                     <li><a href="#">Hosting </a></li>  
  15.                     <li><a href="#">Design </a>  
  16.                         <ul class="submenu">  
  17.                             <li><a href="#">Graphics </a></li>  
  18.                             <li><a href="#">Vectors </a></li>  
  19.                             <li><a href="#">Photoshop </a></li>  
  20.                             <li><a href="#">Fonts </a></li>  
  21.                         </ul>  
  22.                     </li>  
  23.                     <li><a href="#">Consulting </a></li>  
  24.                 </ul>  
  25.             </li>  
  26.             <li><a href="#"><i class="fa fa-home"></i>系统管理 </a></li>  
  27.             <li><a href="#"><i class="fa fa-suitcase"></i>Portfolio </a>  
  28.                 <ul class="submenu">  
  29.                     <li><a href="#">Web Design </a></li>  
  30.                     <li><a href="#">Graphics </a><span class="jquery-accordion-menu-label">10 </span>  
  31.                     </li>  
  32.                     <li><a href="#">Photoshop </a></li>  
  33.                     <li><a href="#">Programming </a></li>  
  34.                 </ul>  
  35.             </li>  
  36.             <li><a href="#"><i class="fa fa-user"></i>About </a></li>  
  37.             <li><a href="#"><i class="fa fa-envelope"></i>Contact </a></li>  
  38.              
  39.         </ul>  
  40.         <div class="jquery-accordion-menu-footer">  
  41.             Footer  
  42.         </div>  
  43.     </div>  
  44. </div>  
  45.   
  46. <script type="text/javascript">  
  47. (function($) {  
  48. $.expr[":"].Contains = function(a, i, m) {  
  49.     return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;  
  50. };  
  51. function filterList(header, list) {  
  52.     //@header 头部元素  
  53.     //@list 无需列表  
  54.     //创建一个搜素表单  
  55.     var form = $("<form>").attr({  
  56.         "class":"filterform",  
  57.         action:"#"  
  58.     }), input = $("<input>").attr({  
  59.         "class":"filterinput",  
  60.         type:"text"  
  61.     });  
  62.     $(form).append(input).appendTo(header);  
  63.     $(input).change(function() {  
  64.         var filter = $(this).val();  
  65.         if (filter) {  
  66.             $matches = $(list).find("a:Contains(" + filter + ")").parent();  
  67.             $("li", list).not($matches).slideUp();  
  68.             $matches.slideDown();  
  69.         } else {  
  70.             $(list).find("li").slideDown();  
  71.         }  
  72.         return false;  
  73.     }).keyup(function() {  
  74.         $(this).change();  
  75.     });  
  76. }  
  77. $(function() {  
  78.     filterList($("#form"), $("#demo-list"));  
  79. });  
  80. })(jQuery);   
  81. </script>  
  82.   
  83. <script type="text/javascript">  
  84.   
  85.     jQuery("#jquery-accordion-menu").jqueryAccordionMenu();  
  86.       
  87. </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_567.html