介绍
这套资源把菜单搜索框、分类标签和食谱结果卡片整合到同一个首页，打开后就能看到可搜索、可筛选的真实菜单界面，适合美食站、商城导航页和内容站搜索入口改造。
技术栈
HTML5 + CSS3 + JavaScript
软件架构
- index.html：承载搜索框、分类标签和结果卡片结构。
- styles.css：负责菜单页排版、搜索框、标签态和菜谱卡片视觉。
- script.js：负责关键词搜索、分类筛选和结果数量更新。
安装教程
- 下载并解压压缩包。
- 确认 index.html、styles.css、script.js、preview.png、article.html、README.md、package-info.json 位于同一目录。
- 双击 index.html 或部署到任意静态空间即可直接使用。
使用说明
- 在 recipes 数据里替换菜名、摘要、标签和配色即可复用到别的站点。
- 搜索框支持输入关键字过滤，分类标签支持单击切换结果。
- 如需增加菜单导航层级，可在左侧文案区继续追加热门搜索或分区入口。
功能讲解
- 首页主体是真实的菜单搜索界面，不再是泛化导航壳。
- 搜索与筛选只围绕食谱菜单结果生效，结构简洁且便于二次替换。
- 卡片视觉使用纯 CSS 盘面元素，方便保持素材站常见的可替换封面结构。
