使用方法
1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。
2、引用JQuery框架。
3、修改NodeTree-JSON.js中的NodeT">
Home Web Front-end JS Tutorial JavaScript NodeTree navigation bar (menu item JSON type/self-made)_javascript skills

JavaScript NodeTree navigation bar (menu item JSON type/self-made)_javascript skills

May 16, 2016 pm 05:42 PM
Navigation Bar

I've been having some leisure time recently and made a JavaScript NodeTree myself. There are actually quite a few similar things on the Internet, and they have more functions than this one. I made this purely to practice my skills.

The icon can be customized (16X16), and the menu items are completely defined in JSON type for easy modification.
Interface:
JavaScript NodeTree navigation bar (menu item JSON type/self-made)_javascript skills
Usage :
1. Copy the NodeTree-JSON.js and CSS folders to the project and reference them .
2. Reference the JQuery framework.
3. Modify the NodeTreeMenu menu item in NodeTree-JSON.js. The following is a brief description.

Copy code The code is as follows:

var NodeTreeMenu = [
//id: node ID, pId: parent node ID, 0 if there is no parent node, name: display name, img: display icon, open: only the parent node has this attribute, whether the child node is expanded by default, file: only the child node has this attribute, click The page opened after
{ id: 1, pId: 0, name: "Parent Node One", img: "CSS/Images/001.png", open: true },
{ id: 101, pId : 1, name: "Subnode One", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//Note that the last line of data must not be added at the end comma! Otherwise, an error will be reported under IE!
]

4. Add the following code where you want to display the NodeTree:
Copy the code The code is as follows:




5. Add the following code to the page :
Copy code The code is as follows:

Or (choose one of the two):
< script type="text/javascript">
window.onload=function (){
NodeTree("mainFrame");
}



In NodeTree("mainFrame"), mainFrame is the name of the target frame. For example, the navigation bar is in the frame on the left, and the name of the frame displayed on the right is = "mainFrame".
If you really don’t understand, take a look at the code of demo.htm and you will understand.
The source code is attached, if you are interested, you can take a look~
http://dl.vmall.com/c0b7wda1ps
Please click and recommend if you like it, your support is my biggest motivation!
Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to adjust the navigation bar at the top of Douyin? Other navigation bar adjustment options How to adjust the navigation bar at the top of Douyin? Other navigation bar adjustment options Mar 07, 2024 pm 02:50 PM

The navigation bar of the Douyin interface is located at the top and is an important channel for users to quickly access different functions and content. As Douyin continues to update, users may want to be able to customize and adjust the navigation bar according to their personal preferences and needs. 1. How to adjust the navigation bar at the top of Douyin? Usually, the top navigation bar of Douyin displays some popular channels, allowing users to quickly browse and view content of interest. If you want to adjust the settings for your top channel, just follow these steps: Open the TikTok app and log into your account. Find the navigation bar above the main interface, usually in the middle or top of the screen. Click the "+" symbol or similar button above the navigation bar to enter the channel editing interface. In the channel editing interface, you can see the default list of popular channels. You can pass

Implementation steps of implementing menu navigation bar with shadow effect using pure CSS Implementation steps of implementing menu navigation bar with shadow effect using pure CSS Oct 16, 2023 am 08:27 AM

The steps to implement a menu navigation bar with shadow effect using pure CSS require specific code examples. In web design, the menu navigation bar is a very common element. By adding a shadow effect to the menu navigation bar, you can not only increase its aesthetics, but also improve the user experience. In this article, we will use pure CSS to implement a menu navigation bar with a shadow effect, and provide specific code examples for reference. The implementation steps are as follows: Create HTML structure First, we need to create a basic HTML structure to accommodate the menu navigation bar. by

Personalized Discuz navigation bar makes the forum more unique! Personalized Discuz navigation bar makes the forum more unique! Mar 11, 2024 pm 01:45 PM

In the Discuz forum, the navigation bar is one of the parts that users often come into contact with when visiting the website. Therefore, customizing the navigation bar can add a unique personalized style to the forum and improve the user experience. Next, we will introduce how to personalize the navigation bar in the Discuz forum and provide specific code examples. First, we need to log in to Discuz's backend management system and enter the "Interface" -> "Navigation Settings" page. On this page, we can perform various settings and customizations on the navigation bar. Here are some

How to use PHP to develop simple navigation bar and URL collection functions How to use PHP to develop simple navigation bar and URL collection functions Sep 20, 2023 pm 03:14 PM

How to use PHP to develop a simple navigation bar and website collection function. The navigation bar and website collection function are one of the common and practical functions in web development. This article will introduce how to use PHP language to develop a simple navigation bar and URL collection function, and provide specific code examples. Create a navigation bar interface First, we need to create a navigation bar interface. The navigation bar usually contains links for quick navigation to other pages. We can use HTML and CSS to design and arrange these links. The following is a simple navigation bar interface

Steps to implement the drop-down tab menu effect of a responsive navigation bar using pure CSS Steps to implement the drop-down tab menu effect of a responsive navigation bar using pure CSS Oct 28, 2023 am 09:58 AM

Steps to implement the drop-down tab menu effect of a responsive navigation bar using pure CSS. The navigation bar is one of the common elements in web pages, and the drop-down tab menu is an effect often used in the navigation bar, which can provide more navigation. options. This article will introduce how to use pure CSS to implement a responsive navigation bar drop-down tab menu effect. Step 1: Build a basic HTML structure. We first need to build a basic HTML structure for demonstration and add some styles to the navigation bar. Below is a simple HTML structure

Steps to implement the floating effect of the menu navigation bar using pure CSS Steps to implement the floating effect of the menu navigation bar using pure CSS Oct 19, 2023 am 10:13 AM

Steps to implement the floating effect of the menu navigation bar using pure CSS. With the continuous advancement of web design, users’ demands for websites are getting higher and higher. In order to provide a better user experience, the suspension effect has been widely used in website design. This article will introduce how to use pure CSS to achieve the floating effect of the menu navigation bar to improve the usability and aesthetics of the website. Create the basic menu structure First, we need to create the basic structure of the menu in the HTML document. Here's a simple example: &lt;navclass=&q

How to use JavaScript to achieve the background color gradient effect of the fixed navigation bar at the bottom of the web page? How to use JavaScript to achieve the background color gradient effect of the fixed navigation bar at the bottom of the web page? Oct 20, 2023 pm 07:36 PM

How to use JavaScript to achieve the background color gradient effect of the fixed navigation bar at the bottom of the web page? In modern web design, fixed navigation bars have become a common layout method. If you want to add a background color gradient effect to the fixed navigation bar at the bottom of the web page, JavaScript is a very suitable choice. This article will introduce you to how to use JavaScript to achieve this effect, and provide specific code examples. Step 1: HTML Structure First we need to create the HTML

How to use Vue to achieve dynamic effects of navigation bar? How to use Vue to achieve dynamic effects of navigation bar? Jun 25, 2023 pm 12:17 PM

Vue is a very popular JavaScript framework that can be used to build dynamic web applications. In Vue, you can easily realize the dynamic effect of the navigation bar and provide users with a better interface interaction experience. Here are some basic steps for implementing navigation bar dynamics using Vue. To create a Vue instance, first, you need to introduce the Vue library into HTML, and then create a Vue instance. You can use the following code to create a Vue instance: var

See all articles