{"id":50709235,"url":"https://github.com/coowinit/slide-down-toggle-navigation-menu","last_synced_at":"2026-06-09T14:01:50.576Z","repository":{"id":353539694,"uuid":"1219854661","full_name":"coowinit/slide-down-toggle-navigation-menu","owner":"coowinit","description":"一个基于 HTML、CSS 和 jQuery 的响应式下拉导航菜单组件，支持多级菜单、Mega Menu、主题皮肤和下拉动画效果。","archived":false,"fork":false,"pushed_at":"2026-04-24T09:41:57.000Z","size":316,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-24T11:35:36.690Z","etag":null,"topics":["css","dropdown-menu","frontend","html","html-template","javascript","navigation","navigation-menu","responsive-design","responsive-menu","slide-toggle","static-website","web-navigation"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/slide-down-toggle-navigation-menu/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-24T09:34:37.000Z","updated_at":"2026-04-24T09:42:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/slide-down-toggle-navigation-menu","commit_stats":null,"previous_names":["coowinit/slide-down-toggle-navigation-menu"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/slide-down-toggle-navigation-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fslide-down-toggle-navigation-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fslide-down-toggle-navigation-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fslide-down-toggle-navigation-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fslide-down-toggle-navigation-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/slide-down-toggle-navigation-menu/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fslide-down-toggle-navigation-menu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dropdown-menu","frontend","html","html-template","javascript","navigation","navigation-menu","responsive-design","responsive-menu","slide-toggle","static-website","web-navigation"],"created_at":"2026-06-09T14:01:45.801Z","updated_at":"2026-06-09T14:01:50.570Z","avatar_url":"https://github.com/coowinit.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Slide Down Toggle JS 导航菜单\n\n一个基于 **HTML + CSS + jQuery** 的响应式下拉导航菜单组件示例。项目内置桌面端多级下拉菜单、Mega Menu、半宽菜单、图片菜单、表单菜单、移动端折叠导航、主题配色切换和下拉动画效果，适合用于企业官网、产品展示站、营销落地页或静态 HTML 页面导航区域。\n\n\u003e 当前项目为静态前端导航菜单示例，不包含后台管理、构建工具、NPM 发布配置或服务端接口。\n\n## 项目特点\n\n- 响应式导航菜单，桌面端与移动端自动适配\n- 支持普通下拉菜单、多级子菜单、Mega Menu、半宽 Mega Menu\n- 支持图片内容、产品列表、文章摘要、网格布局、联系表单等菜单内容\n- 移动端使用 `slideToggle` 实现菜单展开与收起\n- 内置 16 套颜色皮肤：白色系与渐变色系\n- 内置 6 套下拉动画：Fade Down、Fade Up、Fade Left、Fade Right、Rotate X、Rotate Y\n- 基于 Bootstrap 栅格系统，可快速扩展复杂菜单内容\n- 文件结构简单，可直接部署到 GitHub Pages、Netlify、Vercel 或普通静态服务器\n\n## 技术栈与依赖\n\n| 依赖 | 用途 | 项目内位置 |\n| --- | --- | --- |\n| HTML5 | 页面结构与菜单示例 | `index.html` |\n| CSS3 | 菜单样式、响应式布局、动画效果 | `webslidemenu/` |\n| jQuery 3.2.1 | 菜单折叠、移动端展开收起、演示切换 | `vendor/jquery/jquery-3.2.1.min.js` |\n| Bootstrap | 栅格系统与基础样式 | `vendor/bootstrap/` |\n| Font Awesome 5.7.2 | 菜单图标 | CDN 引入 |\n\n## 目录结构\n\n```text\nSlide-Down-Toggle-JS/\n├── index.html\n├── images/\n│   ├── logo.png\n│   ├── menu-logo.png\n│   ├── topbg.jpg\n│   ├── headbg.png\n│   └── image01.jpg ~ image06.jpg\n├── vendor/\n│   ├── bootstrap/\n│   │   ├── bootstrap.min.css\n│   │   └── bootstrap.min.js\n│   └── jquery/\n│       └── jquery-3.2.1.min.js\n└── webslidemenu/\n    ├── webslidemenu.css\n    ├── webslidemenu.js\n    ├── demo.css\n    ├── color-skins/\n    │   ├── white-blue.css\n    │   ├── white-green.css\n    │   ├── white-gry.css\n    │   ├── white-orange.css\n    │   ├── white-pink.css\n    │   ├── white-purple.css\n    │   ├── white-red.css\n    │   ├── white-yellow.css\n    │   ├── grd-black.css\n    │   ├── grd-blue.css\n    │   ├── grd-green.css\n    │   ├── grd-gry.css\n    │   ├── grd-light-green.css\n    │   ├── grd-orange.css\n    │   ├── grd-pink.css\n    │   └── grd-red.css\n    └── dropdown-effects/\n        ├── fade-down.css\n        ├── fade-up.css\n        ├── fade-left.css\n        ├── fade-right.css\n        ├── rotate-x.css\n        └── rotate-y.css\n```\n\n## 快速开始\n\n### 1. 下载或克隆项目\n\n```bash\ngit clone https://github.com/coowinit/slide-down-toggle-navigation-menu.git\ncd slide-down-toggle-navigation-menu\n```\n\n### 2. 直接打开演示页面\n\n双击打开：\n\n```text\nindex.html\n```\n\n也可以使用本地静态服务器预览：\n\n```bash\npython -m http.server 8000\n```\n\n然后在浏览器访问：\n\n```text\nhttp://localhost:8000\n```\n\n## 页面说明\n\n项目当前只有一个主演示页面：\n\n| 文件 | 说明 |\n| --- | --- |\n| `index.html` | 导航菜单完整演示页面，包含普通下拉、多级菜单、Mega Menu、图片菜单、Typography、Grid System、联系表单、配色切换与动画切换 |\n\n## 菜单功能说明\n\n### 普通下拉菜单\n\n使用 `.sub-menu` 定义下拉菜单，可继续嵌套子级菜单。\n\n```html\n\u003cli aria-haspopup=\"true\"\u003e\n  \u003ca href=\"#\"\u003eDropdown \u003cspan class=\"wsarrow\"\u003e\u003c/span\u003e\u003c/a\u003e\n  \u003cul class=\"sub-menu\"\u003e\n    \u003cli\u003e\u003ca href=\"#\"\u003eSubmenu item\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#\"\u003eSubmenu item\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/li\u003e\n```\n\n### Mega Menu\n\n使用 `.wsmegamenu` 创建宽屏 Mega Menu，可结合 Bootstrap 栅格系统排版。\n\n```html\n\u003cli aria-haspopup=\"true\"\u003e\n  \u003ca href=\"#\"\u003eMega menu \u003cspan class=\"wsarrow\"\u003e\u003c/span\u003e\u003c/a\u003e\n  \u003cdiv class=\"wsmegamenu clearfix\"\u003e\n    \u003cdiv class=\"container-fluid\"\u003e\n      \u003cdiv class=\"row\"\u003e\n        \u003cul class=\"col-lg-3 col-md-12 link-list\"\u003e\n          \u003cli class=\"title\"\u003eProduct Header\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#\"\u003eSubmenu link style\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/li\u003e\n```\n\n### 半宽菜单\n\n使用 `.halfmenu` 或 `.halfdiv` 可以创建较窄的菜单区域，适合展示少量链接、表单或联系信息。\n\n```html\n\u003cdiv class=\"wsmegamenu clearfix halfmenu\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n### 移动端折叠菜单\n\n`webslidemenu.js` 会自动为 `.wsmenu` 添加移动端开关按钮，并通过 jQuery `slideToggle()` 控制菜单展开和收起。项目默认在 **991px 以下** 切换为移动端菜单样式。\n\n## 引入方式\n\n在 HTML 页面中引入依赖和菜单资源：\n\n```html\n\u003c!-- Vendor --\u003e\n\u003cscript src=\"vendor/jquery/jquery-3.2.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"vendor/bootstrap/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"vendor/bootstrap/bootstrap.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.7.2/css/all.css\"\u003e\n\n\u003c!-- WebSlide Menu --\u003e\n\u003clink id=\"effect\" rel=\"stylesheet\" href=\"webslidemenu/dropdown-effects/fade-down.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"webslidemenu/webslidemenu.css\"\u003e\n\u003clink id=\"theme\" rel=\"stylesheet\" href=\"webslidemenu/color-skins/white-gry.css\"\u003e\n\u003cscript src=\"webslidemenu/webslidemenu.js\"\u003e\u003c/script\u003e\n```\n\n\u003e 如果需要离线使用，请将 Font Awesome 资源下载到本地，并把 CDN 地址替换为本地路径。\n\n## 更换颜色皮肤\n\n项目内置两类颜色皮肤：\n\n### 白色系皮肤\n\n- `white-blue.css`\n- `white-green.css`\n- `white-gry.css`\n- `white-orange.css`\n- `white-pink.css`\n- `white-purple.css`\n- `white-red.css`\n- `white-yellow.css`\n\n### 渐变色皮肤\n\n- `grd-black.css`\n- `grd-blue.css`\n- `grd-green.css`\n- `grd-gry.css`\n- `grd-light-green.css`\n- `grd-orange.css`\n- `grd-pink.css`\n- `grd-red.css`\n\n修改 `index.html` 中的主题 CSS 即可切换默认皮肤：\n\n```html\n\u003clink id=\"theme\" rel=\"stylesheet\" href=\"webslidemenu/color-skins/white-gry.css\"\u003e\n```\n\n例如改为蓝色主题：\n\n```html\n\u003clink id=\"theme\" rel=\"stylesheet\" href=\"webslidemenu/color-skins/white-blue.css\"\u003e\n```\n\n## 更换下拉动画\n\n可在 `webslidemenu/dropdown-effects/` 中选择不同动画文件：\n\n- `fade-down.css`\n- `fade-up.css`\n- `fade-left.css`\n- `fade-right.css`\n- `rotate-x.css`\n- `rotate-y.css`\n\n修改 `index.html` 中的动画 CSS：\n\n```html\n\u003clink id=\"effect\" rel=\"stylesheet\" href=\"webslidemenu/dropdown-effects/fade-down.css\"\u003e\n```\n\n## 自定义菜单内容\n\n### 修改 Logo\n\n替换以下图片即可：\n\n```text\nimages/logo.png\nimages/menu-logo.png\n```\n\n### 修改菜单文字和链接\n\n在 `index.html` 中查找：\n\n```html\n\u003cul class=\"wsmenu-list\"\u003e\n```\n\n然后根据需要修改 `\u003cli\u003e`、`\u003ca\u003e`、`.sub-menu`、`.wsmegamenu` 等结构。\n\n### 删除演示切换面板\n\n`index.html` 中包含主题色和动画切换演示代码。如果正式项目不需要，可以删除以下部分：\n\n```html\n\u003clink rel=\"stylesheet\" href=\"webslidemenu/demo.css\"\u003e\n```\n\n以及对应的演示切换 HTML 和 JavaScript。\n\n### 修改移动端断点\n\n默认移动端断点在 `webslidemenu/webslidemenu.css` 中：\n\n```css\n@media only screen and (max-width: 991px) {\n  ...\n}\n```\n\n如需适配其他断点，可根据项目布局调整该数值。\n\n## 部署到 GitHub Pages\n\n1. 新建 GitHub 仓库\n2. 上传本项目所有文件\n3. 进入仓库 `Settings` → `Pages`\n4. Source 选择 `Deploy from a branch`\n5. Branch 选择 `main`，目录选择 `/root`\n6. 保存后等待 GitHub Pages 生成访问地址\n\n确保 `index.html` 位于仓库根目录，这样 GitHub Pages 可以直接作为首页加载。\n\n## 使用建议\n\n- 正式上线前建议删除演示切换面板，只保留实际项目需要的主题和动画文件\n- 如果项目不依赖 Bootstrap，可根据实际情况移除未使用的 Bootstrap 样式，但 Mega Menu 的栅格布局需要同步调整\n- 如果需要更现代的兼容性，可将 jQuery 和 Bootstrap 升级到新版本，并重新测试菜单交互\n- 建议将外部 CDN 资源本地化，以保证国内访问速度和离线部署稳定性\n- 联系表单只是前端示例，不包含真实提交逻辑，正式使用时需要对接后端接口\n\n## 注意事项\n\n- 本项目为静态 HTML/CSS/JS 示例，不包含打包、编译或自动化构建流程\n- 原始样式文件注释中包含第三方授权信息，公开上传到 GitHub 前请确认你拥有合法使用、分发或展示该模板的权利\n- 如果作为公开仓库发布，建议移除无授权图片素材，或替换为自有素材 / 开源素材\n\n## License\n\n请根据你实际拥有的模板授权方式补充许可证说明。若该项目来自商业模板或第三方组件包，请遵循原作者授权协议。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fslide-down-toggle-navigation-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fslide-down-toggle-navigation-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fslide-down-toggle-navigation-menu/lists"}