b2c信息网

您现在的位置是:首页 > 最新时事 > 正文

最新时事

导航下拉菜单织梦(制作一个有下拉菜单的导航栏)

hacker2022-06-27 19:38:19最新时事88
本文目录一览:1、织梦怎么给导航加下拉菜单2、织梦导航栏怎么调用下拉菜单并调用出来

本文目录一览:

织梦怎么给导航加下拉菜单

{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="9c32-d251-c0b3-5e88 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="d251-c0b3-5e88-93d6 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的越好看,这个下拉的二级菜单肯定就越漂亮。

发表评论

评论列表

  • 酒奴蒗幽(2022-06-27 22:42:48)回复取消回复

    solid #666666; float:left; height:14px; line-height:14px; margin-left

  • 绿邪惑心(2022-06-27 23:28:15)回复取消回复

    e("navMenu")/script接着我们重新生成网站首页,再打开首页刷新一下就会发现你的网站导航栏已经出现下拉菜单了,只是背景还是透明的,原因是没有背景图片。这时候我们只需要再加一张我们喜欢的背景图片就好看多了。可是头疼的是,这个下拉菜单是透明的!咋么办??加背景图片的办法我们把