検索
ホームページバックエンド開発PHPチュートリアルphp+jQueryで実装された3レベルのナビゲーションメニュー

この記事では主に、php+jQuery によって実装された 3 レベルのナビゲーション バー ドロップダウン メニューの表示効果を紹介します。これには、php 配列のトラバーサルと jQuery イベント応答操作のページ要素の変換およびその他の関連操作テクニックが含まれます。必要な友人は参照してください。

詳細は次のとおりです:

まずレンダリングを見てください:

1. データ構成ファイル db.php

<?php
return array(
  array(
    &#39;one&#39; => &#39;关于我们&#39;,
    &#39;two&#39; => array(
      array(
        &#39;three_tit&#39; => &#39;公司介绍&#39;,
        &#39;three_cont&#39; => array(
          &#39;企业概况&#39;,
          &#39;组织架构&#39;,
          &#39;发展历程&#39;,
          &#39;企业文化&#39;,
          &#39;服务理念&#39;
          )
      ),
      array(
        &#39;three_tit&#39; => &#39;企业荣誉&#39;,
        &#39;three_cont&#39; => array(
          &#39;获奖证书&#39;,
          &#39;行业贡献&#39;,
          &#39;资质认证&#39;,
          &#39;协会活动&#39;,
          &#39;公司的成就&#39;)
      ),
      array(
        &#39;three_tit&#39; => &#39;销售网络&#39;,
        &#39;three_cont&#39; => array(
          &#39;东北&#39;,
          &#39;华北&#39;,
          &#39;中东&#39;,
          &#39;华南&#39;,
          &#39;西南&#39;,
          &#39;西北&#39;
          )
      )
    )
  ),
  array(
    &#39;one&#39; => &#39;产品展示&#39;,
    &#39;two&#39; => array(
      array(
        &#39;three_tit&#39; => &#39;进出口贸易&#39;,
        &#39;three_cont&#39; => array(
          &#39;数码产品&#39;,
          &#39;最新能源&#39;,
          &#39;新鲜水果&#39;,
          &#39;肉类食品&#39;,
          &#39;衣服&#39;,
          &#39;金银首饰&#39;
          )
      ),
      array(
        &#39;three_tit&#39; => &#39;商业服务&#39;,
        &#39;three_cont&#39; => array(
          &#39;资格认证&#39;,
          &#39;人才培养&#39;,
          &#39;热门商品推荐&#39;,
          &#39;最新科技前沿&#39;
        )
      )
    )
  ),
  array(
    &#39;one&#39; => &#39;新闻中心&#39;,
    &#39;two&#39; => array(
      array(
        &#39;three_tit&#39; => &#39;企业动态&#39;,
        &#39;three_cont&#39; => array(
          &#39;公司新闻&#39;,
          &#39;新品上市&#39;,
          &#39;企业动态&#39;
          )
      ),
      array(
        &#39;three_tit&#39; => &#39;行业动态&#39;,
        &#39;three_cont&#39; => array(
          &#39;媒体聚焦&#39;,
          &#39;业内关注&#39;,
          &#39;国内行情&#39;,
          &#39;国际行情&#39;
          )
      )
    )
  ),
  array(
    &#39;one&#39; => &#39;联系我们&#39;,
    &#39;two&#39; => array(
      array(
        &#39;three_tit&#39; => &#39;联系方式&#39;,
        &#39;three_cont&#39; => array(
        &#39;在线客服&#39;,
        &#39;通信地址&#39;,
        &#39;电话传真&#39;,
        &#39;在线留言&#39;
        )
      ),
      array(
        &#39;three_tit&#39; => &#39;人才招聘&#39;,
        &#39;three_cont&#39; => array(
          &#39;项目经理&#39;,
          &#39;助理秘书&#39;,
          &#39;渠道代理&#39;,
          &#39;网站工程师&#39;
          )
      )
    )
  )
);
?>

2.index ファイル

<?php
header(&#39;Content-type:text/html;charset=utf-8&#39;);
 // 载入数据
$data = include &#39;./db.php&#39;;
  // 载入html文件
include &#39;./nav.html&#39;;
?>

3.ナビ.htmlfile

<!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(){
    //对元素进行隐藏
    $(&#39;.menu>li&#39;).eq(4).find(&#39;s&#39;).hide();
    $(&#39;.two li&#39;).last().css(&#39;border&#39;,&#39;none&#39;);
    //鼠标移入和移出事件
    $(&#39;.menu li&#39;).hover(function(){
      $(this).find(&#39;.two&#39;).show();
      //鼠标移入和移出事件
      $(&#39;.two li&#39;).hover(function(){
        $(this).find(&#39;.hide&#39;).show();
      },function(){
        $(this).find(&#39;.hide&#39;).hide();
      });
    },function(){
      $(this).find(&#39;.two&#39;).hide();
    });
  })
</script>
<title>无标题文档</title>
<style type="text/css">
*{
  padding: 0;
  margin: 0;
}
body{
  font: 18px/50px &#39;微软雅黑&#39;;
  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[&#39;one&#39;] ?></a><s></s>
        <ul class="two">
          <?php foreach ($v[&#39;two&#39;] as $val) { ?>
          <li>
            <a href=""><?php echo $val[&#39;three_tit&#39;] ?></a>
            <ul class="hide">
              <?php foreach ($val[&#39;three_cont&#39;] as $value) { ?>
              <li><a href=""><?php echo $value ?></a></li>
              <?php } ?>
            </ul>
          </li>
          <?php } ?>
        </ul>
      </li>
      <?php } ?>
    </ul>
  </p>
</body>
</html>

h関連の推奨事項:PPHP+JS

3メニュー

リンクメニュー実装方法PHP

第 3 レベルのレベル メニュー

データの読み取り


以上がphp+jQueryで実装された3レベルのナビゲーションメニューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
PHPセッションを失敗させる可能性のあるいくつかの一般的な問題は何ですか?PHPセッションを失敗させる可能性のあるいくつかの一般的な問題は何ですか?Apr 25, 2025 am 12:16 AM

PHPSESSIONの障害の理由には、構成エラー、Cookieの問題、セッションの有効期限が含まれます。 1。構成エラー:正しいセッションをチェックして設定します。save_path。 2.Cookieの問題:Cookieが正しく設定されていることを確認してください。 3.セッションの有効期限:セッションを調整してください。GC_MAXLIFETIME値はセッション時間を延長します。

PHPでセッション関連の問題をどのようにデバッグしますか?PHPでセッション関連の問題をどのようにデバッグしますか?Apr 25, 2025 am 12:12 AM

PHPでセッションの問題をデバッグする方法は次のとおりです。1。セッションが正しく開始されるかどうかを確認します。 2.セッションIDの配信を確認します。 3.セッションデータのストレージと読み取りを確認します。 4.サーバーの構成を確認します。セッションIDとデータを出力し、セッションファイルのコンテンツを表示するなど、セッション関連の問題を効果的に診断して解決できます。

session_start()が複数回呼び出されるとどうなりますか?session_start()が複数回呼び出されるとどうなりますか?Apr 25, 2025 am 12:06 AM

session_start()への複数の呼び出しにより、警告メッセージと可能なデータ上書きが行われます。 1)PHPは警告を発し、セッションが開始されたことを促します。 2)セッションデータの予期しない上書きを引き起こす可能性があります。 3)session_status()を使用してセッションステータスを確認して、繰り返しの呼び出しを避けます。

PHPでセッションのライフタイムをどのように構成しますか?PHPでセッションのライフタイムをどのように構成しますか?Apr 25, 2025 am 12:05 AM

PHPでのセッションライフサイクルの構成は、session.gc_maxlifetimeとsession.cookie_lifetimeを設定することで達成できます。 1)session.gc_maxlifetimeサーバー側のセッションデータのサバイバル時間を制御します。 0に設定すると、ブラウザが閉じているとCookieが期限切れになります。

セッションを保存するためにデータベースを使用することの利点は何ですか?セッションを保存するためにデータベースを使用することの利点は何ですか?Apr 24, 2025 am 12:16 AM

データベースストレージセッションを使用することの主な利点には、持続性、スケーラビリティ、セキュリティが含まれます。 1。永続性:サーバーが再起動しても、セッションデータは変更されないままになります。 2。スケーラビリティ:分散システムに適用され、セッションデータが複数のサーバー間で同期されるようにします。 3。セキュリティ:データベースは、機密情報を保護するための暗号化されたストレージを提供します。

PHPでカスタムセッション処理をどのように実装しますか?PHPでカスタムセッション処理をどのように実装しますか?Apr 24, 2025 am 12:16 AM

PHPでのカスタムセッション処理の実装は、SessionHandlerInterfaceインターフェイスを実装することで実行できます。具体的な手順には、次のものが含まれます。1)CussentsessionHandlerなどのSessionHandlerInterfaceを実装するクラスの作成。 2)セッションデータのライフサイクルとストレージ方法を定義するためのインターフェイス(オープン、クローズ、読み取り、書き込み、破壊、GCなど)の書き換え方法。 3)PHPスクリプトでカスタムセッションプロセッサを登録し、セッションを開始します。これにより、データをMySQLやRedisなどのメディアに保存して、パフォーマンス、セキュリティ、スケーラビリティを改善できます。

セッションIDとは何ですか?セッションIDとは何ですか?Apr 24, 2025 am 12:13 AM

SessionIDは、ユーザーセッションのステータスを追跡するためにWebアプリケーションで使用されるメカニズムです。 1.ユーザーとサーバー間の複数のインタラクション中にユーザーのID情報を維持するために使用されるランダムに生成された文字列です。 2。サーバーは、ユーザーの複数のリクエストでこれらの要求を識別および関連付けるのに役立つCookieまたはURLパラメーターを介してクライアントに生成および送信します。 3.生成は通常、ランダムアルゴリズムを使用して、一意性と予測不可能性を確保します。 4.実際の開発では、Redisなどのメモリ内データベースを使用してセッションデータを保存してパフォーマンスとセキュリティを改善できます。

ステートレス環境(APIなど)でセッションをどのように処理しますか?ステートレス環境(APIなど)でセッションをどのように処理しますか?Apr 24, 2025 am 12:12 AM

APIなどのステートレス環境でのセッションの管理は、JWTまたはCookieを使用して達成できます。 1。JWTは、無国籍とスケーラビリティに適していますが、ビッグデータに関してはサイズが大きいです。 2.cookiesはより伝統的で実装が簡単ですが、セキュリティを確保するために慎重に構成する必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター