Rumah > Artikel > pembangunan bahagian belakang > php和jQuery如何实现三级导航栏下拉菜单显示效果的实例

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

黄舟asal: 2017-08-10 10:16:271561semak imbas

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

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

首先看看效果图：

1.数据配置文件 db.php

<?php
return 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文件

<?php
header(&#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" />
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script 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();
    });
  })
</script>
<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>

Atas ialah kandungan terperinci php和jQuery如何实现三级导航栏下拉菜单显示效果的实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：PHP下PDO操作MySQL方法指导Artikel seterusnya：关于php数组内存利用率低以及弱类型的实例讲解

Artikel berkaitan

Lihat lagi