PHP は 3 レベルのナビゲーションバー効果を実装します-PHPチュートリアル-php.cn

PHP は 3 レベルのナビゲーションバー効果を実装します

WBOY

リリース： 2016-07-25 08:43:38

オリジナル

1465 人が閲覧しました

1. データ設定ファイル db.php

return array(
array(
'one' => 'About us',
'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 (
'オンラインカスタマーサービス',
'連絡先アドレス',
'電話とFAX',
'オンラインメッセージ'
)
),
array(
'three_tit' => '人材採用',
'three_cont' => array(
'プロジェクトマネージャー',
'秘書補佐',
'ウェブサイトエンジニア' )
)
)
)
);
コードをコピー
2.index file

header('Content-type:text/html;charset=utf-8');

// データをロード
$data = include './db.php ' ;

// HTML ファイルをロードします

include './nav.html' ?>

;
3.nav.html ファイル

< ;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();

})

})

無題のドキュメント >

*{

マージン: 0;

フォント: 18px/50px

}

リストスタイル: なし;

a{

テキスト装飾: なし;

カラー: #FFF;

#nav{

幅: 610px;

マージン: 30px 自動; 5px;

ボックスシャドウ: 2px 3px 2px #479e33;

#Nav Ul.Menu {

パディング: 0 5px;

width: 120px;

line-height ; : 50px;

フロート: 左;

#nav ul.menu li a{

text-shadow:0px 1px # 479E33; #nav ul.menu li a:hover{

color: #FFF;

背景: #479E33;

#nav ul.menu li s{

width: 0px;

border -left: 1px; #479E33;

位置: 絶対;

上: 10px;

上: 50px;背景: #479E33;

ボーダー半径: 0 0 3px 3px;

ボックスシャドウ: 2px 3px 2px

}

#nav ul.menu li ul li{

border-bottom: 1px ソリッド #479E33; : 120px;

位置: 相対;

#nav ul.menu li ul li a{

font-size: 16px;

}

位置: 絶対; 0px;

左: 120px; }

#nav ul.menu li ul li .hide li{

border-left: 1px ソリッド #479E33;

#nav ul.menu li ul li .hide li a{

フォント-サイズ: 14px;

.two,.hide{

表示: なし;

网站首页

复制代码

php

PHP は 3 レベルのナビゲーション バー効果を実装します

PHP は 3 レベルのナビゲーションバー効果を実装します