php和jQuery如何实现三级导航栏下拉菜单显示效果的实例

来源：互联网 2024-10-08 05:43:43

这篇文章主要介绍了php+jquery实现的三级导航栏下拉菜单显示效果,涉及php数组遍历与jquery事件响应操作页面元素变换等相关操作技巧,需要的朋友可以参考下

本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果。分享给大家供大家参考，具体如下：

首先看看效果图：

1.数据配置文件 db.php

立即学习“PHP免费学习笔记（深入）”；

<?phpreturn array(  array(    &#39;one&#39; => &#39;关于我们&#39;,    &#39;two&#39; => array(      array(        &#39;three_tit&#39; => &#39;公司介绍&#39;,        &#39;three_cont&#39; => array(          &#39;企业概况&#39;,          &#39;组织架构&#39;,          &#39;发展历程&#39;,          &#39;企业文化&#39;,          &#39;服务理念&#39;          )      ),      array(        &#39;three_tit&#39; => &#39;企业荣誉&#39;,        &#39;three_cont&#39; => array(          &#39;获奖证书&#39;,          &#39;行业贡献&#39;,          &#39;资质认证&#39;,          &#39;协会活动&#39;,          &#39;公司的成就&#39;)      ),      array(        &#39;three_tit&#39; => &#39;销售网络&#39;,        &#39;three_cont&#39; => array(          &#39;东北&#39;,          &#39;华北&#39;,          &#39;中东&#39;,          &#39;华南&#39;,          &#39;西南&#39;,          &#39;西北&#39;          )      )    )  ),  array(    &#39;one&#39; => &#39;产品展示&#39;,    &#39;two&#39; => array(      array(        &#39;three_tit&#39; => &#39;进出口贸易&#39;,        &#39;three_cont&#39; => array(          &#39;数码产品&#39;,          &#39;最新能源&#39;,          &#39;新鲜水果&#39;,          &#39;肉类食品&#39;,          &#39;衣服&#39;,          &#39;金银首饰&#39;          )      ),      array(        &#39;three_tit&#39; => &#39;商业服务&#39;,        &#39;three_cont&#39; => array(          &#39;资格认证&#39;,          &#39;人才培养&#39;,          &#39;热门商品推荐&#39;,          &#39;最新科技前沿&#39;        )      )    )  ),  array(    &#39;one&#39; => &#39;新闻中心&#39;,    &#39;two&#39; => array(      array(        &#39;three_tit&#39; => &#39;企业动态&#39;,        &#39;three_cont&#39; => array(          &#39;公司新闻&#39;,          &#39;新品上市&#39;,          &#39;企业动态&#39;          )      ),      array(        &#39;three_tit&#39; => &#39;行业动态&#39;,        &#39;three_cont&#39; => array(          &#39;媒体聚焦&#39;,          &#39;业内关注&#39;,          &#39;国内行情&#39;,          &#39;国际行情&#39;          )      )    )  ),  array(    &#39;one&#39; => &#39;联系我们&#39;,    &#39;two&#39; => array(      array(        &#39;three_tit&#39; => &#39;联系方式&#39;,        &#39;three_cont&#39; => array(        &#39;在线客服&#39;,        &#39;通信地址&#39;,        &#39;电话传真&#39;,        &#39;在线留言&#39;        )      ),      array(        &#39;three_tit&#39; => &#39;人才招聘&#39;,        &#39;three_cont&#39; => array(          &#39;项目经理&#39;,          &#39;助理秘书&#39;,          &#39;渠道代理&#39;,          &#39;网站工程师&#39;          )      )    )  ));?>

2.index文件

<?phpheader(&#39;Content-type:text/html;charset=utf-8&#39;); // 载入数据$data = include &#39;./db.php&#39;;  // 载入html文件include &#39;./nav.html&#39;;?>

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" /><ｓｃｒｉｐｔ type="text/javascript" src="./js/jquery-1.7.2.min.js"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ type="text/javascript">  $(function(){    //对元素进行隐藏    $(&#39;.menu>li&#39;).eq(4).find(&#39;s&#39;).hide();    $(&#39;.two li&#39;).last().css(&#39;border&#39;,&#39;none&#39;);    //鼠标移入和移出事件    $(&#39;.menu li&#39;).hover(function(){      $(this).find(&#39;.two&#39;).show();      //鼠标移入和移出事件      $(&#39;.two li&#39;).hover(function(){        $(this).find(&#39;.hide&#39;).show();      },function(){        $(this).find(&#39;.hide&#39;).hide();      });    },function(){      $(this).find(&#39;.two&#39;).hide();    });  })</ｓｃｒｉｐｔ><title>无标题文档</title><style type="text/css">*{  padding: 0;  margin: 0;}body{  font: 18px/50px &#39;微软雅黑&#39;;  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>  <p id="nav">    <ul class="menu">      <li><a href="">网站首页</a><s></s></li>      <?php foreach($data as $v) { ?>      <li>        <a href=""><?php echo $v[&#39;one&#39;] ?></a><s></s>        <ul class="two">          <?php foreach ($v[&#39;two&#39;] as $val) { ?>          <li>            <a href=""><?php echo $val[&#39;three_tit&#39;] ?></a>            <ul class="hide">              <?php foreach ($val[&#39;three_cont&#39;] as $value) { ?>              <li><a href=""><?php echo $value ?></a></li>              <?php } ?>            </ul>          </li>          <?php } ?>        </ul>      </li>      <?php } ?>    </ul>  </p></body></html>

导航菜单

本文地址：http://www.wztg.net/wenda/66775.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）