├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Navigation Menu 7 | 8 | 9 | 10 |
11 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | background: #20c1c1; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | } 22 | 23 | nav { 24 | background: #fff; 25 | padding: 5px; 26 | box-shadow: 0 20px 10px -20px rgba(0, 0, 0, 0.4); 27 | border-radius: 100px; 28 | } 29 | 30 | nav ul li { 31 | position: relative; 32 | list-style: none; 33 | display: inline-block; 34 | padding: 8px 20px; 35 | margin: 10px; 36 | font-weight: 500; 37 | color: #777; 38 | cursor: pointer; 39 | z-index: 2; 40 | transition: color 0.5s; 41 | } 42 | 43 | nav ul li:hover { 44 | color: #fff; 45 | } 46 | 47 | nav ul li::after { 48 | content: ""; 49 | position: absolute; 50 | top: 100%; 51 | left: 50%; 52 | transform: translate(-50%, -50%); 53 | width: 100%; 54 | height: 100%; 55 | background: teal; 56 | border-radius: 30px; 57 | z-index: -1; 58 | opacity: 0; 59 | transition: top 0.5s, opacity 0.5s; 60 | } 61 | 62 | nav ul li:hover::after { 63 | top: 50%; 64 | opacity: 1; 65 | } 66 | --------------------------------------------------------------------------------