本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果。分享给大家供大家参考，具体如下：
首先看看效果图：
1.数据配置文件 db.php
<?phpreturn array( array( "one" => "关于我们", "two" => array( array( "three_tit" => "公司介绍", "three_cont" => array( "企业概况", "组织架构", "发展历程", "企业文化", "服务理念" ) ), array( "three_tit" => "企业荣誉", "three_cont" => array( "获奖证书", "行业贡献", "资质认证", "协会活动", "公司的成就") ), array( "three_tit" => "销售网络", "three_cont" => array( "东北", "华北", "中东", "华南", "西南", "西北" ) ) ) ), array( "one" => "产品展示", "two" => array( array( "three_tit" => "进出口贸易", "three_cont" => array( "数码产品", "最新能源", "新鲜水果", "肉类食品", "衣服", "金银首饰" ) ), array( "three_tit" => "商业服务", "three_cont" => array( "资格认证", "人才培养", "热门商品推荐", "最新科技前沿" ) ) ) ), array( "one" => "新闻中心", "two" => array( array( "three_tit" => "企业动态", "three_cont" => array( "公司新闻", "新品上市", "企业动态" ) ), array( "three_tit" => "行业动态", "three_cont" => array( "媒体聚焦", "业内关注", "国内行情", "国际行情" ) ) ) ), array( "one" => "联系我们", "two" => array( array( "three_tit" => "联系方式", "three_cont" => array( "在线客服", "通信地址", "电话传真", "在线留言" ) ), array( "three_tit" => "人才招聘", "three_cont" => array( "项目经理", "助理秘书", "渠道代理", "网站工程师" ) ) ) ));?>
2.index文件
<?phpheader("Content-type:text/html;charset=utf-8"); // 载入数据$data = include "./db.php"; // 载入html文件include "./nav.html";?>3.nav.html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script><script type="text/javascript"> $(function(){ //对元素进行隐藏 $(".menu>li").eq(4).find("s").hide(); $(".two li").last().css("border","none"); //鼠标移入和移出事件 $(".menu li").hover(function(){ $(this).find(".two").show(); //鼠标移入和移出事件 $(".two li").hover(function(){ $(this).find(".hide").show(); },function(){ $(this).find(".hide").hide(); }); },function(){ $(this).find(".two").hide(); }); })</script><title>无标题文档</title><style type="text/css">*{ padding: 0; margin: 0;}body{ font: 18px/50px "微软雅黑"; color: #FFF;}li{ list-style: none;}a{ text-decoration: none; color: #FFF;}#nav{ width: 610px; height: 50px; background: #01532B; margin: 30px auto; border-radius: 5px; box-shadow: 2px 3px 2px #479E33;}#nav ul.menu{ padding: 0 5px;}#nav ul.menu li{ width: 120px; height: 50px; line-height: 50px; text-align: center; float: left; position: relative;}#nav ul.menu li a{ display: block; text-shadow:0px 1px 1px #479E33;}#nav ul.menu li a:hover{ color: #FFF; background: #479E33;}#nav ul.menu li s{ width: 0px; height: 30px; border-left: 1px solid #479E33; display: block; position: absolute; right: 0; top: 10px;}#nav ul.menu li ul{ position: absolute; top: 50px; left: 0; background: #479E33; border-radius: 0 0 3px 3px; box-shadow: 2px 3px 2px #479E33;}#nav ul.menu li ul li{ border-bottom: 1px solid #479E33; width: 120px; position: relative;}#nav ul.menu li ul li a{ font-size: 16px;}#nav ul.menu li ul li .hide{ position: absolute; top: 0px; left: 120px;}#nav ul.menu li ul li .hide li{ border-left: 1px solid #479E33;}#nav ul.menu li ul li .hide li a{ font-size: 14px;}.two,.hide{ display: none;}</style></head><body> <div id="nav"> <ul class="menu"> <li><a href="">网站首页</a><s></s></li> <?php foreach($data as $v) { ?> <li> <a href=""><?php echo $v["one"] ?></a><s></s> <ul class="two"> <?php foreach ($v["two"] as $val) { ?> <li> <a href=""><?php echo $val["three_tit"] ?></a> <ul class="hide"> <?php foreach ($val["three_cont"] as $value) { ?> <li><a href=""><?php echo $value ?></a></li> <?php } ?> </ul> </li> <?php } ?> </ul> </li> <?php } ?> </ul> </div></body></html>更多关于PHP相关内容感兴趣的读者可查看本站专题：《php+mysql数据库操作入门教程》、《php+mysqli数据库程序设计技巧总结》、《php面向对象程序设计入门教程》、《PHP数组(Array)操作技巧大全》、《php字符串(string)用法总结》、《PHP网络编程技巧总结》及《php常见数据库操作技巧汇总》
希望本文所述对大家PHP程序设计有所帮助。
