# 导航页

**Repository Path**: cxwstar/navigation-page

## Basic Information

- **Project Name**: 导航页
- **Description**: 基于阿文菌分享的导航页web03增量修改
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2023-05-18
- **Last Updated**: 2025-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

***在【阿文菌导航页web03】的基础上增量修改,原生文件都保持不变***
### 文件结构
```
|-- assets //存储效果图目录,实际使用时可直接删除
|-- css //原生样式文件存储目录
|-- custom //自定义文件的存储目录
|   |-- img //自定义图标存储目录
|   |   |-- png //png图标存储目录
|   |   |-- svg //svg图标或图标组存储目录
|   |       |-- ico.svg //svg图标组
|   |-- style.css //自定义样式文件,一般不修改
|   |-- url-sample.json //要显示的自定义数据结构示例
|   |-- url.json //要显示的自定义数据,由[url-sample.json]复制并重命名而来,根据自己的实际情况编写
|   |-- user.js //自定义js文件,一般不修改
|-- img //原生图标存储目录
|-- js //原生js存储目录
|-- favicon.ico
|-- ico.html //svg图标预览页面
|-- index-原主页.html //原生主页
|-- index.html //自定义主页
```
### url-sample.json 结构说明
此文件为示例,使用前复制此文件并重命名为 url.json ,文件内容必须能转为 Json 的 Array 类型,否则无法使用,如果文件编写完成后,刷新页面没有菜单,请检查文件格式是否正确 ***Json 文件内不能有注释,不能有多余的','符号***
```
{
    "config": {
        "particlesJS": true //true:显示随机线条
    },
    "top": [ //左上角菜单项,仅内网状态时才显示[下称 Top菜单]
        {
            "text": "Top菜单1名称[菜单组格式]",
            "href": "svg文件路径#symbol的id",//svg图标,此属性优先
            "ico": "普通图片路径",//普通图片,未定义href此属性才会生效
            "child": [
                {
                    "url": "Top菜单1的子菜单1链接",
                    "text": "Top菜单1的子菜单1名称"
                },
                {
                    "url": "Top菜单1的子菜单2链接",
                    "text": "Top菜单1的子菜单2名称"
                }
            ]
        },
        {
            "url": "Top菜单2链接",
            "text": "Top菜单2名称"
        }
    ],
    "main": [ //主要区域菜单项[下称 Main菜单]
        {
            "url": "Main菜单1链接[始终显示]",
            "href": "svg文件路径#symbol的id",//svg图标,此属性优先[与 Top 菜单设置规则相同]
            "ico": "Main菜单1图标",
            "text": "Main菜单1名称"
        },
        {
            "url": {
                "local": "Main菜单2内网链接"
            },
            "ico": "Main菜单2图标",
            "text": "Main菜单2名称"
        },
        {
            "url": {
                "internal": "Main菜单3外网链接"
            },
            "ico": "Main菜单3图标",
            "text": "Main菜单3名称"
        },
        {
            "url": {
                "local": "Main菜单4内网链接",
                "internal": "Main菜单4外网链接"
            },
            "ico": "Main菜单4图标",
            "text": "Main菜单4名称"
        },
        {
            "ico": "Main菜单5图标",
            "text": "Main菜单5名称[菜单组]",
            "child": [
                {
                    "url": "Main菜单5的子菜单1链接[始终显示]",
                    "ico": "Main菜单5的子菜单1图标",
                    "text": "Main菜单5的子菜单1名称"
                },
                {
                    "url": {
                        "local": "Main菜单5的子菜单2内网链接"
                    },
                    "ico": "Main菜单5的子菜单2图标",
                    "text": "Main菜单5的子菜单2名称"
                },
                {
                    "url": {
                        "internal": "Main菜单5的子菜单3外网链接"
                    },
                    "ico": "Main菜单5的子菜单3图标",
                    "text": "Main菜单5的子菜单3名称"
                },
                {
                    "url": {
                        "local": "Main菜单5的子菜单4内网链接",
                        "internal": "Main菜单5的子菜单4外网链接"
                    },
                    "ico": "Main菜单5的子菜单4图标",
                    "text": "Main菜单5的子菜单4名称"
                }
            ]
        }
    ]
}
```
### 效果图
#### 顶部及主菜单展示
![顶部及主菜单展示](assets/01.顶部及主菜单展示.jpg)
#### 主菜单组展示
![主菜单组展示](assets/02.主菜单组展示.jpg)
#### 外网菜单展示
![外网菜单展示](assets/03.外网菜单展示.jpg)
![外网菜单组展示](assets/03.外网菜单组展示.jpg)
#### 原生样式
![原生样式](assets/04.原生样式.png)