{"id":21525295,"url":"https://github.com/superraytin/pure-css-multi-level-menu","last_synced_at":"2025-04-09T23:21:58.450Z","repository":{"id":10750260,"uuid":"13009837","full_name":"superRaytin/pure-css-multi-level-menu","owner":"superRaytin","description":"纯 CSS 实现的无限制级联菜单","archived":false,"fork":false,"pushed_at":"2013-10-09T09:36:12.000Z","size":212,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T01:11:52.004Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/superRaytin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-22T07:51:42.000Z","updated_at":"2024-05-06T15:44:14.000Z","dependencies_parsed_at":"2022-09-02T14:43:58.284Z","dependency_job_id":null,"html_url":"https://github.com/superRaytin/pure-css-multi-level-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superRaytin%2Fpure-css-multi-level-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superRaytin%2Fpure-css-multi-level-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superRaytin%2Fpure-css-multi-level-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superRaytin%2Fpure-css-multi-level-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/superRaytin","download_url":"https://codeload.github.com/superRaytin/pure-css-multi-level-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248126439,"owners_count":21051923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-24T01:34:21.494Z","updated_at":"2025-04-09T23:21:58.419Z","avatar_url":"https://github.com/superRaytin.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 代码也疯狂，一段代码，一段人生。\n\n# Navigation\n* [css-multi-level-menu \u0026 纯CSS无限制级联菜单](#css-multi-level-menu)\n* [QQMail-style-tips-floating-layer \u0026 QQ邮箱风格的浮层提示](#qqmail-style-tips-floating-layer)\n\n# css-multi-level-menu\n纯CSS无限制级联菜单，特点是代码量小 —— CSS不足100行，扩展性强。\n\n引入css文件\n```html\n\u003clink href=\"../../libs/css-multi-level-menu/multi-menu.css\" rel=\"stylesheet\"\u003e\n```\n\nHTML部分\n```html\n\u003cdiv class=\"multi-menu\"\u003e\n    \u003cul\u003e\n        \u003cli class=\"multi-menu-parent\"\u003e\n            \u003cspan class=\"name\"\u003ePut the mouse above me\u003c/span\u003e\n            \u003cul\u003e\n                \u003cli\u003e\n                    \u003cspan class=\"name\"\u003eI'm a normal item\u003c/span\u003e\n                \u003c/li\u003e\n                ...\n            \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003cspan class=\"name\"\u003eI'm a normal item3\u003c/span\u003e\n        \u003c/li\u003e\n        ...\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n上面的例子展示了一个简单的二级菜单，更多级按照同样的格式增加即可\n\n通过给 `li` 增加class来增强功能：\n\n* `multi-menu-parent` 表示该菜单项下面有子级菜单\n* `disabled` 表示该菜单项为不可点击状态\n* `separate` 表示分隔线\n\n给 `ul` 增加class `check-list` 模仿复选框的效果，同时给子级菜单项增加class `checked` 可以选中该项，选中的项前面会有一个 `√` 标识\n\n下面是一个结构更复杂功能更多的示例：\n```html\n\u003cdiv class=\"multi-menu\"\u003e\n    \u003cul\u003e\n        \u003cli class=\"multi-menu-parent\"\u003e\n            \u003cspan class=\"name\"\u003ePut the mouse above me\u003c/span\u003e\n            \u003cul\u003e\n                \u003cli\u003e\n                    \u003cspan class=\"name\"\u003eI'm a normal item\u003c/span\u003e\n                \u003c/li\u003e\n                \u003cli class=\"separate\"\u003e\u003c/li\u003e\n                \u003cli\u003e\n                    \u003cspan class=\"name\"\u003eI'm a normal item2\u003c/span\u003e\n                \u003c/li\u003e\n                ...\n            \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli class=\"disabled\"\u003e\n            \u003cspan class=\"name\"\u003eI'm a disabled item\u003c/span\u003e\n        \u003c/li\u003e\n        \u003cli class=\"multi-menu-parent\"\u003e\n            \u003cspan class=\"name\"\u003eI'm a normal item4\u003c/span\u003e\n            \u003cul class=\"check-list\"\u003e\n                \u003cli\u003e\n                    \u003cspan class=\"name\"\u003eI'm a normal item\u003c/span\u003e\n                \u003c/li\u003e\n                \u003cli class=\"checked\"\u003e\n                    \u003cspan class=\"name\"\u003eI'm checked!\u003c/span\u003e\n                \u003c/li\u003e\n                ...\n            \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli class=\"separate\"\u003e\u003c/li\u003e\n        \u003cli\u003e\n            \u003cspan class=\"name\"\u003eI'm a normal item5\u003c/span\u003e\n        \u003c/li\u003e\n        ...\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n另外，如果你更喜欢less的方式，同样也提供了 [less文件](/libs/css-multi-level-menu/multi-menu.less)\n\n以上示例只需要 `CSS` 和 `HTML`，没有脚本，也没有图片引用，低碳环保\n\n运行效果如下图：\n\n![css-multi-level-menu](examples/src/images/css-multi-level-menu.png)\n\n[猛击我查看Demo](http://codepen.io/superRaytin/details/xjtgD)\n\n### 扩展\n\n如果想要类似操作系统，前面带有图标的菜单，那么，HTML结构只需要稍微的改一改：\n\n```html\n\u003cli\u003e\n    \u003cspan class=\"glyphicon glyphicon-heart\"\u003e\u003c/span\u003e\n    \u003cspan class=\"name\"\u003eI'm a normal item3\u003c/span\u003e\n\u003c/li\u003e\n```\n\n图标库推荐采用 `bootstrap3` 提供的字体图形库 `Glyphicons`\n\n如果想要 `悬停` 的效果，那必须要借助JS来实现，比如用jQuery库可以这么写\n\n```javascript\n$('.multi-menu li').on('mouseover', function(){\n    var that = $(this);\n    if(that.hasClass('disabled')) return;\n    if(that.hasClass('multi-menu-parent')){\n        that.find('\u003e ul').show();\n    }\n    that.siblings('li').find('ul').hide();\n});\n// 点击空白处隐藏\n$('html').on('click', function(){\n    var menu = $('.multi-menu');\n    if(menu.length){\n        menu.find('li.multi-menu-parent \u003e ul').hide();\n    }\n});\n```\n\n同时还需要对 `multi-menu.css` 作一个小小的改动，去掉下面这一句\n\n```css\n.multi-menu ul li.multi-menu-parent:not(.disabled):hover \u003e ul {\n  display: block;\n}\n```\n\n或者直接使用改好的 [multi-menu-with-js.css](/libs/css-multi-level-menu/multi-menu-with-js.css)\n\n[猛击我查看Demo（扩展）](http://codepen.io/superRaytin/pen/GIxyt)\n\n----\n# QQMail-style-tips-floating-layer\nQQ邮箱风格的浮层提示，觉得很是美观，遂提取出来，仅供学习参考，设计版权归QQ邮箱所有。\n\n引入css文件\n```html\n\u003clink href=\"../../libs/QQMail-style-tips-floating-layer/floating-tips.css\" rel=\"stylesheet\"\u003e\n```\n\n推荐使用 [less文件](/libs/QQMail-style-tips-floating-layer/floating-tips.less)\n\nHTML部分\n```html\n\u003cdiv class=\"qtips_wrap\"\u003e\n\t\u003cdiv class=\"qtips\"\u003e\n\t\t\u003cdiv class=\"tipcontainer\"\u003e\n\t\t\t\u003cspan class=\"arrowup\"\u003e\u003c/span\u003e\n            \u003cdiv class=\"container\"\u003e\n                \u003cdiv class=\"contentcontainer\"\u003e\n                    \u003cdiv class=\"content\"\u003e\n                        \u003cdiv class=\"tipsicon\"\u003e\n                            \u003cspan class=\"tipsico tipsico_normal\"\u003e\u003c/span\u003e\n                        \u003c/div\u003e\n                        \u003ca class=\"btnClose\" href=\"javascript:;\"\u003e\u003c/a\u003e\n                        \u003cdiv class=\"tipstxt\"\u003e\n                            \u003cdiv class=\"desc\"\u003e生活不是眼前的苟且，\u003cbr\u003e生活有诗和远方。\u003c/div\u003e\n                        \u003c/div\u003e\n                        \u003cdiv class=\"tipsrightpanel\"\u003e\n                            \u003cdiv class=\"opertbar\"\u003e\n                                \u003ca href=\"#\" target=\"_blank\"\u003e了解更多\u003c/a\u003e\n                                \u0026nbsp;\u0026nbsp;\u003ca class=\"\" title=\"\" href=\"javascript:;\"\u003e我知道了\u003c/a\u003e\n                            \u003c/div\u003e\n                        \u003c/div\u003e\n                        \u003cdiv class=\"clr\"\u003e\u003c/div\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\t\t\t\u003cspan class=\"arrowdown hide\"\u003e\u003c/span\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"tipbackground\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n运行效果如下图：\n\n![css-multi-level-menu](examples/src/images/QQMail-style-tips-floating-layer.png)\n\n[猛击我查看Demo](http://codepen.io/superRaytin/pen/vwmEt)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperraytin%2Fpure-css-multi-level-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperraytin%2Fpure-css-multi-level-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperraytin%2Fpure-css-multi-level-menu/lists"}