How to implement left navigation menu in php

In website development, implementing a clickable left navigation menu is a very common requirement. Using PHP language to write this function is also an efficient and simple method.

1. Preparation

Before implementing the click navigation menu, we need to prepare some basic conditions. The necessary conditions are listed below:

1. PHP language code is required;
2. A database management system (such as MySQL) is required;
3. Knowledge of HTML, CSS and JavaScript is required.

After ensuring that the conditions are met, we can start the following steps.

2. Set up the database table

In order to correctly implement the function of clicking the navigation menu, we need to create a table in the database to store the menu. The following are the column requirements in the table:

1. Menu ID: the unique identifier of each menu item;
2. Menu title: the title of each menu;
3. Menu link: Link addresses pointing to other web pages;
4. Upper-level menu ID: which upper-level menu this menu item belongs to;
5. Menu icon: optional, used for aesthetics or interface function supplement.

After creating the form, we can call it in the PHP code to implement the function of clicking the navigation menu.

3. PHP implementation of navigation menu

After we have the design of the database table, we can use PHP code to create this navigation menu. Here we use the following command:

$parent_id = 0;
$menu_query = mysql_query("SELECT id, title, link FROM menu WHERE parent_id='".$ parent_id."'");
while($menu_row = mysql_fetch_array($menu_query)) {
echo '

';
}
?>

In the above code, we first define a variable $parent_id, whose value Is 0, the meaning of this variable refers to which "parent" menu to search for. We use the mysql_query() function to query the menu table in the database, and fetch the menu items through the mysql_fetch_array() function.

In PHP, it is very simple to convert these menu items into HTML code output. We can use the echo command to complete it. Finally, we can see a menu similar to this on the front-end interface:

• Home
• About Us
• Contact Us

There is also a very important function mysql_query() in the above code. We must ensure that the input value of this function is "safe". If the incoming parameters are not filtered, it may lead to SQL injection attacks and cause security issues. An easy way to avoid this problem is to use the addslashes() function.

4. Add JavaScript click event

We have implemented the PHP code to output the navigation menu, now we need to add a JavaScript click event to allow the user to click the menu item and enter its corresponding link address . The following is the logical structure of the code:

1. When the user clicks a menu item, the JavaScript function will trigger the event;
2. The function will use the XMLHttpRequest object to send a request to the server;
3. The server returns the corresponding page and renders it in the user's browser window.

Add JavaScript and XMLHttpRequest objects correspondingly in the code. The code is as follows:

<script><br/>function displayLink(link) {<br/>var xhttp;<br/>if ( link == "") {<br/>document.getElementById("links_container").innerHTML = "";<br/>return;<br/>}<br/>xhttp = new XMLHttpRequest();<br/>xhttp.onreadystatechange = function() {<br/>if (this.readyState == 4 && this.status == 200) {<br/>document.getElementById("links_container").innerHTML = this.responseText;<br/>}<br/>} ;<br/>xhttp.open("GET", link, true);<br/>xhttp.send();<br/>}<br/></script>

In the above code, we Created a displayLink() function that sends an XMLHttpRequest object when a menu item is clicked. When the status of the returned XMLHttpRequest object is 200 (that is, the data has been successfully obtained), we output it to the front-end page and present it in the user's browser window.

Finally, in HTML, use the onMouseDown event handler function and call the displayLink() function when the menu item is clicked.

5. Summary

Implementing a clickable left navigation menu is very necessary for website development. Using PHP can quickly and dynamically generate navigation menus while reducing the amount of code. JavaScript can allow users to quickly reach the target link address by clicking on the menu.

The above is the detailed content of How to implement left navigation menu in php. For more information, please follow other related articles on the PHP Chinese website!