#html #css
#HTML #CSS
Вопрос:
Я не знаю почему, но я попытался добавить текстовые поля над значками, но они остаются заблокированными на 2-м значке. Я могу нажать 3-й значок и вернуться к первому, но когда я нажимаю второй значок, я не могу вернуться к первому. То же самое, если я добавлю текстовые поля. Он всегда находится в последнем текстовом поле, которое остается заблокированным. ps: извините за мой плохой английский (я француз).
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } :root { --clr: #222327; --new-color: #00a2ff; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--clr); } .navigation { position: relative; width: 400px; height: 70px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px; } .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; font-weight: 500; } .navigation ul li a .icon { position: relative; display: block; line-height: 75px; font-size: 1.5em; text-align: center; transition: 0.5s; color: var(--clr); } .navigation ul li.active a .icon { transform: translateY(-32px); } .navigation ul li a .text { position: absolute; color: var(--clr); font-weight: 400; font-size: 0.75em; letter-spacing: 0.05em; transition: 0.5s; opacity: 0; transform: translateY(20px); } .navigation ul li.active a .text { opacity: 1; transform: translateY(-25px); } .indicator { position: absolute; top: -50%; width: 70px; height: 70px; background: #29fd53; border-radius: 50%; border: 6px solid var(--clr); transition: 0.5s; } .indicator::before { content: ''; position: absolute; top: 50%; left: -22px; width: 20px; height: 20px; background: transparent; border-top-right-radius: 20px; box-shadow: 1px -10px 0 0 var(--clr); } .indicator::after { content: ''; position: absolute; top: 50%; right: -22px; width: 20px; height: 20px; background: transparent; border-top-left-radius: 20px; box-shadow: -1px -10px 0 0 var(--clr); } .navigation ul li:nth-child(1).active ~ .indicator { transform: translateX(calc(70px * 0)); background: #00a2ff; /*blue*/ --new-color: #00a2ff; } .navigation ul li:nth-child(2).active ~ .indicator { transform: translateX(calc(70px * 1)); background: #ae00ff; /*purple*/ --new-color: #ae00ff; } .navigation ul li:nth-child(3).active ~ .indicator { transform: translateX(calc(70px * 2)); background: #696563; /*grey*/ --new-color: #696563; } .navigation ul li:nth-child(4).active ~ .indicator { transform: translateX(calc(70px * 3)); background: #ffe91f; /*yellow*/ } .navigation ul li:nth-child(5).active ~ .indicator { transform: translateX(calc(70px * 4)); } .navigation ul li:nth-child(6).active ~ .indicator { transform: translateX(calc(70px * 5)); } .navigation ul li.active a span menu { /*anim-opacity-start*/ position: relative; display: flex; width: 400px; height: 70px; justify-content: center; align-items: center; border-radius: 10px; background: var(--new-color); /*blue*/ transition: 0.5s; opacity: 1; transform: translateY(-130px) translateX(calc(70px * 1)); } .navigation ul li a span .menu { /*anim-opacity-end*/ transition: 0.3s; opacity: 0; transform: translateY(-135px) translateX(calc(70px * 1)); } lt;htmlgt; lt;headgt; lt;titlegt;Magic Menu Indicatorlt;/titlegt; lt;link rel="stylesheet" type="text/css" href="style.css"gt; lt;/headgt; lt;body lt;!DOCTYPE htmlgt; #1 lt;div class="navigation"gt; lt;ulgt; lt;li class="list active"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="earth-outline"gt;lt;/ion-icongt; lt;menu class="menu"gt;lt;/menugt; lt;/spangt; lt;span class="text"gt;Navigateurlt;/spangt; lt;/agt; lt;/ligt; #2 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="home-outline"gt;lt;/ion-icongt; lt;menu class="menu"gt;lt;/menugt; lt;/spangt; lt;span class="text"gt;Profilelt;/spangt; lt;/agt; lt;/ligt; #3 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="terminal-outline"gt;lt;/ion-icongt; lt;/spangt; lt;span class="text"gt;Terminallt;/spangt; lt;/agt; lt;/ligt; #4 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="image-outline"gt;lt;/ion-icongt; lt;/spangt; lt;span class="text"gt;Photoslt;/spangt; lt;/agt; lt;/ligt; #5 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="settings-outline"gt;lt;/ion-icongt; lt;/spangt; lt;span class="text"gt;Paramètreslt;/spangt; lt;/agt; lt;/ligt; lt;div class="indicator"gt;lt;/divgt; lt;/ulgt; lt;/divgt; lt;scriptgt; const list = document.querySelectorAll('.list'); function activelink(){ list.forEach((item) =gt; item.classList.remove('active')); this.classList.add('active'); } list.forEach((item) =gt; item.addEventListener('click',activelink)); lt;/scriptgt; lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"gt;lt;/scriptgt; lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt; Ответ №1:
Я думаю, что проблема в размере значка. Она охватывает и другие элементы. Проблема будет решена, если вы добавите .навигация ul li a .значок {ширина: 100%; }.
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } :root { --clr: #222327; --new-color: #00a2ff; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--clr); } .navigation { position: relative; width: 400px; height: 70px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px; } .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; font-weight: 500; } .navigation ul li a .icon { position: relative; display: block; width: 100%; line-height: 75px; font-size: 1.5em; text-align: center; transition: 0.5s; color: var(--clr); } .navigation ul li.active a .icon { transform: translateY(-32px); } .navigation ul li a .text { position: absolute; color: var(--clr); font-weight: 400; font-size: 0.75em; letter-spacing: 0.05em; transition: 0.5s; opacity: 0; transform: translateY(20px); } .navigation ul li.active a .text { opacity: 1; transform: translateY(-25px); } .indicator { position: absolute; top: -50%; width: 70px; height: 70px; background: #29fd53; border-radius: 50%; border: 6px solid var(--clr); transition: 0.5s; } .indicator::before { content: ''; position: absolute; top: 50%; left: -22px; width: 20px; height: 20px; background: transparent; border-top-right-radius: 20px; box-shadow: 1px -10px 0 0 var(--clr); } .indicator::after { content: ''; position: absolute; top: 50%; right: -22px; width: 20px; height: 20px; background: transparent; border-top-left-radius: 20px; box-shadow: -1px -10px 0 0 var(--clr); } .navigation ul li:nth-child(1).active ~ .indicator { transform: translateX(calc(70px * 0)); background: #00a2ff; /*blue*/ --new-color: #00a2ff; } .navigation ul li:nth-child(2).active ~ .indicator { transform: translateX(calc(70px * 1)); background: #ae00ff; /*purple*/ --new-color: #ae00ff; } .navigation ul li:nth-child(3).active ~ .indicator { transform: translateX(calc(70px * 2)); background: #696563; /*grey*/ --new-color: #696563; } .navigation ul li:nth-child(4).active ~ .indicator { transform: translateX(calc(70px * 3)); background: #ffe91f; /*yellow*/ } .navigation ul li:nth-child(5).active ~ .indicator { transform: translateX(calc(70px * 4)); } .navigation ul li:nth-child(6).active ~ .indicator { transform: translateX(calc(70px * 5)); } .navigation ul li.active a span menu { /*anim-opacity-start*/ position: relative; display: flex; width: 400px; height: 70px; justify-content: center; align-items: center; border-radius: 10px; background: var(--new-color); /*blue*/ transition: 0.5s; opacity: 1; transform: translateY(-130px) translateX(calc(70px * 1)); } .navigation ul li a span .menu { /*anim-opacity-end*/ transition: 0.3s; opacity: 0; transform: translateY(-135px) translateX(calc(70px * 1)); } lt;htmlgt; lt;headgt; lt;titlegt;Magic Menu Indicatorlt;/titlegt; lt;link rel="stylesheet" type="text/css" href="style.css"gt; lt;/headgt; lt;body lt;!DOCTYPE htmlgt; #1 lt;div class="navigation"gt; lt;ulgt; lt;li class="list active"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="earth-outline"gt;lt;/ion-icongt; lt;menu class="menu"gt;lt;/menugt; lt;/spangt; lt;span class="text"gt;Navigateurlt;/spangt; lt;/agt; lt;/ligt; #2 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="home-outline"gt;lt;/ion-icongt; lt;menu class="menu"gt;lt;/menugt; lt;/spangt; lt;span class="text"gt;Profilelt;/spangt; lt;/agt; lt;/ligt; #3 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="terminal-outline"gt;lt;/ion-icongt; lt;/spangt; lt;span class="text"gt;Terminallt;/spangt; lt;/agt; lt;/ligt; #4 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="image-outline"gt;lt;/ion-icongt; lt;/spangt; lt;span class="text"gt;Photoslt;/spangt; lt;/agt; lt;/ligt; #5 lt;li class="list"gt; lt;a href="#"gt; lt;span class="icon"gt; lt;ion-icon name="settings-outline"gt;lt;/ion-icongt; lt;/spangt; lt;span class="text"gt;Paramètreslt;/spangt; lt;/agt; lt;/ligt; lt;div class="indicator"gt;lt;/divgt; lt;/ulgt; lt;/divgt; lt;scriptgt; const list = document.querySelectorAll('.list'); function activelink(){ list.forEach((item) =gt; item.classList.remove('active')); this.classList.add('active'); } list.forEach((item) =gt; item.addEventListener('click',activelink)); lt;/scriptgt; lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"gt;lt;/scriptgt; lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt;