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 相关文章推荐
ADODB类使用
Nov 25 PHP
附件名前加网站名
Mar 23 PHP
php下使用curl模拟用户登陆的代码
Sep 10 PHP
PHP缓存技术的使用说明
Aug 06 PHP
定义php常量的详解
Jun 09 PHP
php实现二进制和文本相互转换的方法
Apr 18 PHP
PHP中创建和验证哈希的简单方法实探
Jul 06 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
Mar 01 PHP
PHP结合Vue实现滚动底部加载效果
Dec 17 PHP
PHP实现的用户注册表单验证功能简单示例
Feb 25 PHP
PHP使用PDO操作sqlite数据库应用案例
Mar 07 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
Dec 03 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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
python3.6的venv模块使用详解
2018/08/01 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python flask框架实现重定向功能示例
2019/07/02 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
StringBuilder和String的区别
2015/05/18 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
建筑工地门卫岗位职责
2014/04/30 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
入党转正申请报告
2015/05/15 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
四年级作文之植物
2019/09/20 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
python代码实现备忘录案例讲解
2021/07/26 Python