当前位置：Gxlcms > PHP教程 > php和jQuery如何实现三级导航栏下拉菜单显示效果的实例

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

时间：2021-07-01 10:21:17 帮助过：35人阅读

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

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

首先看看效果图：

1.数据配置文件 db.php


  1. <?php
  2. return array(
  3.   array(
  4.     'one' => '关于我们',
  5.     'two' => array(
  6.       array(
  7.         'three_tit' => '公司介绍',
  8.         'three_cont' => array(
  9.           '企业概况',
  10.           '组织架构',
  11.           '发展历程',
  12.           '企业文化',
  13.           '服务理念'
  14.           )
  15.       ),
  16.       array(
  17.         'three_tit' => '企业荣誉',
  18.         'three_cont' => array(
  19.           '获奖证书',
  20.           '行业贡献',
  21.           '资质认证',
  22.           '协会活动',
  23.           '公司的成就')
  24.       ),
  25.       array(
  26.         'three_tit' => '销售网络',
  27.         'three_cont' => array(
  28.           '东北',
  29.           '华北',
  30.           '中东',
  31.           '华南',
  32.           '西南',
  33.           '西北'
  34.           )
  35.       )
  36.     )
  37.   ),
  38.   array(
  39.     'one' => '产品展示',
  40.     'two' => array(
  41.       array(
  42.         'three_tit' => '进出口贸易',
  43.         'three_cont' => array(
  44.           '数码产品',
  45.           '最新能源',
  46.           '新鲜水果',
  47.           '肉类食品',
  48.           '衣服',
  49.           '金银首饰'
  50.           )
  51.       ),
  52.       array(
  53.         'three_tit' => '商业服务',
  54.         'three_cont' => array(
  55.           '资格认证',
  56.           '人才培养',
  57.           '热门商品推荐',
  58.           '最新科技前沿'
  59.         )
  60.       )
  61.     )
  62.   ),
  63.   array(
  64.     'one' => '新闻中心',
  65.     'two' => array(
  66.       array(
  67.         'three_tit' => '企业动态',
  68.         'three_cont' => array(
  69.           '公司新闻',
  70.           '新品上市',
  71.           '企业动态'
  72.           )
  73.       ),
  74.       array(
  75.         'three_tit' => '行业动态',
  76.         'three_cont' => array(
  77.           '媒体聚焦',
  78.           '业内关注',
  79.           '国内行情',
  80.           '国际行情'
  81.           )
  82.       )
  83.     )
  84.   ),
  85.   array(
  86.     'one' => '联系我们',
  87.     'two' => array(
  88.       array(
  89.         'three_tit' => '联系方式',
  90.         'three_cont' => array(
  91.         '在线客服',
  92.         '通信地址',
  93.         '电话传真',
  94.         '在线留言'
  95.         )
  96.       ),
  97.       array(
  98.         'three_tit' => '人才招聘',
  99.         'three_cont' => array(
  100.           '项目经理',
  101.           '助理秘书',
  102.           '渠道代理',
  103.           '网站工程师'
  104.           )
  105.       )
  106.     )
  107.   )
  108. );
  109. ?>

2.index文件


  1. <?php
  2. header('Content-type:text/html;charset=utf-8');
  3.  // 载入数据
  4. $data = include './db.php';
  5.   // 载入html文件
  6. include './nav.html';
  7. ?>

3.nav.html文件


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
  6. <script type="text/javascript">
  7.   $(function(){
  8.     //对元素进行隐藏
  9.     $('.menu>li').eq(4).find('s').hide();
  10.     $('.two li').last().css('border','none');
  11.     //鼠标移入和移出事件
  12.     $('.menu li').hover(function(){
  13.       $(this).find('.two').show();
  14.       //鼠标移入和移出事件
  15.       $('.two li').hover(function(){
  16.         $(this).find('.hide').show();
  17.       },function(){
  18.         $(this).find('.hide').hide();
  19.       });
  20.     },function(){
  21.       $(this).find('.two').hide();
  22.     });
  23.   })
  24. </script>
  25. <title>无标题文档</title>
  26. <style type="text/css">
  27. *{
  28.   padding: 0;
  29.   margin: 0;
  30. }
  31. body{
  32.   font: 18px/50px '微软雅黑';
  33.   color: #FFF;
  34. }
  35. li{
  36.   list-style: none;
  37. }
  38. a{
  39.   text-decoration: none;
  40.   color: #FFF;
  41. }
  42. #nav{
  43.   width: 610px;
  44.   height: 50px;
  45.   background: #01532B;
  46.   margin: 30px auto;
  47.   border-radius: 5px;
  48.   box-shadow: 2px 3px 2px #479E33;
  49. }
  50. #nav ul.menu{
  51.   padding: 0 5px;
  52. }
  53. #nav ul.menu li{
  54.   width: 120px;
  55.   height: 50px;
  56.   line-height: 50px;
  57.   text-align: center;
  58.   float: left;
  59.   position: relative;
  60. }
  61. #nav ul.menu li a{
  62.   display: block;
  63.   text-shadow:0px 1px 1px #479E33;
  64. }
  65. #nav ul.menu li a:hover{
  66.   color: #FFF;
  67.   background: #479E33;
  68. }
  69. #nav ul.menu li s{
  70.   width: 0px;
  71.   height: 30px;
  72.   border-left: 1px solid #479E33;
  73.   display: block;
  74.   position: absolute;
  75.   right: 0;
  76.   top: 10px;
  77. }
  78. #nav ul.menu li ul{
  79.   position: absolute;
  80.   top: 50px;
  81.   left: 0;
  82.   background: #479E33;
  83.   border-radius: 0 0 3px 3px;
  84.   box-shadow: 2px 3px 2px #479E33;
  85. }
  86. #nav ul.menu li ul li{
  87.   border-bottom: 1px solid #479E33;
  88.   width: 120px;
  89.   position: relative;
  90. }
  91. #nav ul.menu li ul li a{
  92.   font-size: 16px;
  93. }
  94. #nav ul.menu li ul li .hide{
  95.   position: absolute;
  96.   top: 0px;
  97.   left: 120px;
  98. }
  99. #nav ul.menu li ul li .hide li{
  100.   border-left: 1px solid #479E33;
  101. }
  102. #nav ul.menu li ul li .hide li a{
  103.   font-size: 14px;
  104. }
  105. .two,.hide{
  106.   display: none;
  107. }
  108. </style>
  109. </head>
  110. <body>
  111.   <p id="nav">
  112.     <ul class="menu">
  113.       <li><a href="">网站首页</a><s></s></li>
  114.       <?php foreach($data as $v) { ?>
  115.       <li>
  116.         <a href=""><?php echo $v['one'] ?></a><s></s>
  117.         <ul class="two">
  118.           <?php foreach ($v['two'] as $val) { ?>
  119.           <li>
  120.             <a href=""><?php echo $val['three_tit'] ?></a>
  121.             <ul class="hide">
  122.               <?php foreach ($val['three_cont'] as $value) { ?>
  123.               <li><a href=""><?php echo $value ?></a></li>
  124.               <?php } ?>
  125.             </ul>
  126.           </li>
  127.           <?php } ?>
  128.         </ul>
  129.       </li>
  130.       <?php } ?>
  131.     </ul>
  132.   </p>
  133. </body>
  134. </html>

以上就是php和jQuery如何实现三级导航栏下拉菜单显示效果的实例的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！