DeDeCMS中如何实现下拉菜单
在5.7版本,已经有比较简单的方法实现下拉菜单,我们可以用它已有方法,也可以用我写的第二种方法来实现
1. 在需要下拉菜单的地方加入以下代码
<div id="navMenu">
<ul>
<li><a href="{dede:global.cfg_indexurl/}">首页</a></li>
{dede:channel row='10' typeid="13"}
<li><a href="[field:typeurl/]"[field:rel/]>[field:typename/]</a></li></li>
{/dede:channel}
</ul>
</div>
在页面底部加入以下代码
<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>
{dede:channelartlist typeid='13' cacheid='channelsonlist'}
<ul id="dropmenu{dede:field.typeid/}" class="dropMenu">
{dede:channel type='son' noself='yes'}
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
{/dede:channelartlist}
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>
再加入以下样式
<style type="text/css">
.dropMenu {
position: absolute;
top: 0;
z-index: 100;
width: 80px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,
direction=135, strength=4);
margin-top: -1px;
border: 3px solid #FF0000;
border-top: 0px solid #3CA2DC;
background-color: #FFF;
background: url(templets/sdgwy/index_files/mmenubg.gif);
padding-top: 6px;
padding-bottom: 6px;
} .dropMenu li {
margin-top: 2px;
margin-bottom: 4px;
padding-left: 6px;
} .dropMenu a {
width: auto;
display: block;
color: black;
padding: 2px 0 2px 1.2em;
} * html .dropMenu a {
width: 100%;
} .dropMenu a:hover {
color: red;
text-decoration: underline;
}
</style>
这样就可以出二级菜单了,你需要自己再调一下显示样式
2. 用channelartlist和sql标签来生成li
<nav id="navigation" class="navigation clearfix">
<ul class="clearfix">
<li class='active'>
<a href="{dede:global.cfg_indexurl/}/" rel=“nofollow”>首页</a>
</li>
{dede:channelartlist typeid='13'}
<li><a href='{dede:field name='typeurl'/}'>{dede:field name='typename'/}</a>
<ul>
{dede:sql sql='Select * from dede_arctype where reid=~id~ ORDER BY id limit 0,17'}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>
{/dede:sql}
</ul>
</li>
{/dede:channelartlist}
</ul>
<div class="widget_social clearfix">
<ul class="social-icons clearfix">
<li class="facebook"><a href="#">Facebook<span></span></a></li>
<li class="twitter"><a href="#">Twitter <span></span></a></li>
<li class="rss"><a href="#">Rss <span></span></a></li>
<li class="youtube"><a href="#">YouTube <span></span></a></li>
</ul><!--/ .social-icons-->
</div><!--/ .widget_social-->
</nav><!--/ #navigation-->
这样就生成出
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
这样的结构,然后网上随便搞个jquery的下拉菜单的代码都可以实现漂亮的下拉菜单了
DeDeCMS中如何实现下拉菜单的更多相关文章
- Bootstrap中的各种下拉菜单
@*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...
- 在Android中创建一个下拉菜单
添加四个控件 TToolbar Alignment: alTop TSpeedButton Alignment: alRight StyleLookUp: detailstoolbutton Marg ...
- Unity3D UGUI下拉菜单/Dropdown组件用法、总结
Unity3D中UGUI实现下拉菜单 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...
- 制作excel下拉菜单
1.选中excel中需要制作下拉菜单的单元格/列/行,点击‘数据’——'数据验证': 2.允许选择'序列',来源中手动输入需要的内容,以逗号(,)分割: 3.如下图,此列都具有下拉选择的功能:
- 『心善渊』Selenium3.0基础 — 13、Selenium操作下拉菜单
目录 1.使用Selenium中的Select类来处理下拉菜单(推荐) 2.下拉菜单对象的其他操作(了解) 3.通过元素二次定位方式操作下拉菜单(重点) (1)了解元素二次定位 (2)示例: 页面中的 ...
- 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)
组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- 从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中
1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...
- bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...
随机推荐
- 84. 从视图索引说Notes数据库(下)
作用和代价上文介绍了关系型数据库里的索引.Notes数据库里的索引隐藏在视图概念里(本文的讨论仅仅针对Notes的视图索引,不包括全文索引.).开发者创建的视图仅仅是存放在数据库里的一条设计文档.数据 ...
- 下载文件夹里面的所有文件,并压缩成.zip压缩包的形式
http://www.aspsnippets.com/Articles/Download-multiple-files-as-Zip-Archive-File-in-ASPNet-using-C-an ...
- SSIS 阻塞,半阻塞和全阻塞 (Non-blocking, semi-blocking and Fully-blocking) transformations清单
三种Blocking类型,这里跟数据流的Buff关系很大:■■ non-blocking transformations,每一行直接转换输出,没有等待.■■ partial-blocking tran ...
- UIScreen的 bound、frame、scale属性
CGRect bound = [[UIScreen mainScreen] bounds]; // 返回的是带有状态栏的Rect CGRect frame = [[UIScreen mainSc ...
- 读取jar包里面的文件
一.最近做项目的时候,师兄要求读取jar包里面的java文件.在网上查了各种文件以后,终于完成了,在这里和各位朋友分享一下. (一)找到jar包所在的位置. String path="XXX ...
- Node.js学习笔记3(快速入门)
一.开始使用Node.js编程 1.hello world 好了,让我们开始实现第一个 Node.js 程序吧.打开你常用的文本编辑器,在其中输入 ...
- PHP 8大安全函数
1. mysql_real_escape_string() 这个函数对于在PHP中防止SQL注入攻击很有帮助,它对特殊的字符,像单引号和双引号,加上了“反斜杠”,确保用户的输入在用它去查询以前已经是安 ...
- Python学习之路——函数
一.Python2.X内置函数表: 注:以上为pyton2.X内置函数,官方网址:https://docs.python.org/2/library/functions.html 二.Python3. ...
- Spring MVC 入门基础
欢迎进入Java社区论坛,与200万技术人员互动交流 >>进入 原文链接:http://java.chinaitlab.com/advance/899129.html 基本上是一个精简版的 ...
- Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据
原文 Windows Phone 8初学者开发—第14部分:在运行时绑定到真实的数据 第14部分:在运行时绑定到真实的数据 原文地址: http://channel9.msdn.com/Series/ ...