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中批量替换文件名的实现代码
Jul 20 PHP
解析htaccess伪静态的规则
Jun 18 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
Jun 21 PHP
php版小黄鸡simsimi聊天机器人接口分享
Jan 26 PHP
thinkphp数据查询和遍历数组实例
Nov 28 PHP
php+xml编程之xpath的应用实例
Jan 24 PHP
PHP利用APC模块实现大文件上传进度条的方法
Oct 29 PHP
PHP微信API接口类
Aug 22 PHP
php session的应用详细介绍
Mar 22 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
May 12 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
Oct 30 PHP
PHP 文件上传限制问题
Sep 01 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
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP 柱状图实现代码
2009/12/04 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
详解Python中的文件操作
2016/08/28 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python异常处理try except过程解析
2020/02/03 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
区域总监的岗位职责
2013/11/21 职场文书
学生生病请假条范文
2014/02/16 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
python中if和elif的区别介绍
2021/11/07 Python