diff --git a/100_projects/26-magic-navigation-menu-indicator/css/style.css b/100_projects/26-magic-navigation-menu-indicator/css/style.css
new file mode 100644
index 0000000..236858e
--- /dev/null
+++ b/100_projects/26-magic-navigation-menu-indicator/css/style.css
@@ -0,0 +1,91 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: linear-gradient(#ff2871,rgba(255,40, 113, .2));
+}
+.navigation{
+ width: 350px;
+ height: 70px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px;
+}
+.navigation ul{
+ display: flex;
+ width: 350px;
+}
+.navigation ul li{
+ position: relative;
+ list-style: none;
+ width: 70px;
+ height: 70px;
+ z-index: 1;
+}
+.navigation ul li a{
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ width: 100%;
+ text-align: center;
+}
+.navigation ul li a .icon{
+ position: relative;
+ display: block;
+ line-height: 75px;
+ font-size: 21px;
+ text-align: center;
+ transition: .3s;
+ color: #ff2871;
+}
+.navigation ul li.active a .icon{
+ transform: translateY(-32px);
+}
+.navigation ul li a .text{
+ position: absolute;
+ color: #ff2871;
+ font-weight: 400;
+ font-size: 17px;
+ transition: .3s;
+ opacity: 0;
+ transform: translateY(20px);
+}
+.navigation ul li.active a .text{
+ opacity: 1;
+ transform: translateY(10px);
+}
+.point{
+ position: absolute;
+ top:38%;
+ width: 70px;
+ height: 70px;
+ background: #fff;
+ border-radius: 50%;
+ border: 5px solid #ff2871;
+ transition: .5s;
+}
+.navigation ul li:nth-child(1).active ~ .point{
+ transform: translateX(calc(70px * 0));
+}
+.navigation ul li:nth-child(2).active ~ .point{
+ transform: translateX(calc(70px * 1));
+}
+.navigation ul li:nth-child(3).active ~ .point{
+ transform: translateX(calc(70px * 2));
+}
+.navigation ul li:nth-child(4).active ~ .point{
+ transform: translateX(calc(70px * 3));
+}
+.navigation ul li:nth-child(5).active ~ .point{
+ transform: translateX(calc(70px * 4));
+}
diff --git a/100_projects/26-magic-navigation-menu-indicator/index.html b/100_projects/26-magic-navigation-menu-indicator/index.html
new file mode 100644
index 0000000..99d426c
--- /dev/null
+++ b/100_projects/26-magic-navigation-menu-indicator/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/26-magic-navigation-menu-indicator/js/main.js b/100_projects/26-magic-navigation-menu-indicator/js/main.js
new file mode 100644
index 0000000..fac5530
--- /dev/null
+++ b/100_projects/26-magic-navigation-menu-indicator/js/main.js
@@ -0,0 +1,8 @@
+const list = document.querySelectorAll('.list');
+function activeClick(){
+ list.forEach((itme) =>
+ itme.classList.remove("active"));
+ this.classList.add("active");
+}
+ list.forEach((item) =>
+ item.addEventListener('click', activeClick));