php+jQuery实现的三级导航栏下拉菜单显示效果

转载  更新时间:2017年08月10日 09:43:32   作者:风火程序员   我要评论

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

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

首先看看效果图:

1.数据配置文件 db.php

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

<?php
header('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程序设计有所帮助。

相关文章

  • php猴子选大王问题解决方法

    php猴子选大王问题解决方法

    这篇文章主要介绍了php猴子选大王问题解决方法,其本质为约瑟夫环问题,这里提供了一种较为简单的解决方法,需要的朋友可以参考下
    2015-05-05
  • PHP 强制性文件下载功能的函数代码(任意文件格式)

    PHP 强制性文件下载功能的函数代码(任意文件格式)

    PHP强制性文件下载函数代码,使用此函数为用户提供强制性的文件下载功能。
    2010-05-05
  • mac 下安装php7全过程介绍

    mac 下安装php7全过程介绍

    下面小编就为大家介绍一下mac 下安装php7全过程。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 解析PHP自带的进位制之间的转换函数

    解析PHP自带的进位制之间的转换函数

    本篇文章是对PHP自带的进位制之间的转换函数进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • php中explode函数用法分析

    php中explode函数用法分析

    这篇文章主要介绍了php中explode函数用法,实例分析了explode函数分割字符串及获取文件后缀名等应用,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-11-11
  • php随机显示指定文件夹下图片的方法

    php随机显示指定文件夹下图片的方法

    这篇文章主要介绍了php随机显示指定文件夹下图片的方法,涉及array_rand随机数组操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • PHP字符串处理的10个简单方法

    PHP字符串处理的10个简单方法

    PHP处理字符串的能力非常强大,方法也是多种多样,但有的时候你需要选择一种最简单且理想的解决方法。文章列举了10个PHP中常见的字符串处理案例,并提供了相对应的最理想的处理方法。
    2010-06-06
  • php实现xml转换数组的方法示例

    php实现xml转换数组的方法示例

    这篇文章主要介绍了php实现xml转换数组的方法,结合具体实例形式分析了php操作xml格式文件实现转换数组的相关操作技巧,涉及xml格式数据的载入、遍历、转换等方法,需要的朋友可以参考下
    2017-02-02
  • php实现word转html的方法

    php实现word转html的方法

    这篇文章主要介绍了php实现word转html的方法,涉及PHP调用com组件操作word文档的相关技巧,需要的朋友可以参考下
    2016-01-01
  • PHP单元测试利器 PHPUNIT深入用法(二)

    PHP单元测试利器 PHPUNIT深入用法(二)

    在上一篇PHP单元测试利器:PHPUNIT初探文章中,我们对phpunit有了一个初步的认识,在本文中将继续深入讲解下phpunit中的一些用法。
    2011-03-03

最新评论