织梦导航栏下拉菜单(导航栏的下拉列表咋做)
本文目录一览:
- 1、织梦网站标题那里怎么设置下拉菜单,是需要加代码吗?有谁解答一下,多谢了。
- 2、织梦5.7如何创建下拉菜单
- 3、织梦导航栏怎么调用下拉菜单并调用出来
- 4、dede织梦导航怎么添加下拉菜单,我的导航是用顶级栏目添加的!
- 5、dedecms 网站怎么调用导航栏目和下拉菜单
- 6、织梦怎么给导航加下拉菜单
织梦网站标题那里怎么设置下拉菜单,是需要加代码吗?有谁解答一下,多谢了。
首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓)
!-- //二级子类下拉菜单 ,考虑SEO原因放置于底部
--
script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'/script
{dede:channelartlist typeid='top' cacheid='channelsonlist'}ul id="dropmenu{dede:field.typeid/}" class="7e7b-beb0-9f13-842e dropMenu"
{dede:channel type='son' noself='yes'} lia href="[field:typelink/]"[field:typename/]/a/li
{/dede:channel}
/ul
{/dede:channelartlist}
script type="text/javascript"cssdropdown.startchrome("navMenu")/script
刷新网页发现已经神奇地出现了下拉菜单,但此时是透明的,因为缺少一个下拉菜单图片。,原因是没有背景图片。
接下来你需要把DedeCMS5.6程序文件夹\dede\img里的mmenubg.gif(绿色背景图片,适用于绿色主题模板)或者DedeCMS5.5程 序文件夹\templets\images里的mmenubg.gif(蓝色背景图片,适用于蓝色主题模板)复制到DedeCMS5.7程序文件夹 /templets/default/images下面,现在你再看一下效果,呵呵,导航栏是不是已经出现熟悉的下拉菜单了
此时,你想要的效果基本上已经完成了,如果你还想做其他的设置,比如调整位置,只需要找到/templets/default/style/dedecms.css文件,ctrl+f 寻找.dropMenu
如果只是调整宽度,只用修改 :
width: 100px;/*------ //原来参数是120-,如果二级标题字数少,还可以把参数调整到80,乃至是60--------*/padding left 改变后可以使其居中,也可以改变字体的颜色。
织梦5.7如何创建下拉菜单
这个织梦自带下拉的,只是没启用!
第一步添加js代码,同那些网上搜的文章一样
首先在\templets\default\footer.html文件中的头部加上这段代码
script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'/script
{dede:channelartlist typeid='top' cacheid='channelsonlist'}ul id="dropmenu{dede:field.typeid/}" class="beb0-9f13-842e-2c39 dropMenu"
{dede:channel type='son' noself='yes'} lia href="[field:typelink/]"[field:typename/]/a/li
{/dede:channel}
/ul
{/dede:channelartlist}
script type="text/javascript"cssdropdown.startchrome("navMenu")/script
这段代码就是导航下拉菜单的js代码,在dede的程序文件里默认的有这个js文件。
添加上这段代码就已经出现下拉菜单了,只是我们看到的是透明的而且是竖排的效果,透明的原因是没有图片的效果
我们到到\dede\img里找mmenubg.gif然后复制到/templets/default/images下面,刷新再看一下效果,呵呵,导航栏是不是已经出现熟悉的下拉菜单了。
第二步,修改dedecms.css
我们看到的是竖排的,下面我们就把改为横排的。
首先找到\templets\default\style\dedecms.css文件
找到
.dropMenu a {
width: auto;
display: block;
color: black;
padding: 2px 0 2px 1.2em;
将里面的里面的display: block;去掉,然后找到
.dropMenu {
position:absolute;
top: 0;
z-index:100;
width: 120px;
visibility: hidden;
将 width: 120;改成width: auto;就好了。
找到以下代码
margin-top: -1px;
border: 1px solid #93E1EB;
border-top: 0px solid #3CA2DC;
background-color: #FFF;
background:url(../images/mmenubg.gif);
padding-top:6px;
padding-bottom:6px;
}
.dropMenu li {
margin-top:2px;
margin-bottom:4px;
padding-left:6px;
然后修改为如下代码:
margin-top: -1px;
border: 1px solid #93E1EB;
border-top: 0px solid #3CA2DC;
background-color: #FBFFFD; (这里的颜色根据你图片的颜色来调整)
background:url(../images/mmenubg.gif); (这个背景图片你可以自己制作)
padding-top:6px;
padding-bottom:6px;
}
.dropMenu li {
border-left:1px solid #666666;
float:left;
height:14px;
line-height:14px;
margin-left:-2px;
padding-left:-10px;
padding-right:6px;
修改后效果
这样最终的效果就如文字开始时的那样了,当然/images/mmenubg.gif是需要你自己去ps的,你ps的越好看,这个下拉的二级菜单肯定就越漂亮。
织梦导航栏怎么调用下拉菜单并调用出来
在模板(telepret文件夹)里有个head.htm,直接在导航调用后面添加论坛链接的吧,也可以在后台添加一个栏目,设置成一个链接形式的栏目也行。默认的有下拉菜单,不用修改,如果栏目不是后台有的,则需要在模板里手动添加了。
dede织梦导航怎么添加下拉菜单,我的导航是用顶级栏目添加的!
[html] view plaincopy
!DOCTYPE html
html
head
script type="text/javascript" src="
/jquery/1.7.2/jquery.min.js"/script
titleside menu/title
/head
body
div id="menu"
div class="9f13-842e-2c39-dc4c m-one"
span class="842e-2c39-dc4c-b1a2 m-tit"主菜单01/span
ul class="2c39-dc4c-b1a2-e464 m-ul"
li class="dc4c-b1a2-e464-bcbd m-li"子菜单11/li
li class="b1a2-e464-bcbd-dda0 m-li"子菜单12/li
li class="e464-bcbd-dda0-6a05 m-li"子菜单13/li
/ul
/div
div class="bcbd-dda0-6a05-0111 m-one"
span class="dda0-6a05-0111-654d m-tit"主菜单02/span
ul class="6a05-0111-654d-1011 m-ul"
li class="7a6e-e9a4-0e9b-626c m-li"子菜单21/li
li class="e9a4-0e9b-626c-7e7b m-li"子菜单22/li
li class="0e9b-626c-7e7b-beb0 m-li"子菜单23/li
/ul
/div
div class="626c-7e7b-beb0-9f13 m-one"
span class="7e7b-beb0-9f13-842e m-tit"主菜单03/span
ul class="beb0-9f13-842e-2c39 m-ul"
li class="9f13-842e-2c39-dc4c m-li"子菜单31/li
li class="842e-2c39-dc4c-b1a2 m-li"子菜单32/li
li class="2c39-dc4c-b1a2-e464 m-li"子菜单33/li
/ul
/div
div class="dc4c-b1a2-e464-bcbd m-one"
span class="b1a2-e464-bcbd-dda0 m-tit"主菜单04/span
ul class="e464-bcbd-dda0-6a05 m-ul"
li class="bcbd-dda0-6a05-0111 m-li"子菜单41/li
li class="dda0-6a05-0111-654d m-li"子菜单42/li
li class="6a05-0111-654d-1011 m-li"子菜单43/li
/ul
/div
div class="7a6e-e9a4-0e9b-626c m-one"
span class="e9a4-0e9b-626c-7e7b m-tit"主菜单05/span
ul class="0e9b-626c-7e7b-beb0 m-ul"
li class="626c-7e7b-beb0-9f13 m-li"子菜单51/li
li class="7e7b-beb0-9f13-842e m-li"子菜单52/li
li class="beb0-9f13-842e-2c39 m-li"子菜单53/li
/ul
/div
/div
/body
/html
dedecms 网站怎么调用导航栏目和下拉菜单
dedecms 网站调用导航栏目和下拉菜单的方法如下:
织梦开源程序(dedecms)是一个很不错的开源程序,功能十分的强大,只是默认的模板就有很不错的用户体验效果。而还有很多的不完美的地方,就需要我们自己去做一下修改,譬如默认导航条上面没有下拉列表的功能,今天我就来帮助大家解决一下怎样制作织梦导航下拉列表。
其实这个导航条上面显示下拉列表还是蛮简单的,即使你不懂代码知识也是可以操作的,下面跟着步骤走,就能很轻松的实现啦。
首先我们将将下面这段红色的代码贴到"网站根目录\templets\default\"的"footer.htm"文件里里面,一般来说把这段代码放在最下面就行了。
!-- //放于底部即可--
script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'/script
{dede:channelartlist typeid='top' cacheid='channelsonlist'}ul id="dropmenu{dede:field.typeid/}" class="9f13-842e-2c39-dc4c dropMenu"
{dede:channel type='son' noself='yes'} lia href="[field:typelink/]"[field:typename/]/a/li
{/dede:channel}
/ul
{/dede:channelartlist}
script type="text/javascript"cssdropdown.startchrome("navMenu")/script
接着我们重新生成网站首页,再打开首页刷新一下就会发现你的网站导航栏已经出现下拉菜单了,只是背景还是透明的,原因是没有背景图片。这时候我们只需要再加一张我们喜欢的背景图片就好看多了。
可是头疼的是,这个下拉菜单是透明的!咋么办??
加背景图片的办法
我们把织梦DedeCMS程序文件夹\dede\img里的mmenubg.gif(绿色背景图片,适用于绿色主题模板)或者DedeCMS程 序文件夹\templets\images里的mmenubg.gif(蓝色背景图片,适用于蓝色主题模板)复制到DedeCMS程序文件夹 /templets/default/images下面,现在你再看一下效果,导航栏是不是已经出现熟悉的下拉菜单了。
如果还想有更好的效果展示的话,我们就需要去手工修改/templets/default/style/dedecms.css里面的文件了,不过这得需要一点css知识哦~
修改css的话,我们可以在里面使用"ctrl+f"寻找 .dropMenu 进行修改即可。
织梦怎么给导航加下拉菜单
{dede:channelartlist typeid='顶级栏目ID' row=条数}
lia href="{dede:field name='typeurl'/}"{dede:field name='typename'/}/a/li
ul
{dede:channel type='son' }
lia href='[field:typelink/]'[field:typename/]/a /li
{/dede:channel}
/ul
{/dede:channelartlist}
推荐你还是好好看看织梦后台调用,那是在写好的下拉菜单程序里面进行的修改,你得会CSS和一些简单的JS编码技术