navigation list item hover and focus effect

snippets/navigation-list-item-hover-and-focus-effect.md

@@ -0,0 +1,76 @@
+---
+title: Navigation list item hover and focus effect
+tags: visual, beginner
+---
+
+Fancy hover and focus effect at navigation items using transform CSS property.
+
+```html
+<nav>
+    <ul>
+        <li>
+            <a href="#/">Home</a>
+        </li>
+        <li>
+            <a href="#/">About</a>
+        </li>
+        <li>
+            <a href="#/">Contact</a>
+        </li>
+    </ul>
+</nav>
+```
+
+```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 {
+    transform: scale(1);
+}
+
+li a:focus::before {
+    transform: scale(1);
+}
+```
+
+#### Explanation
+
+1. Using pseudo-element `::before` at the list item anchor element to make the hover effect, and make it hidden by `transform: scale(0)`
+2. Using pseudo-selector `:hover` , and `:focus` to make the transition effect from `transform: scale(0)` to `transform: scale(1)` to sgow the pseudo-element with its colored background.
+3. Preventing the pseudo-element from covering the anchor element by using `z-index: -1`
+
+#### Browser support
+
+- https://caniuse.com/#feat=transforms2d
+- https://caniuse.com/#feat=css-transitions