php实现三级导航栏效果

首先看看效果图：

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实现三级导航栏效果相关推荐

Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
Android CoordinatorLayout 实现浮动导航栏效果、常规用法
CoordinatorLayout Android CoordinatorLayout+RecyclerView Demo Android CoordinatorLayout+AppBarLayout ...
Android个性导航栏效果
分享一个导航栏效果的demo 源码下载 github 动图太快了, 效果就是选中的tab永远都在中间的位置可以无限循环滚动切换源码下载 github
闪亮的玻璃图标悬浮导航栏效果
闪亮的玻璃图标悬浮导航栏效果 https://www.bilibili.com/video/BV1H44y157nr FROM :B站UP:艾恩小灰灰 <!DOCTYPE html> &l ...
Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
android沉浸式模式简书,Android 沉浸式模式与常见状态栏和导航栏效果
Android沉浸式模式官方称沉浸式状态栏为沉浸式模式. 什么是沉浸式? 沉浸式就是让人专注当前的(由设计者营造)情境下感到愉悦和满足,而忘记真实的情境. 什么是Android中的沉浸式? 当启用该 ...
css3制作炫酷导航栏效果转
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

php实现三级导航栏效果

php实现三级导航栏效果相关推荐

最新文章

热门文章