#html #css
#HTML #css
Вопрос:
Пытаюсь изменить свой навигационный код с наведения на щелчок, поскольку я понял, что на мобильном устройстве нет «наведения». Я попытался выполнить поиск, есть ли такая вещь, как:click в CSS, но ближе всего я нашел: target , который не выполняет то же самое, что щелчок. Я просто ищу совет по наиболее эффективному способу изменения кода, который у меня есть сейчас, чтобы сделать его интерактивным.
.nav {
position: sticky;
left: 0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
font-size: small;
left: 0;
right: 0;
text-transform: capitalize;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: left;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item has-children"><a href="Printing.html">Printing</a>
</li>
<li class="item has-children" style="color:#4D4D4D;">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
<li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
<li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
<li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
<li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
<li><a href="Calendars/Lucky Money Envelopes.html">Lucky Money Envelopes</a></li>
<li><a href="Calendars/More.html">More Calendars</a></li>
</ul>
</li>
<li class="item"><a href="Contact Us.html">Contact Us</a></li>
</ul>
Комментарии:
1. Вы можете использовать только JavaScript или CSS?
2. С вашей текущей разметкой невозможно использовать только CSS. Вам нужно будет добавить ввод, затем вы можете использовать input:checked в качестве селектора. В противном случае используйте JS для добавления / удаления класса в UL.
3. Я не против добавить код javascript, но я с ним не знаком. Если это что-то, что кто-то может быстро написать, я был бы признателен.
Ответ №1:
Попробуйте это с помощью jQuery [измените «.item.has-children:hover .submenu» на «submenuActive» и добавьте код js (jQuery)]:
$(document).ready(function() {
var countClick = 0;
$( "ul.nav li.has-children" ).click(function() {
countClick = countClick 1;
if (countClick %2 == 0) {
$(this).children('.submenu').addClass('submenuActive');
}
else
{
$(this).children('.submenu').removeClass('submenuActive');
}
});
$( "ul.nav li.has-children" ).mouseleave(function() {
countClick = 0;
$(this).children('.submenu').removeClass('submenuActive');
});
}); .nav {
position: sticky;
left: 0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
font-size: small;
left: 0;
right: 0;
text-transform: capitalize;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: left;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.submenuActive {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item has-children"><a href="Printing.html">Printing</a>
</li>
<li class="item has-children" style="color:#4D4D4D;">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
<li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
<li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
<li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
<li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
<li><a href="Calendars/Lucky Money Envelopes.html">Lucky Money Envelopes</a></li>
<li><a href="Calendars/More.html">More Calendars</a></li>
</ul>
</li>
<li class="item"><a href="Contact Us.html">Contact Us</a></li>
</ul> Комментарии:
1. Как мне сделать так, чтобы, если они нажмут на него во второй раз, оно снова появилось. Я пробовал .click, но я думаю, что два клика отменяют друг друга. Я пробовал .dblclick , это то, что я использую в данный момент, но предпочел бы один клик. И знаете ли вы, как показать эту клавишу со стрелкой, чтобы уведомить, что это выпадающий список?
2. Для клавиш со стрелками вы можете использовать FontAwesome ( fontawesome.com/icons/caret-down?style=solid ). При нажатии необходимо изменить клавишу со стрелкой. Для определения второго клика вы можете определить переменную для подсчета кликов: [шаг 1] определите переменную clickCount, [шаг 2] onclick: установите clickCount=clickCount 1 (если clickCount%2==0 в подменю addclass, иначе в подменю remove class)
3. Я изо всех сил старался написать код, я никогда не писал javascript, но он отправляет мне сообщение об ошибке «неожиданный токен countClick», вот что я собрал lol: пусть countClick = 0 onclick = Set clickCount = clickCount 1, если clickCount %2 == 0 { (‘.submenu’).addClass } else { (‘.submenu’).removeClass }
4. Я не был уверен, должно ли это идти до или после другого javascript
5. Количество кликов != clickCount 🙂 Я обновил свой ответ
Ответ №2:
Если я правильно понимаю, свойство CSS «Active» — это то, чего вы хотите достичь? https://www.w3schools.com/cssref/sel_active.asp
Комментарии:
1. Нет, похоже, это просто стилизует кнопку или элемент, который нажат. Мне нужно превратить выпадающее меню при наведении в интерактивное выпадающее меню
2. codepen.io/whiteart/pen/dwgyn как насчет этого? Переключитесь в мобильный режим и проверьте, работает ли он для вас. К сожалению, я не могу предложить других решений, кроме использования JavaScript
3. Я открыт для добавления javascript. Я просто не знаком с javascript.
Ответ №3:
Возможно, вы ищете псевдоклассный CSS :focus-within
https://developer.mozilla.org/es/docs/Web/CSS/:focus-within
Ответ №4:
Вы также можете использовать JavaScript с помощью:
`var all = document.querySelectorAll(".item.has-children");
all.forEach(function (e) {
addEventListener('click', function (){
e.classList.remove('submenu');
e.classList.add('newMenu');
})
})`
затем измените .item.has-children:hover .submenu на другой класс. В моем случае я использовал newMenu . Заполните newMenu класс желаемым стилем.