尝试将我的导航代码从悬停更改为单击,因为我意识到移动设备上没有“悬停”。我尝试搜索 CSS 中是否有 :click 之类的东西,但我发现最接近的是 :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>
尝试使用 jQuery [使用“submenuActive”更改“.item.has-children:hover .submenu”并添加 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句