{"id":13607999,"url":"https://github.com/faisalman/docklr-css","last_synced_at":"2025-04-11T07:13:25.137Z","repository":{"id":57214098,"uuid":"94452384","full_name":"faisalman/docklr-css","owner":"faisalman","description":"Give your site a macOS-like Dock menu \u0026 stacks using pure CSS3 (no JS needed!)","archived":false,"fork":false,"pushed_at":"2018-11-03T18:27:22.000Z","size":82,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T06:33:51.015Z","etag":null,"topics":["animations","css","dock","menu","navigation","stacks"],"latest_commit_sha":null,"homepage":"http://faisalman.github.io/docklr-css","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/faisalman.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}},"created_at":"2017-06-15T15:19:49.000Z","updated_at":"2023-05-14T22:38:40.000Z","dependencies_parsed_at":"2022-08-26T13:41:17.785Z","dependency_job_id":null,"html_url":"https://github.com/faisalman/docklr-css","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/faisalman%2Fdocklr-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faisalman%2Fdocklr-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faisalman%2Fdocklr-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faisalman%2Fdocklr-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/faisalman","download_url":"https://codeload.github.com/faisalman/docklr-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358603,"owners_count":21090405,"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":["animations","css","dock","menu","navigation","stacks"],"created_at":"2024-08-01T19:01:23.444Z","updated_at":"2025-04-11T07:13:25.118Z","avatar_url":"https://github.com/faisalman.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Docklr.css\n\nPure CSS3 OSX-like Dock Menu \u0026 Stacks\n\n![docklr-img](https://raw.githubusercontent.com/faisalman/docklr-css/master/Docklr.png)\n\n* Author    : Faisal Salman \u003c\u003cf@faisalman.com\u003e\u003e\n* Demo      : https://faisalman.github.io/docklr-css\n* Source    : https://github.com/faisalman/docklr-css\n* NPM       : https://www.npmjs.com/package/docklr-css\n\n## Usage\n\n```html\n\u003c!-- somewhere in head --\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"docklr-v1.0.css\" /\u003e\n\n\u003c!-- somewhere in body --\u003e\n\u003cul class=\"docklr\"\u003e\n    \u003cli\u003e\n        \u003ca href=\"index.html#mpc\" id=\"mpc\" title=\"Media Player\"\u003e\n            \u003cimg src=\"img/icon3-64.png\" alt=\"\" /\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"about.html#folder\" id=\"folder\" title=\"Explorer\"\u003e\n            \u003cimg src=\"img/icon1-64.png\" alt=\"\" /\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e    \n    \u003cli\u003e\n        \u003ca href=\"contact.html#games\" id=\"games\" title=\"Games\"\u003e\n            \u003cimg src=\"img/icon4-64.png\" alt=\"\" /\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"index.html#terminal\" id=\"terminal\" title=\"Terminal\"\u003e\n            \u003cimg src=\"img/icon5-64.png\" alt=\"\" /\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#stack\" id=\"stack\" title=\"Stacks\"\u003e\n            \u003cimg src=\"img/icon2-64.png\" alt=\"\" /\u003e\n        \u003c/a\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ca href=\"http://www.google.com\" title=\"My Bookmarks\"\u003e\n                    \u003cimg src=\"img/icon6-64.png\" alt=\"\" /\u003e\n                \u003c/a\u003e\n            \u003cli\u003e\n                \u003ca href=\"http://www.facebook.com\" title=\"My Musics\"\u003e\n                    \u003cimg src=\"img/icon7-64.png\" alt=\"\" /\u003e\n                \u003c/a\u003e\n            \u003cli\u003e\n                \u003ca href=\"http://www.twitter.com\" title=\"My Downloads\"\u003e\n                    \u003cimg src=\"img/icon8-64.png\" alt=\"\" /\u003e\n                \u003c/a\u003e\n            \u003cli\u003e\n                \u003ca href=\"http://www.yahoo.com\" title=\"My Videos\"\u003e\n                    \u003cimg src=\"img/icon9-64.png\" alt=\"\" /\u003e\n                \u003c/a\u003e\n            \u003cli\u003e\n                \u003ca href=\"http://www.apple.com\" title=\"My Mails\"\u003e\n                    \u003cimg src=\"img/icon10-64.png\" alt=\"\" /\u003e\n                \u003c/a\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nSee working example [here](https://faisalman.github.io/docklr-css). \n\n## Rules\n\n* General pattern: `ul \u003e li \u003e [a \u003e img ]+[ul \u003e li \u003e a \u003e img]`\n* The topmost `\u003cul\u003e` element must have `\"docklr\"` class\n* Tooltip will be pulled from `\u003ca\u003e`'s `title` attribute.\n* It is recommended that `\u003ca\u003e`'s id match with its hash (e.g `href=\"contact.html#terminal\"` with `id=\"terminal\"`) so the active sign (triangle below icon) can be shown.\n* `\u003ca\u003e`'s `href` attribute for stacks should begin with a hash (e.g `href=\"#stack\"`)\n* Image for icons must be a PNG/GIF/JPG with default size 64x64px (unless you want to modify the CSS).\n\n## Credits\n\n* Oxygen icon set\n\n## License\n\nDual licensed under GPLv2 \u0026 MIT\n\nCopyright © 2011 Faisal Salman \u003c\u003cf@faisalman.com\u003e\u003e\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of \nthis software and associated documentation files (the \"Software\"), to deal in \nthe Software without restriction, including without limitation the rights to use, \ncopy, modify, merge, publish, distribute, sublicense, and/or sell copies of the \nSoftware, and to permit persons to whom the Software is furnished to do so, \nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all \ncopies or substantial portions of the Software.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaisalman%2Fdocklr-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaisalman%2Fdocklr-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaisalman%2Fdocklr-css/lists"}