具體如下：
首先看看：
1.資料設定檔 db.php
<?phpreturn 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檔案
<?phpheader('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> <p 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> </p></body></html>
PHP+JS三級菜單聯動菜單實現方法
PHP+JS三級菜單聯動菜單實現方法，_PHP教程
php 三級菜單資料的讀取
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
