php+jQuery如何實(shí)現(xiàn)三級(jí)導(dǎo)航欄下拉菜單顯示效果-創(chuàng)新互聯(lián)

小編給大家分享一下php+jQuery如何實(shí)現(xiàn)三級(jí)導(dǎo)航欄下拉菜單顯示效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),西雙版納企業(yè)網(wǎng)站建設(shè),西雙版納品牌網(wǎng)站建設(shè),網(wǎng)站定制,西雙版納網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,西雙版納網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

首先看看效果圖：

1.數(shù)據(jù)配置文件 db.php

 '關(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' => '銷(xiāo)售網(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)品',
          '新能源',
          '新鮮水果',
          '肉類(lèi)食品',
          '衣服',
          '金銀首飾'
          )
      ),
      array(
        'three_tit' => '商業(yè)服務(wù)',
        'three_cont' => array(
          '資格認(rèn)證',
          '人才培養(yǎng)',
          '熱門(mén)商品推薦',
          '新科技前沿'
        )
      )
    )
  ),
  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文件

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



  
    
      
網(wǎng)站首頁(yè)