溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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+jQuery如何實現三級導航欄下拉菜單顯示效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
