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

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

首先看看效果图：

1.数据配置文件 db.php

 '关于我们',
    '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文件

3.nav.html文件

*{
  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;
}



  
    

      
网站首页
      
      

 
 

   
   

     
     




     
   
   
 
      
      
    
  

更多关于PHP相关内容感兴趣的读者可查看本站专题：《php+mysql数据库操作入门教程》、《php+mysqli数据库程序设计技巧总结》、《php面向对象程序设计入门教程》、《PHP数组(Array)操作技巧大全》、《php字符串(string)用法总结》、《PHP网络编程技巧总结》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。