导航下拉菜单织梦(制作一个有下拉菜单的导航栏)
本文目录一览:
织梦怎么给导航加下拉菜单
{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编码技术
织梦导航栏怎么调用下拉菜单并调用出来
在模板(telepret文件夹)里有个head.htm,直接在导航调用后面添加论坛链接的吧,也可以在后台添加一个栏目,设置成一个链接形式的栏目也行。默认的有下拉菜单,不用修改,如果栏目不是后台有的,则需要在模板里手动添加了。
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="fe24-e6e1-b8bf-f8cb 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 进行修改即可。
织梦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="e6e1-b8bf-f8cb-adbe 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的越好看,这个下拉的二级菜单肯定就越漂亮。