WordPress教程

WordPerss 网站制作产品分类点击展开/收缩功能

阿里云

有很多的企业网站都有这样的产品分类,可以通过点击实现展开/收缩功能。这样可以节省网站版面,也可以放更多的分类目录了。下面介绍一下怎么制作这样的产品分类点击展开/收缩功能。效果如下图:

第一步:下载网站特效功能万能 JS 插件包;

第二步:将下载的压缩包解压出来,将里面的 jquery1.42.min.js 和 jquery.SuperSlide.2.1.3.js 二个文件通过 FTP 工具上传到自己模板的 images 文件夹里;

第三步:在头部模板 header.php 里找到 标签,将下的代码放到 标签上面;(注意文件路径)

也想出现在这里?联系我们
创客主机
  1. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
  2. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>

第四步:在需要显示点击展示/隐藏的位置,放上以下的代码:

  1. <div class="sideMenu" style="margin:0 auto">
  2. <?php
  3. $args=array(
  4. 'type' => 'post',
  5. 'child_of'=> $catid01,
  6. 'parent' => $catid01,
  7. 'orderby' => 'ID',
  8. 'order' => 'ASC',
  9. 'hide_empty'=>'0',
  10. 'hierarchical' => 1,
  11. 'exclude' => '',
  12. 'include' => '',
  13. 'number' => '',
  14. 'pad_counts' => false
  15. );
  16. $categories=get_categories($args);
  17. $r=1;
  18. foreach($categories as $category) {?>
  19. <h3 <?php if($r==1){echo 'class="on"';}?>><em></em><?php echo $category->name;?></h3>
  20. <ul>
  21. <?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=1&depth=1&hide_empty=0&child_of='.$category->term_id.''); ?>
  22. </ul>
  23. <?php $r++;
  24. if($r>15)
  25. break;
  26. }
  27. ?>
  28. </div>
  29.  
  30. <script type="text/javascript">
  31. jQuery(".sideMenu").slide({
  32. titCell:"h3", //鼠标触发对象
  33. targetCell:"ul", //与titCell一一对应,第n个titCell控制第n个targetCell的显示隐藏
  34. effect:"slideDown", //targetCell下拉效果
  35. delayTime:300 , //效果时间
  36. triggerTime:150, //鼠标延迟触发时间(默认150)
  37. defaultPlay:true,//默认是否执行效果(默认true)
  38. returnDefault:true //鼠标从.sideMen移走后返回默认状态(默认false)
  39. });
  40. </script>

第五步:放上 CSS 样式代码;

  1. .sideMenu{ border:1px solid #ddd; }
  2. .sideMenu h3{ height:32px; line-height:32px; padding-left:10px; border-top:1px solid #e3e3e3; background:#f4f4f4; cursor:pointer;
  3. font:normal 14px/32px "Microsoft YaHei";
  4. }
  5. .sideMenu h3 em{ float:right; display:block; width:40px; height:32px; background:url(images/icoAdd.png) 16px 12px no-repeat; cursor:pointer; }
  6. .sideMenu h3.on em{ background-position:16px -57px; }
  7. .sideMenu ul{ padding:8px 25px; color:#999; display:none; /* 默认都隐藏 */ }

这样就可以制作出这种点击自动展开/隐藏的效果了。

WordPerss 网站制作产品分类点击展开/收缩功能

已有 142 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!