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加 ...
随机推荐
- Android 带password输入界面的Dialog实现机制
1.布局实现: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr ...
- 如何自定义iOS中的控件
本文译自 How to build a custom control in iOS .大家要是有什么问题,可以直接在 twitter 上联系原作者,当然也可以在最后的评论中回复我. 在开发过程中,有时 ...
- 使用AJAX日历控件,显示某些日期(CalendarExtender)
1. The HTML Markup <div> <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1&q ...
- mac安装office2011,提示无法打开文件Normal.dotm,因为内容有错误
最近使用mac上的office,发现一个问题,每次打开office11都会报错,提示“无法打开文件Normal.dotm,因为内容有错误”,于是就在网络上搜索了一下,找到如下一段话, I just f ...
- JDBC:Java连接数据库的桥梁
JDBC(Java DataBase Connection),java数据库连接,是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口组成 ...
- TC基础使用指南(基于xbeta的TC配置文件)
所有常用目录都可以通过ctrl+d加一个或几个字母的超快捷方式直接跳转到位. 按下BackSpace键,就可以进入到上一级目录 Ctrl+q 在右侧打开左侧选定文件,再按一次Ctrl+q退出 按 Ct ...
- Qt在windows 平台操作保存execel的表格(通过QAxObject来操作)
粗略操作 QT += core gui sql CONFIG += qaxcontainer greaterThan(QT_MAJOR_VERSION, 4): QT += widgets #incl ...
- perl学习(2) 基本数据类型等
1.1.数字 所有数字格式内部一致,全部是double 7.25e45 == 7.25 * 1045 5.25 6.00 5.1-2.4 #5.1-2.4,2.7 10/3 ...
- HDFS写入和读取流程
HDFS写入和读取流程 一.HDFS HDFS全称是Hadoop Distributed System.HDFS是为以流的方式存取大文件而设计的.适用于几百MB,GB以及TB,并写一次读多次的场合.而 ...
- Fedora 17 安装 完全 指南
一.了解Fedora 17先来了解一下Fedora吧.它是由Red Hat赞助的一个全球性开源项目,秉承“自由”.“友爱”.“杰出”.“前卫”宗旨. 1.Fedora 17的主要系统改进内核:采用3. ...