├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Magic-Navigation-Menu-Indicator-using-Html-CSS-Javascript-Curve-Outside-Effects 2 | Hi guys, I'm here to bring you a new tutorial, but this time I will show you how to make a Magic Navigation Menu Indicator, I made the tutorial from the Online Tutorials channel. 3 | 4 | ![index html](https://user-images.githubusercontent.com/78237060/151607299-8f81634b-3ea0-4e90-aead-3a35fee9bae3.png) 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Magic Menu Indicator 5 | 6 | 7 | 8 |
9 | 42 |
43 | 44 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | :root { 11 | --clr: #222327; 12 | } 13 | 14 | body{ 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | min-height: 100vh; 19 | background: var(--clr); 20 | } 21 | 22 | .navigation { 23 | width: 400px; 24 | height: 70px; 25 | background: #fff; 26 | position: relative; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | border-radius: 10px; 31 | } 32 | 33 | .navigation ul { 34 | display: flex; 35 | width: 350px; 36 | } 37 | 38 | .navigation ul li { 39 | position: relative; 40 | list-style: none; 41 | width: 70px; 42 | height: 70px; 43 | z-index: 1; 44 | } 45 | 46 | .navigation ul li a { 47 | position: relative; 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | flex-direction: column; 52 | width: 100%; 53 | text-align: center; 54 | font-weight: 500; 55 | } 56 | 57 | .navigation ul li a .icon { 58 | position: relative; 59 | display: block; 60 | line-height: 75px; 61 | font-size: 1.5em; 62 | text-align: center; 63 | transition: 0.5s; 64 | color: var(--clr); 65 | } 66 | 67 | .navigation ul li.active a .icon { 68 | transform: translateY(-32px); 69 | } 70 | 71 | .navigation ul li a .text { 72 | position: absolute; 73 | color: var(--clr); 74 | font-weight: 400; 75 | font-size: 00.75em; 76 | letter-spacing: 0.05em; 77 | transition: 0.5s; 78 | opacity: 0; 79 | transform: translateY(20px); 80 | } 81 | 82 | .navigation ul li.active a .text { 83 | opacity: 1; 84 | transform: translateY(10px); 85 | } 86 | 87 | .indicator { 88 | position: absolute; 89 | top: -50%; 90 | width: 70px; 91 | height: 70px; 92 | background: #29fd53; 93 | border-radius: 50%; 94 | border: 6px solid var(--clr); 95 | transition: 0.5s; 96 | } 97 | 98 | .indicator::before { 99 | content: ''; 100 | position: absolute; 101 | top: 50%; 102 | left: -22px; 103 | width: 20px; 104 | height: 20px; 105 | background: transparent; 106 | border-top-right-radius: 20px; 107 | box-shadow: 1px -10px 0 0 var(--clr); 108 | } 109 | 110 | .indicator::after { 111 | content: ''; 112 | position: absolute; 113 | top: 50%; 114 | right: -22px; 115 | width: 20px; 116 | height: 20px; 117 | background: transparent; 118 | border-top-left-radius: 20px; 119 | box-shadow: -1px -10px 0 0 var(--clr); 120 | } 121 | 122 | .navigation ul li:nth-child(1).active ~ .indicator { 123 | transform: translateX(calc(70px * 0)); 124 | } 125 | 126 | .navigation ul li:nth-child(2).active ~ .indicator { 127 | transform: translateX(calc(70px * 1)); 128 | } 129 | 130 | .navigation ul li:nth-child(3).active ~ .indicator { 131 | transform: translateX(calc(70px * 2)); 132 | } 133 | 134 | .navigation ul li:nth-child(4).active ~ .indicator { 135 | transform: translateX(calc(70px * 3)); 136 | } 137 | 138 | .navigation ul li:nth-child(5).active ~ .indicator { 139 | transform: translateX(calc(70px * 4)); 140 | } 141 | --------------------------------------------------------------------------------