您好,登錄后才能下訂單哦!
小編給大家分享一下php+jQuery如何實(shí)現(xiàn)三級(jí)導(dǎo)航欄下拉菜單顯示效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
首先看看效果圖:
1.數(shù)據(jù)配置文件 db.php
<?php return array( array( 'one' => '關(guān)于我們', 'two' => array( array( 'three_tit' => '公司介紹', 'three_cont' => array( '企業(yè)概況', '組織架構(gòu)', '發(fā)展歷程', '企業(yè)文化', '服務(wù)理念' ) ), array( 'three_tit' => '企業(yè)榮譽(yù)', 'three_cont' => array( '獲獎(jiǎng)證書(shū)', '行業(yè)貢獻(xiàn)', '資質(zhì)認(rèn)證', '協(xié)會(huì)活動(dòng)', '公司的成就') ), array( 'three_tit' => '銷售網(wǎng)絡(luò)', 'three_cont' => array( '東北', '華北', '中東', '華南', '西南', '西北' ) ) ) ), array( 'one' => '產(chǎn)品展示', 'two' => array( array( 'three_tit' => '進(jìn)出口貿(mào)易', 'three_cont' => array( '數(shù)碼產(chǎn)品', '最新能源', '新鮮水果', '肉類食品', '衣服', '金銀首飾' ) ), array( 'three_tit' => '商業(yè)服務(wù)', 'three_cont' => array( '資格認(rèn)證', '人才培養(yǎng)', '熱門商品推薦', '最新科技前沿' ) ) ) ), array( 'one' => '新聞中心', 'two' => array( array( 'three_tit' => '企業(yè)動(dòng)態(tài)', 'three_cont' => array( '公司新聞', '新品上市', '企業(yè)動(dòng)態(tài)' ) ), array( 'three_tit' => '行業(yè)動(dòng)態(tài)', 'three_cont' => array( '媒體聚焦', '業(yè)內(nèi)關(guān)注', '國(guó)內(nèi)行情', '國(guó)際行情' ) ) ) ), array( 'one' => '聯(lián)系我們', 'two' => array( array( 'three_tit' => '聯(lián)系方式', 'three_cont' => array( '在線客服', '通信地址', '電話傳真', '在線留言' ) ), array( 'three_tit' => '人才招聘', 'three_cont' => array( '項(xiàng)目經(jīng)理', '助理秘書(shū)', '渠道代理', '網(wǎng)站工程師' ) ) ) ) ); ?>
2.index文件
<?php header('Content-type:text/html;charset=utf-8'); // 載入數(shù)據(jù) $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(){ //對(duì)元素進(jìn)行隱藏 $('.menu>li').eq(4).find('s').hide(); $('.two li').last().css('border','none'); //鼠標(biāo)移入和移出事件 $('.menu li').hover(function(){ $(this).find('.two').show(); //鼠標(biāo)移入和移出事件 $('.two li').hover(function(){ $(this).find('.hide').show(); },function(){ $(this).find('.hide').hide(); }); },function(){ $(this).find('.two').hide(); }); }) </script> <title>無(wú)標(biāo)題文檔</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="">網(wǎng)站首頁(yè)</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>
看完了這篇文章,相信你對(duì)“php+jQuery如何實(shí)現(xiàn)三級(jí)導(dǎo)航欄下拉菜單顯示效果”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。