https://github.com/coowinit/slide-down-toggle-navigation-menu
一个基于 HTML、CSS 和 jQuery 的响应式下拉导航菜单组件，支持多级菜单、Mega Menu、主题皮肤和下拉动画效果。
https://github.com/coowinit/slide-down-toggle-navigation-menu
css dropdown-menu frontend html html-template javascript navigation navigation-menu responsive-design responsive-menu slide-toggle static-website web-navigation
Last synced: 23 days ago
JSON representation
一个基于 HTML、CSS 和 jQuery 的响应式下拉导航菜单组件，支持多级菜单、Mega Menu、主题皮肤和下拉动画效果。
- Host: GitHub
- URL: https://github.com/coowinit/slide-down-toggle-navigation-menu
- Owner: coowinit
- Created: 2026-04-24T09:34:37.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-24T09:41:57.000Z (2 months ago)
- Last Synced: 2026-04-24T11:35:36.690Z (2 months ago)
- Topics: css, dropdown-menu, frontend, html, html-template, javascript, navigation, navigation-menu, responsive-design, responsive-menu, slide-toggle, static-website, web-navigation
- Language: CSS
- Homepage: https://coowinit.github.io/slide-down-toggle-navigation-menu/
- Size: 309 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Slide Down Toggle JS 导航菜单
一个基于 **HTML + CSS + jQuery** 的响应式下拉导航菜单组件示例。项目内置桌面端多级下拉菜单、Mega Menu、半宽菜单、图片菜单、表单菜单、移动端折叠导航、主题配色切换和下拉动画效果，适合用于企业官网、产品展示站、营销落地页或静态 HTML 页面导航区域。
> 当前项目为静态前端导航菜单示例，不包含后台管理、构建工具、NPM 发布配置或服务端接口。
## 项目特点
- 响应式导航菜单，桌面端与移动端自动适配
- 支持普通下拉菜单、多级子菜单、Mega Menu、半宽 Mega Menu
- 支持图片内容、产品列表、文章摘要、网格布局、联系表单等菜单内容
- 移动端使用 `slideToggle` 实现菜单展开与收起
- 内置 16 套颜色皮肤：白色系与渐变色系
- 内置 6 套下拉动画：Fade Down、Fade Up、Fade Left、Fade Right、Rotate X、Rotate Y
- 基于 Bootstrap 栅格系统，可快速扩展复杂菜单内容
- 文件结构简单，可直接部署到 GitHub Pages、Netlify、Vercel 或普通静态服务器
## 技术栈与依赖
| 依赖 | 用途 | 项目内位置 |
| --- | --- | --- |
| HTML5 | 页面结构与菜单示例 | `index.html` |
| CSS3 | 菜单样式、响应式布局、动画效果 | `webslidemenu/` |
| jQuery 3.2.1 | 菜单折叠、移动端展开收起、演示切换 | `vendor/jquery/jquery-3.2.1.min.js` |
| Bootstrap | 栅格系统与基础样式 | `vendor/bootstrap/` |
| Font Awesome 5.7.2 | 菜单图标 | CDN 引入 |
## 目录结构
```text
Slide-Down-Toggle-JS/
├── index.html
├── images/
│ ├── logo.png
│ ├── menu-logo.png
│ ├── topbg.jpg
│ ├── headbg.png
│ └── image01.jpg ~ image06.jpg
├── vendor/
│ ├── bootstrap/
│ │ ├── bootstrap.min.css
│ │ └── bootstrap.min.js
│ └── jquery/
│ └── jquery-3.2.1.min.js
└── webslidemenu/
├── webslidemenu.css
├── webslidemenu.js
├── demo.css
├── color-skins/
│ ├── white-blue.css
│ ├── white-green.css
│ ├── white-gry.css
│ ├── white-orange.css
│ ├── white-pink.css
│ ├── white-purple.css
│ ├── white-red.css
│ ├── white-yellow.css
│ ├── grd-black.css
│ ├── grd-blue.css
│ ├── grd-green.css
│ ├── grd-gry.css
│ ├── grd-light-green.css
│ ├── grd-orange.css
│ ├── grd-pink.css
│ └── grd-red.css
└── dropdown-effects/
├── fade-down.css
├── fade-up.css
├── fade-left.css
├── fade-right.css
├── rotate-x.css
└── rotate-y.css
```
## 快速开始
### 1. 下载或克隆项目
```bash
git clone https://github.com/coowinit/slide-down-toggle-navigation-menu.git
cd slide-down-toggle-navigation-menu
```
### 2. 直接打开演示页面
双击打开：
```text
index.html
```
也可以使用本地静态服务器预览：
```bash
python -m http.server 8000
```
然后在浏览器访问：
```text
http://localhost:8000
```
## 页面说明
项目当前只有一个主演示页面：
| 文件 | 说明 |
| --- | --- |
| `index.html` | 导航菜单完整演示页面，包含普通下拉、多级菜单、Mega Menu、图片菜单、Typography、Grid System、联系表单、配色切换与动画切换 |
## 菜单功能说明
### 普通下拉菜单
使用 `.sub-menu` 定义下拉菜单，可继续嵌套子级菜单。
```html
Dropdown
```
### Mega Menu
使用 `.wsmegamenu` 创建宽屏 Mega Menu，可结合 Bootstrap 栅格系统排版。
```html
Mega menu
```
### 半宽菜单
使用 `.halfmenu` 或 `.halfdiv` 可以创建较窄的菜单区域，适合展示少量链接、表单或联系信息。
```html
```
### 移动端折叠菜单
`webslidemenu.js` 会自动为 `.wsmenu` 添加移动端开关按钮，并通过 jQuery `slideToggle()` 控制菜单展开和收起。项目默认在 **991px 以下** 切换为移动端菜单样式。
## 引入方式
在 HTML 页面中引入依赖和菜单资源：
```html
```
> 如果需要离线使用，请将 Font Awesome 资源下载到本地，并把 CDN 地址替换为本地路径。
## 更换颜色皮肤
项目内置两类颜色皮肤：
### 白色系皮肤
- `white-blue.css`
- `white-green.css`
- `white-gry.css`
- `white-orange.css`
- `white-pink.css`
- `white-purple.css`
- `white-red.css`
- `white-yellow.css`
### 渐变色皮肤
- `grd-black.css`
- `grd-blue.css`
- `grd-green.css`
- `grd-gry.css`
- `grd-light-green.css`
- `grd-orange.css`
- `grd-pink.css`
- `grd-red.css`
修改 `index.html` 中的主题 CSS 即可切换默认皮肤：
```html
```
例如改为蓝色主题：
```html
```
## 更换下拉动画
可在 `webslidemenu/dropdown-effects/` 中选择不同动画文件：
- `fade-down.css`
- `fade-up.css`
- `fade-left.css`
- `fade-right.css`
- `rotate-x.css`
- `rotate-y.css`
修改 `index.html` 中的动画 CSS：
```html
```
## 自定义菜单内容
### 修改 Logo
替换以下图片即可：
```text
images/logo.png
images/menu-logo.png
```
### 修改菜单文字和链接
在 `index.html` 中查找：
```html