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脚本的10个技巧(6)
Oct 09 PHP
php 操作excel文件的方法小结
Dec 31 PHP
IP138 IP地址查询小偷实现代码
Feb 15 PHP
一步一步学习PHP(7) php 字符串相关应用
Mar 05 PHP
windows下开发并编译PHP扩展的方法
Mar 18 PHP
php下获取http状态的实现代码
May 09 PHP
php对包含html标签的字符串进行截取的函数分享
Jun 19 PHP
php实现简单的MVC框架实例
Sep 23 PHP
Laravel4中的Validator验证扩展用法详解
Jul 26 PHP
PHP类和对象相关系统函数与运算符小结
Sep 28 PHP
php使用环形链表解决约瑟夫问题完整示例
Aug 07 PHP
PHP中创建和编辑Excel表格的方法
Sep 13 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
JS常用函数使用指南
2014/11/23 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
js实现左右轮播图
2020/01/09 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python切换hosts文件代码示例
2013/12/31 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Windows下安装Scrapy
2018/10/17 Python
python对于requests的封装方法详解
2019/01/03 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
导致python中import错误的原因是什么
2020/07/01 Python
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis