PHP and jQuery realize the display effect of the three-level navigation bar drop-down menu-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

PHP and jQuery realize the display effect of the three-level navigation bar drop-down menu

小云云

Jan 30, 2018 am 10:09 AM

jqueryphpDrop-down menu

This article mainly introduces the display effect of the three-level navigation bar drop-down menu implemented by php+jQuery, involving php array traversal and jQuery event response operation page element transformation and other related operation skills. Friends in need can refer to it. I hope it can help everyone.

First look at the renderings:

1. Data configuration file 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 file

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

3.nav.html file

<!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>

Related recommendations:

php realizes the three-level navigation bar function

The above is the detailed content of PHP and jQuery realize the display effect of the three-level navigation bar drop-down menu. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Explain the concept of a PHP session in simple terms.Apr 26, 2025 am 12:09 AM

PHPsessionstrackuserdataacrossmultiplepagerequestsusingauniqueIDstoredinacookie.Here'showtomanagethemeffectively:1)Startasessionwithsession_start()andstoredatain$_SESSION.2)RegeneratethesessionIDafterloginwithsession_regenerate_id(true)topreventsessi

How do you loop through all the values stored in a PHP session?Apr 26, 2025 am 12:06 AM

In PHP, iterating through session data can be achieved through the following steps: 1. Start the session using session_start(). 2. Iterate through foreach loop through all key-value pairs in the $_SESSION array. 3. When processing complex data structures, use is_array() or is_object() functions and use print_r() to output detailed information. 4. When optimizing traversal, paging can be used to avoid processing large amounts of data at one time. This will help you manage and use PHP session data more efficiently in your actual project.

Explain how to use sessions for user authentication.Apr 26, 2025 am 12:04 AM

The session realizes user authentication through the server-side state management mechanism. 1) Session creation and generation of unique IDs, 2) IDs are passed through cookies, 3) Server stores and accesses session data through IDs, 4) User authentication and status management are realized, improving application security and user experience.

Give an example of how to store a user's name in a PHP session.Apr 26, 2025 am 12:03 AM

Tostoreauser'snameinaPHPsession,startthesessionwithsession_start(),thenassignthenameto$_SESSION['username'].1)Usesession_start()toinitializethesession.2)Assigntheuser'snameto$_SESSION['username'].Thisallowsyoutoaccessthenameacrossmultiplepages,enhanc

What are some common problems that can cause PHP sessions to fail?Apr 25, 2025 am 12:16 AM

Reasons for PHPSession failure include configuration errors, cookie issues, and session expiration. 1. Configuration error: Check and set the correct session.save_path. 2.Cookie problem: Make sure the cookie is set correctly. 3.Session expires: Adjust session.gc_maxlifetime value to extend session time.

How do you debug session-related issues in PHP?Apr 25, 2025 am 12:12 AM

Methods to debug session problems in PHP include: 1. Check whether the session is started correctly; 2. Verify the delivery of the session ID; 3. Check the storage and reading of session data; 4. Check the server configuration. By outputting session ID and data, viewing session file content, etc., you can effectively diagnose and solve session-related problems.

What happens if session_start() is called multiple times?Apr 25, 2025 am 12:06 AM

Multiple calls to session_start() will result in warning messages and possible data overwrites. 1) PHP will issue a warning, prompting that the session has been started. 2) It may cause unexpected overwriting of session data. 3) Use session_status() to check the session status to avoid repeated calls.

How do you configure the session lifetime in PHP?Apr 25, 2025 am 12:05 AM

Configuring the session lifecycle in PHP can be achieved by setting session.gc_maxlifetime and session.cookie_lifetime. 1) session.gc_maxlifetime controls the survival time of server-side session data, 2) session.cookie_lifetime controls the life cycle of client cookies. When set to 0, the cookie expires when the browser is closed.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

4 weeks agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months agoByDDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks agoByDDD

Hot Tools

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.