如何使隐藏列表项中的链接可点击
How to make links in a hidden list items clickable
我正在为只有 Html 和 CSS 的响应式页面创建菜单。当页面小于 850px(对于平板电脑和手机)时,水平菜单会隐藏,用户必须单击按钮才能访问菜单。它是一个平滑滚动的单页。
但是,当您打开菜单时,链接不会点击。我注意到,当我取消隐藏菜单时,链接工作正常。如何使链接可点击?我认为这可能与另一个项目 "overlayed" 的链接有关。
任何帮助将不胜感激
/*********** HIDDEN MENU section *************/
#hidden-menu-items {
display: none;
position:absolute;
z-index: 2;
}
/******* This displays the menu on click *******/
input[type=image]{
cursor: pointer;
}
input[type=image]:focus {
outline: none;
}
input[type=image]:focus + ul#hidden-menu-items {
display: block;
}
Here's the HTML
```
<!-- Hidden Mobile Menu-->
<div id="hidden-menu">
<input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
<!-- Hidden Menu Items-->
<ul id="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>
我认为一旦您单击 link,输入就会失去焦点,因此它们会再次隐藏。
我建议在单击时使用 jQuery 到 add/remove 和 class 并根据此调整 CSS(或者只是将 CSS 更改为jQuery).
示例如下:
$('#hidden-menu input').on('click', function(e) {
$('#hidden-menu-items').toggleClass('visible');
});
#hidden-menu-items {
display: none;
position: absolute;
z-index: 2;
}
#hidden-menu-items.visible {
display: block;
}
#hidden-menu {
border: 1px solid pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hidden-menu">
<input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
<!-- Hidden Menu Items-->
<ul id="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>
还有一个link到一个fiddle:https://jsfiddle.net/mzLwg0xb/。
当您点击 link 时,图像输入将失去焦点(模糊)并且 link 消失
blur 事件发生在 click 事件之前,所以你不能在不存在的东西上使用 click。
对父级使用 :focus-within
/*********** HIDDEN MENU section *************/
#hidden-menu-items {
display: none;
position: absolute;
z-index: 2;
}
/******* This displays the menu on click *******/
input[type=image] {
cursor: pointer;
}
#hidden-menu:focus-within {
outline: none;
}
#hidden-menu:focus-within #hidden-menu-items {
display: block;
}
<!-- Hidden Mobile Menu-->
<div id="hidden-menu">
<input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
<!-- Hidden Menu Items-->
<ul id="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>
但是:你不能使用内焦点,因为你! caniuse: CSS focus-within
对于没有 JS 和 focus-within
的解决方案,使用隐藏的单选按钮和 CSS 同级组合器 ~
以及 :checked
伪 class。
/*********** HIDDEN MENU section *************/
.hidden-menu-items {
display: none;
position: absolute;
z-index: 2;
}
/******* This displays the menu on click *******/
.menu-button {
cursor: pointer;
}
.menu-open-indicator,
.menu-close-indicator {
display: none;
}
.menu-open-indicator:checked ~ .menu-open,
.menu-close {
display: none;
}
.menu-open-indicator:checked ~ .menu-close,
.menu-open-indicator:checked ~ .hidden-menu-items {
display: block;
}
<!-- Hidden Mobile Menu-->
<div class="hidden-menu">
<input type="radio" name="menu-toggle" id="my-menu-open" class="menu-open-indicator">
<input type="radio" name="menu-toggle" id="my-menu-close" class="menu-close-indicator">
<label class="menu-open" for="my-menu-open">
<img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
</label>
<label class="menu-close" for="my-menu-close">
<img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
</label>
<!-- Hidden Menu Items-->
<ul class="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>
我正在为只有 Html 和 CSS 的响应式页面创建菜单。当页面小于 850px(对于平板电脑和手机)时,水平菜单会隐藏,用户必须单击按钮才能访问菜单。它是一个平滑滚动的单页。
但是,当您打开菜单时,链接不会点击。我注意到,当我取消隐藏菜单时,链接工作正常。如何使链接可点击?我认为这可能与另一个项目 "overlayed" 的链接有关。
任何帮助将不胜感激
/*********** HIDDEN MENU section *************/
#hidden-menu-items {
display: none;
position:absolute;
z-index: 2;
}
/******* This displays the menu on click *******/
input[type=image]{
cursor: pointer;
}
input[type=image]:focus {
outline: none;
}
input[type=image]:focus + ul#hidden-menu-items {
display: block;
}
Here's the HTML
```
<!-- Hidden Mobile Menu-->
<div id="hidden-menu">
<input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
<!-- Hidden Menu Items-->
<ul id="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>
我认为一旦您单击 link,输入就会失去焦点,因此它们会再次隐藏。
我建议在单击时使用 jQuery 到 add/remove 和 class 并根据此调整 CSS(或者只是将 CSS 更改为jQuery).
示例如下:
$('#hidden-menu input').on('click', function(e) {
$('#hidden-menu-items').toggleClass('visible');
});
#hidden-menu-items {
display: none;
position: absolute;
z-index: 2;
}
#hidden-menu-items.visible {
display: block;
}
#hidden-menu {
border: 1px solid pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hidden-menu">
<input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
<!-- Hidden Menu Items-->
<ul id="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>
还有一个link到一个fiddle:https://jsfiddle.net/mzLwg0xb/。
当您点击 link 时,图像输入将失去焦点(模糊)并且 link 消失 blur 事件发生在 click 事件之前,所以你不能在不存在的东西上使用 click。
对父级使用 :focus-within
/*********** HIDDEN MENU section *************/
#hidden-menu-items {
display: none;
position: absolute;
z-index: 2;
}
/******* This displays the menu on click *******/
input[type=image] {
cursor: pointer;
}
#hidden-menu:focus-within {
outline: none;
}
#hidden-menu:focus-within #hidden-menu-items {
display: block;
}
<!-- Hidden Mobile Menu-->
<div id="hidden-menu">
<input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
<!-- Hidden Menu Items-->
<ul id="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>
但是:你不能使用内焦点,因为你! caniuse: CSS focus-within
对于没有 JS 和 focus-within
的解决方案,使用隐藏的单选按钮和 CSS 同级组合器 ~
以及 :checked
伪 class。
/*********** HIDDEN MENU section *************/
.hidden-menu-items {
display: none;
position: absolute;
z-index: 2;
}
/******* This displays the menu on click *******/
.menu-button {
cursor: pointer;
}
.menu-open-indicator,
.menu-close-indicator {
display: none;
}
.menu-open-indicator:checked ~ .menu-open,
.menu-close {
display: none;
}
.menu-open-indicator:checked ~ .menu-close,
.menu-open-indicator:checked ~ .hidden-menu-items {
display: block;
}
<!-- Hidden Mobile Menu-->
<div class="hidden-menu">
<input type="radio" name="menu-toggle" id="my-menu-open" class="menu-open-indicator">
<input type="radio" name="menu-toggle" id="my-menu-close" class="menu-close-indicator">
<label class="menu-open" for="my-menu-open">
<img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
</label>
<label class="menu-close" for="my-menu-close">
<img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button">
</label>
<!-- Hidden Menu Items-->
<ul class="hidden-menu-items">
<li><a href="#title">About the avengers</a></li>
<li><a href="#avengers">Meet our heros</a></li>
<li><a href="#movies-list">Movie Timeline</a></li>
<li><a href="">Upcoming Movies</a></li>
</ul>
</div>