dedecms模版制作活动的折叠菜单
需要做成这种样式
url请求为这样:
http://m03.com/plus/list.php?tid=19
这些菜单项都有对应的tid项,页面刷新后,应该将所有的菜单折叠起来,对于tid=19的菜单项,要判断他是否是子菜单,如果是子菜单,应该讲它所在的整个菜单项打开并将它自身加上active样式,否则不用打开整个菜单,直接加active样式。并且如果当前菜单下没有子菜单,应该讲菜单项前的按钮去除。
这里准备了两张图片
right_g.png和bottom_g.png
首先结合dedecms模板代码生成折叠菜单
<ul class="flod_menu">
{dede:channelartlist row=5 typeid=10}
<li {dede:field name='typeid' runphp="yes"}@me = (@me==$_GET['tid'] && @me!=10 ? 'class="flod_menu_item active_top"' : 'class="flod_menu_item"');{/dede:field}>
<img src="{dede:global.cfg_templets_skin/}/images/arrow/right_g.png" class="btn"/>
<a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></span>
<ul class="flod_menu_sub">
{dede:sql sql='Select * from dede_arctype where reid=~id~ ORDER BY id limit 0,7'}
<li [field:id runphp="yes"]@me = (@me==$_GET['tid'] && @me!=10 ? 'class="flod_menu_item_sub active"' : 'class="flod_menu_item_sub"');[/field:id]><a href='[field:typedir function='str_replace("{cmspath}","",@me)'/]' target='_blank'>[field:typename/]</a></li>
{/dede:sql}
</ul>
</li>
{/dede:channelartlist}
</ul>
这里有些知识,比如如何在dedecms模板中生成三级菜单,以及如何获取url中的请求参数($_GET['XXX'])。
然后再通过JavaScript代码折叠或打开菜单,去除多余的按钮
//对于没有下级菜单的,将按钮隐藏
$(".flod_menu .flod_menu_item > .btn").each(function(index,element){
var hasLi = $(this).nextAll(".flod_menu_sub").children().is("li");
if(!hasLi){
$(this).css("display","none");
}
});
//找到当前活动的节点
$(".flod_menu_sub").each(function(index,element){
var isActive = $(this).children(".active").is("li");
if(isActive){
$(this).css("display","block");
}
});
//为按钮绑定单击事件
$(".flod_menu .flod_menu_item > .btn").click(function(){
var cSrc = $(this).attr("src"); if(cSrc.indexOf("right")>=0){
//处于折叠状态,进行打开
$(this).attr("src",cSrc.replace("right","bottom"));
$(this).nextAll(".flod_menu_sub").css("display","block");
}
else{
//处于打开状态,进行折叠
$(this).attr("src",cSrc.replace("bottom","right"));
$(this).nextAll(".flod_menu_sub").css("display","none");
}
});
dedecms模版制作活动的折叠菜单的更多相关文章
- 基于jQuery制作的手风琴折叠菜单
初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...
- cocos2dx-lua使用UIListView制作二级折叠菜单
折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...
- 滑动式折叠菜单 - Slashdot's Menu
折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- 顶 兼容各种浏览器js折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS三级折叠菜单特效 自动收缩其它级
真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...
- 20151225jquery学习笔记---折叠菜单UI
折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了.一. 使用 accordion使用 acco ...
随机推荐
- FPGA入门学习第一课:二分频器
分频器还是比较简单的,一般的思路是:每数几个时钟就输出一个时钟.最简单的当数二分频器了,每当时钟上升沿(或下降沿)就把输出翻转一下.这样就刚好实现了二分频器了. 网上也搜到了最简实现”二分频最简单了, ...
- (转)Linux中的文件描述符
本文转自:http://blog.csdn.net/cywosp/article/details/38965239 作者:cywosp 1. 概述 在Linux系统中一切皆可以看成是文件,文件又可分为 ...
- Qt 线程基础(Thread Basics的翻译,线程的五种使用情况)
Qt 线程基础(QThread.QtConcurrent等) 转载自:http://blog.csdn.net/dbzhang800/article/details/6554104 昨晚看Qt的Man ...
- JSNI GWT中的东东
二.JavaScript Native InterfaceJavaScript本地接口JSNI.1)声明一个本地方法在JSNI中声明一个本地方法时,使用Java的标准native关键字,就像在JNI( ...
- Android开源项目分类汇总【畜生级别】[转]
Android开源项目分类汇总 欢迎大家推荐好的Android开源项目,可直接Commit或在 收集&提交页 中告诉我,欢迎Star.Fork :) 微博:Trinea 主页:www.t ...
- 1040. Longest Symmetric String (25)
题目链接:http://www.patest.cn/contests/pat-a-practise/1040 题目: 1040. Longest Symmetric String (25) 时间限制 ...
- AlgorithmVisualizer
http://jasonpark.me/AlgorithmVisualizer/#path=graph_search/floyd_warshall/shortest_paths
- ROS中Mangle解析
http://blog.csdn.net/bluecy/article/details/8192307
- [CodeForce]356D Bags and Coins
已知有n个包,和总共s个钱币. n,s<=70000. 每个包可以装钱币,还可以套别的包.每个包中的钱数等于 所有套的包的钱数 加上 自己装的钱. 所有的钱都在包内. 问给定每个包中的钱数,输出 ...
- 基于hadoop2.6.0搭建5个节点的分布式集群
1.前言 我们使用hadoop2.6.0版本配置Hadoop集群,同时配置NameNode+HA.ResourceManager+HA,并使用zookeeper来管理Hadoop集群 2.规划 1.主 ...