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


Posted in PHP onAugust 10, 2017

本文实例讲述了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 相关文章推荐
PHP开发大型项目的一点经验
Oct 09 PHP
实现php加速的eAccelerator dll支持文件打包下载
Sep 30 PHP
实用函数9
Nov 08 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
May 07 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
Sep 16 PHP
PHP删除数组中空值的方法介绍
Apr 14 PHP
PHP中使用TCPDF生成PDF文档实例
Jul 01 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
Dec 08 PHP
分享php邮件管理器源码
Jan 06 PHP
PHP未登录自动跳转到登录页面
Dec 21 PHP
PHP闭包定义与使用简单示例
Apr 13 PHP
PHP使用curl_multi实现并发请求的方法示例
Apr 29 PHP
PHP数组内存利用率低和弱类型详细解读
Aug 10 #PHP
Laravel实现定时任务的示例代码
Aug 10 #PHP
PHP编程实现计算抽奖概率算法完整实例
Aug 09 #PHP
PHP实现将标点符号正则替换为空格的方法
Aug 09 #PHP
php实现的redis缓存类定义与使用方法示例
Aug 09 #PHP
PHP编程实现脚本异步执行的方法
Aug 09 #PHP
PHP并发查询MySQL的实例代码
Aug 09 #PHP
You might like
UCenter Home二次开发指南
2009/05/28 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PDO::rollBack讲解
2019/01/29 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
js调用css属性写法
2013/09/21 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
物业管理个人自我评价
2013/11/08 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
写给老婆的保证书
2015/02/27 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server