Я пытаюсь добавить класс «CS-Active» в идентификатор «CS-Navigation», который должен открыть меню мобильного NAV, когда я нажимаю кнопку переключения. Он добавляет класс к идентификатору, но мобильное меню не открывается. < /P>
Вот jxs: < /p>
'use client'
import React, { useState } from 'react'
import Image from 'next/image'
import classes from './Navbar.module.css'
function Navbar() {
// State to track the menu and body classes
const [menuActive, setMenuActive] = useState(false) // Start with menu closed (default: false)
const toggleMenu = () => {
setMenuActive(!menuActive)
}
return (
{/* Nav Logo */}
{/* Navigation List */}
{/* Mobile Nav Toggle */}
{/* Nav Links */}
[list]
[*]
Home
[*]
About
[*]
Services
[*]
About Us
[*]
FAQ
[/list]
{/* Contact Us Button */}
Contact Us
)
}
export default Navbar
< /code>
Вот фрагмент navbar.module.css: < /p>
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
body.cs-open {
overflow: hidden;
}
#cs-navigation {
width: 100%;
/* prevents padding and border from affecting height and width */
box-sizing: border-box;
padding: 0.75rem 1rem;
background-color: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
position: fixed;
z-index: 10000;
}
#cs-navigation:before {
/* black blurred overlay */
content: '';
width: 0%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
display: block;
position: absolute;
top: 100%;
right: 0;
z-index: -11;
transition:
width 0.5s,
opacity 0.3s;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#cs-navigation.cs-active:before {
width: 100%;
opacity: 1;
}
#cs-navigation.cs-active .cs-ul-wrapper {
opacity: 1;
transform: scaleX(1);
transition-delay: 0.2s;
}
#cs-navigation.cs-active .cs-ul-wrapper {
opacity: 1;
transform: scaleX(1);
}
#cs-navigation.cs-active .cs-li {
opacity: 1;
transform: translateX(0);
}
#cs-navigation.cs-active .cs-li {
opacity: 1;
transform: translateX(0);
}
#cs-navigation .cs-container {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
#cs-navigation .cs-logo {
width: 40%;
max-width: 9.125rem;
height: 100%;
margin: 0 auto 0 0;
/* prevents padding and border from affecting height and width */
box-sizing: border-box;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
#cs-navigation .cs-logo img {
width: 100%;
height: 100%;
/* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
object-fit: contain;
/* places the image to the left edge of the parent */
object-position: left;
}
#cs-navigation .cs-toggle {
/* 44px - 48px */
width: clamp(2.75rem, 6vw, 3rem);
height: clamp(2.75rem, 6vw, 3rem);
margin: 0 0 0 auto;
background-color: transparent;
border: none;
border-radius: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
}
#cs-navigation .cs-active .cs-line1 {
top: 50%;
transform: translate(-50%, -50%) rotate(225deg);
}
#cs-navigation .cs-active .cs-line2 {
top: 50%;
transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
transform-origin: center;
}
#cs-navigation .cs-active .cs-line3 {
opacity: 0;
bottom: 100%;
}
#cs-navigation .cs-box {
/* 24px - 28px */
width: clamp(1.5rem, 2vw, 1.75rem);
/* 14px - 16px */
height: clamp(0.875rem, 1.5vw, 1rem);
position: relative;
}
#cs-navigation .cs-line {
width: 100%;
height: 2px;
background-color: #1a1a1a;
border-radius: 2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#cs-navigation .cs-line1 {
top: 0;
transition:
transform 0.5s,
top 0.3s,
left 0.3s;
animation-duration: 0.7s;
animation-timing-function: ease;
animation-direction: normal;
animation-fill-mode: forwards;
transform-origin: center;
}
#cs-navigation .cs-line2 {
top: 50%;
transform: translateX(-50%) translateY(-50%);
transition:
top 0.3s,
left 0.3s,
transform 0.5s;
animation-duration: 0.7s;
animation-timing-function: ease;
animation-direction: normal;
animation-fill-mode: forwards;
}
#cs-navigation .cs-line3 {
bottom: 0;
transition:
bottom 0.3s,
opacity 0.3s;
}
#cs-navigation .cs-ul-wrapper {
height: 100vh;
background-color: #fff;
box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
opacity: 0;
position: absolute;
top: 100%;
right: 0;
left: auto;
z-index: -1;
overflow: hidden;
transform: scaleX(0);
transition:
transform 0.4s,
opacity 0.3s;
transform-origin: top right;
}
#cs-navigation .cs-ul {
width: auto;
min-width: 40%;
height: 65vh;
margin: 0;
/* 28px - 40px */
padding: 3rem clamp(1.75rem, 3vw, 2.5rem) 2rem 4.375rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
gap: 1.25rem;
overflow: scroll;
}
#cs-navigation .cs-li {
text-align: right;
list-style: none;
width: 100%;
margin-right: 0;
opacity: 0;
/* transition from these values */
transform: translateX(-2.5rem);
transition:
transform 0.6s,
opacity 0.9s;
}
#cs-navigation .cs-li:nth-of-type(1) {
transition-delay: 0.05s;
}
#cs-navigation .cs-li:nth-of-type(2) {
transition-delay: 0.1s;
}
#cs-navigation .cs-li:nth-of-type(3) {
transition-delay: 0.15s;
}
#cs-navigation .cs-li:nth-of-type(4) {
transition-delay: 0.2s;
}
#cs-navigation .cs-li:nth-of-type(5) {
transition-delay: 0.25s;
}
#cs-navigation .cs-li:nth-of-type(6) {
transition-delay: 0.3s;
}
#cs-navigation .cs-li:nth-of-type(7) {
transition-delay: 0.35s;
}
#cs-navigation .cs-li:nth-of-type(8) {
transition-delay: 0.4s;
}
#cs-navigation .cs-li:nth-of-type(9) {
transition-delay: 0.45s;
}
#cs-navigation .cs-li-link {
/* 16px - 24px */
font-size: clamp(1rem, 2.5vw, 1.5rem);
line-height: 1.2em;
text-decoration: none;
margin: 0;
color: var(--headerColor);
display: inline-block;
position: relative;
}
#cs-navigation .cs-li-link:before {
/* active state underline */
content: '';
width: 100%;
height: 1px;
background: currentColor;
opacity: 1;
display: none;
position: absolute;
bottom: -0.125rem;
left: 0;
}
#cs-navigation .cs-li-link.cs-active:before {
display: block;
}
#cs-navigation .cs-button-solid {
display: none;
}
}
< /code>
Я протестировал его путем регистрации консоли, и, похоже, он переключается на состояние и включено. Он также применяет CS-активность к элементу, как написано:
Но на самом деле он не открывает меню. Моя теория заключается в том, что это не работает, потому что я использую модуль CSS и создает хэш на удостоверении личности. Но я могу ошибаться. Если вам нужен оригинальный файл JS, который я преобразую в JSX, я тоже могу добавить это.
Я пытаюсь добавить класс «CS-Active» в идентификатор «CS-Navigation», который должен открыть меню мобильного NAV, когда я нажимаю кнопку переключения. Он добавляет класс к идентификатору, но мобильное меню не открывается. < /P> Вот jxs: < /p> [code]'use client'
import React, { useState } from 'react' import Image from 'next/image' import classes from './Navbar.module.css'
function Navbar() { // State to track the menu and body classes const [menuActive, setMenuActive] = useState(false) // Start with menu closed (default: false)
элемент списка исчезает после добавления, когда страница перезагружается
let addButton = document.querySelector( #taskbutton );
addButton.addEventListener( click , function(){
let input = document.querySelector( input );
let inputText =...
Мне нужно приложение javafx, которое открывает/запускает окно VLC Player и показывает определенный фильм. Проблема в том, что он открывается только тогда, когда я закрываю окно приложения.
Я видел много вопросов, связанных с PWA, но мой кажется противоположным:
Я сохранил несовместимый с PWA ярлык на мой главный экран, и я хочу, чтобы он открывался в изолированной среде браузера, а не на новой вкладке в мобильном Safari.
Я готов...
Здесь я пытаюсь автоматически открыть клавиатуру при запуске активности в JetpackCompose, но у меня не получается добиться этого успеха, и я получаю следующую ошибку:
Поскольку я изучаю больше и обнаружил, что не могу использовать...
Мобильная версия