zblog二级菜单代码 zblog源码

zblog php版怎么制作下拉菜单归档功能

纯css实现的，所以任性的不需要js部分了，但是要详细说明下，上面的html代码中的“{module:catalog}”调用出来的是网站分类，当某个分类下有子分类（二级分类）时自动出现下拉导航，很方便。

我们提供的服务有：网站制作、网站设计、微信公众号开发、网站优化、网站认证、罗源ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的罗源网站制作公司

可是这样做有个缺陷，就是网站的单页面如留言本、关于我们啊这些就不能出现在导航栏上面了，因为调用的是网站分类而不是导航栏，所以对这个有需求的同学可以把html代码部分改成这样：

如何制作纵向二级菜单

使用CSS两步实现横向或纵向二级菜单

首先我们写一个li格式的代码如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

title无标题页/title

/head

body

li1/li

li2/li

li3/li

li4/li

/ul

/body

/html

从上面的代码我们得到如下的效果:

清除它的默认样式即把ul的list-style:none，这样就显示如下(图二)：

增加二级子节点

a href ="#"1/a

lia href="#"11/a

/li

lia href="#"11/a

/li

/ul

/li

lia href ="#"2/a

lia href="#"22/a

/li

lia href=""22/a/li

/ul/li

lia href=""3/a

lia href=""33/a/li

/ul

/li

lia href=""4/a

lia href=""44/a/li

/ul

/li

/ul

得到如下效果:

我们可以看到二级菜单很正常的显示了，所以我们要使其不可见：设置子无序列表为不可见：ul li ul

{

display:none;

}

效果出来了，但是是图一的效果,不是我们需要的，在做如下设置:

ul li:hover ul

{

display:block;

}

上面的代码的意思是:当鼠标滑过一级菜单的li时，二级菜单ul显示为块级元素；可是运行程序发现当鼠标真的划过一级菜单时，二级菜单会把一级菜单给挤开了，这个时候我们应该想到一个属性position:absolute;就是说把二级菜单设置为绝对定位；这样二级菜单将脱离原来文档流，不再占据空间，因此也不会一级菜单内容挤开了，这样以来一个超级简陋的纵向二级菜单就算是完成了。

我们把全部的代码都显示出现:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

title/title

style

{

list-style:none;

}

ul li ul

{

display:none;

position:absolute;

}

ul li:hover ul

{

display:block;

}

/style

/head

body

div id="nav"

a href ="#"1/a

lia href="#"11/a

/li

lia href="#"11/a

/li

/ul

/li

lia href ="#"2/a

lia href="#"22/a

/li

lia href=""22/a/li

/ul/li

lia href=""3/a

lia href=""33/a/li

/ul

/li

lia href=""4/a

lia href=""44/a/li

/ul

/li

/ul

/div

/body

/html

大家可以运行看看，基本的效果实现的.但是不好看，感觉有点粗糙,下面对代码进行美化.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

title无标题页/title

style type ="text/css"

{

text-decoration:none;

}

#nav

{

width:100px;

border:1px solid #ccc;

border-bottom:none;

}

{

list-style:none;

margin:0;

padding:0;

}

ul li

{

background:silver;

padding:0 8px;

height:30px;

border-bottom:1px solid #ccc;

position:relative;

}

ul li ul

{

display:none;

position:absolute;

width:100px;

left:100px;

border-bottom:none;

}

ul li:hover ul

{

display:block;

}

/style

/head

body

div id="nav"

a href ="#"1/a

lia href="#"11/a

/li

lia href="#"11/a

/li

/ul

/li

lia href ="#"2/a

lia href="#"22/a

/li

lia href=""22/a/li

/ul/li

lia href=""3/a

lia href=""33/a/li

/ul

/li

lia href=""4/a

lia href=""44/a/li

/ul

/li

/ul

/div

/body

/html

所谓的美化,无非就是一个高度,背景颜色等进行设置.这样就得到了可以使用的菜单.

网站栏目怎么出现下拉菜单，就是鼠标放上去怎么显示二级栏目？

先在网站的head模板添加二级菜单的html代码，如下

添加之后前台就可以显示二级菜单，但会出现乱码，然后找到相应的css文件，在/*nav*/部分，加入以下代码，具体风格可以自己改，

.navulliul{position:absolute;display:none;}

.navulliulli{float:none;}

.navulliullia{border-right:none;border-top:0pxdottedccc;background:00000000;font-size:15px;color:fff;}

.navulliulli.nava{color:FFFFFF;display:inline-block;padding:012px;height:44px;line-height:40px;font-size:18px;color:fff;margin-left:5px;font-family:Arial,"宋体";}

.navulli:hoverul{display:block;}

如何用PHP做二级下拉菜单啊？

首先，这种效果是html的select标签实现的，其实php要做的就是将数据按照一定的格式组织好，然后按照一定的规则输出即可。

下面是大致的示例代码。

// 首先根据你现有的数据对其按照一定的格式组织

$brands = array(

'东风本田' = array('艾力绅','本田CR-V',...),

'广汽本田' = array(...),

...

);

// 输出HTML标签

echo 'select name="brands" size="1"';

echo 'option value=""请选择车系/option';

foreach ($brands as $brand = $items) {

echo 'optgroup label="',$brand,'"';

foreach ($items as $item) {

echo 'option value="',$item,'"',$item,'/option';

}

echo '/optgroup';

}

echo '/select';

分享文章：zblog二级菜单代码 zblog源码
本文URL：http://scyanting.com/article/ddeecsj.html

zblog二级菜单代码 zblog源码

zblog php版怎么制作下拉菜单归档功能

如何制作纵向二级菜单

网站栏目怎么出现下拉菜单，就是鼠标放上去怎么显示二级栏目？

如何用PHP做二级下拉菜单啊？

其他资讯