diff --git a/README.md b/README.md
index 3367650fc..025ba9763 100644
--- a/README.md
+++ b/README.md
@@ -97,6 +97,7 @@ See CONTRIBUTING.md for the snippet template.
* [`Gradient text`](#gradient-text)
* [`Hairline border`](#hairline-border)
* [`Mouse cursor gradient tracking`](#mouse-cursor-gradient-tracking)
+* [`Navigation list item hover and focus effect`](#navigation-list-item-hover-and-focus-effect)
* [`:not selector`](#not-selector)
* [`Overflow scroll gradient`](#overflow-scroll-gradient)
* [`Pretty text underline`](#pretty-text-underline)
@@ -1980,6 +1981,77 @@ btn.onmousemove = function(e) {
[⬆ Back to top](#contents)
+### Navigation list item hover and focus effect
+
+Fancy hover and focus effect at navigation items using transform CSS property.
+
+```html
+
+```
+
+```css
+nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+nav li {
+ float: left;
+}
+
+nav li a {
+ position: relative;
+ display: block;
+ color: #222;
+ text-align: center;
+ padding: 8px 12px;
+ text-decoration: none;
+}
+
+li a::before {
+ position: absolute;
+ content: "";
+ width: 100%;
+ height: 100%;
+ bottom: 0;
+ left: 0;
+ background-color: #f6c126;
+ z-index: -1;
+ transform: scale(0);
+ transition: transform 0.5s ease-in-out;
+}
+
+li a:hover::before, li a:focus::before {
+ transform: scale(1);
+}
+```
+
+
+#### Explanation
+
+
+- Use the `::before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.
+- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.
+- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.
+
+
+#### Browser support
+
+100.0%
+
+- https://caniuse.com/#feat=transforms2d
+- https://caniuse.com/#feat=css-transitions
+
+
[⬆ Back to top](#contents)
+
### :not selector
The `:not` pseudo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.
diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index 2b7221c6c..0a52b6954 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -468,6 +468,21 @@
"hash": "97fbac82b526cafe6e48233dda46d0bb87fde7a52027774048b90c9c14818395"
}
},
+ {
+ "id": "navigation-list-item-hover-and-focus-effect",
+ "type": "snippetListing",
+ "title": "Navigation list item hover and focus effect",
+ "attributes": {
+ "text": "Fancy hover and focus effect at navigation items using transform CSS property.\n\n",
+ "tags": [
+ "visual",
+ "beginner"
+ ]
+ },
+ "meta": {
+ "hash": "9e2cbf0541001ebaaa5584e8d4e7f68e5f436e79574ec9c62facd20962bfa87a"
+ }
+ },
{
"id": "not-selector",
"type": "snippetListing",
diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json
index 33e31b254..30a1c5339 100644
--- a/snippet_data/snippets.json
+++ b/snippet_data/snippets.json
@@ -864,6 +864,33 @@
"hash": "97fbac82b526cafe6e48233dda46d0bb87fde7a52027774048b90c9c14818395"
}
},
+ {
+ "id": "navigation-list-item-hover-and-focus-effect",
+ "title": "Navigation list item hover and focus effect",
+ "type": "snippet",
+ "attributes": {
+ "fileName": "navigation-list-item-hover-and-focus-effect.md",
+ "text": "Fancy hover and focus effect at navigation items using transform CSS property.\n\n",
+ "explanation": "\n\n- Use the `::before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.\n- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.\n- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.\n\n",
+ "browserSupport": {
+ "text": "\n\n- https://caniuse.com/#feat=transforms2d\n- https://caniuse.com/#feat=css-transitions\n",
+ "supportPercentage": 100
+ },
+ "codeBlocks": {
+ "html": "",
+ "css": "nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\nnav li {\n float: left;\n}\n\nnav li a {\n position: relative;\n display: block;\n color: #222;\n text-align: center;\n padding: 8px 12px;\n text-decoration: none;\n}\n\nli a::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n bottom: 0;\n left: 0;\n background-color: #f6c126;\n z-index: -1;\n transform: scale(0);\n transition: transform 0.5s ease-in-out;\n}\n\nli a:hover::before, li a:focus::before {\n transform: scale(1);\n}",
+ "js": "",
+ "scopedCss": "[data-scope=\"navigation-list-item-hover-and-focus-effect\"] nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] nav li {\n float: left; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] nav li a {\n position: relative;\n display: block;\n color: #222;\n text-align: center;\n padding: 8px 12px;\n text-decoration: none; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] li a::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n bottom: 0;\n left: 0;\n background-color: #f6c126;\n z-index: -1;\n transform: scale(0);\n transition: transform 0.5s ease-in-out; }\n\n[data-scope=\"navigation-list-item-hover-and-focus-effect\"] li a:hover::before, [data-scope=\"navigation-list-item-hover-and-focus-effect\"] li a:focus::before {\n transform: scale(1); }\n"
+ },
+ "tags": [
+ "visual",
+ "beginner"
+ ]
+ },
+ "meta": {
+ "hash": "9e2cbf0541001ebaaa5584e8d4e7f68e5f436e79574ec9c62facd20962bfa87a"
+ }
+ },
{
"id": "not-selector",
"title": ":not selector",