如何将链接列表显示为下拉列表 select?
How to display a list of links as a drop down select?
我想显示 link 的列表,如下拉菜单 select,尽可能不丢失语义。这是我试过的。 CSS 显然现在不起作用。对于 select,我用 JavaScript 中的 location.href
模拟了 link,但我猜它失去了语义价值和可访问性。
没有 jQuery 和 Bootstrap,
如何将 link 的列表显示为下拉列表 select?
document.getElementById("0").addEventListener("change", function (event) {
location.href = event.target.value;
});
.like-select {
appearance: select;
}
<p>Semantic wanted</p>
<ul class="like-select">
<li><a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li>
<li><a href="https://whosebug.com">Stack Overflow</a></li>
<li><a href="http://www.echojs.com/">Echo Js</a></li>
</ul>
<p>Look and feel wanted especially on mobile</p>
<select id="0">
<option value="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</option>
<option value="https://whosebug.com">Stack Overflow</option>
<option value="http://www.echojs.com/">Echo Js</option>
</select>
<option>
不采用嵌套的 HTML 元素。
您需要做的是设计您的 <ul> <li>
并使其外观和感觉像原生下拉菜单。
这是一个工作示例:
我只使用 CSS 制作了这个示例,希望这对您有所帮助
HTML:
<ul>
<li id="box">Hover Me
<ul>
<li class="dropdown_item"><a href="http://thinkio.ca">111</a></li>
<li class="dropdown_item"><a href="http://thinkio.ca">222</a></li>
</ul>
</li>
</ul>
CSS:
ul, li {
list-style-type: none;
margin: 0;
padding:0;
height:30px;
line-height: 30px;
width: 100px;
}
#box {
border: 1px solid #bbb;
display: inline-block;
cursor:default;
}
ul li ul {
display: none;
position: absolute;
top: 40px; /* change this value based on your browser */
left: 10px;
}
ul li:hover>ul:last-child {
display: block;
width: 100px;
}
ul li ul li:hover {
background-color:rgb(33,144,255);
color:white;
border: 1px solid #bbb;
}
WAI 使用 role=listbox
和 role=option
提供了多个模拟列表框的示例。这需要使用 aria-activedescendant
和 aria-selected
以获得更好的可访问性支持。
See Examples under section: 3.13 Listbox
对于样式,您可以复制 style used by the user agent stylesheet.
也就是说,将链接列表设置为下拉菜单 select 可能不是一个好主意,因为它可能会导致 unpredictable change of context
我想你正在寻找这样的东西?没有使用 Jquery 和 Bootstrap 解决方案
Url
的下拉菜单
HTML
<div class="dropdown">
Select URL...
<div class="dropdown-content">
<ul class="like-select">
<li><a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li>
<li><a href="https://whosebug.com">Stack Overflow</a></li>
<li><a href="http://www.echojs.com/">Echo Js</a></li>
</ul>
</div>
</div>
CSS
.dropdown {
position: relative;
display: inline-block;
padding: 10px;
width:160px;
border: 1px solid;
}
.dropdown:after{
content: 'BC';
position: relative;
font-size:14px;
float:right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: inherit;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 39px;
left: 0;
width: 100%;
z-index: 1;
}
li a{
text-decoration:none;
color: black;
padding:10px;
}
ul{
padding:0;
margin:0;
}
li{
list-style: none;
padding:10px;
border-bottom:1px solid black;
}
li:hover{
background-color:gray;
}
li:hover a{
color:white;
}
JS
var dropdown = document.getElementsByClassName("dropdown");
var attribute;
var myFunction = function() {
attribute = this.getAttribute("data-target");
var x = document.getElementById(attribute);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('click', myFunction, false);
}
只需 CSS 和悬停的所有解决方案在移动设备上都运行良好!!!关于移动设备上没有悬停的评论不太正确...悬停状态映射到手指点击并在每个浏览器的每个移动设备上工作 OS!通常,默认行为已经可以解决问题,在某些情况下,您可以使其更适用于某些 JS...
如果您只需要 css 的下拉列表并且这里没有悬停,则可以使用复选框实现另一个解决方案:(只需 google "css checkbox hack" 了解更多信息)
.checkhack {
display: none;
}
#menu {
display: none;
}
#menutoggle:checked + #menu {
display: block;
}
<label for="menutoggle" class="checklabel">OPEN MENU</label>
<input id="menutoggle" class="checkhack" type="checkbox" />
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
无需使用 ID 选择器并保持上述 HTML 即可快速制作组合框的方法
link:https://codepen.io/gabep/pen/KXJoEK
首先 CSS 他们是 JS
拳头我的风格是UL :
.like-select {
height:21px;
overflow:hidden;
width:8%;
}
.like-select li{
appearance: select;
color:red;
border-left: 1px solid blue;
border-right: 1px solid blue;
list-style-type: none;
}
将第一个 child 作为你的盒子 :
.like-select li:first-child {
border: 1px solid blue;
}
将最后一个 child 设为下拉列表的底部:
.like-select li:last-child {
border-bottom: 1px solid blue;
}
给列表项一个悬停效果:
.like-select li a:hover {
background-color: green !important;
}
.like-select li:first-child a:hover{
background-color: none !important;
}
a {
color:blue;
text-decoration:none;
width:100%;
}
现在的 Js:
function load() {
//add the main item to your list you need to have it in your drop-down:
// 使用 querySelectorAll 查找任何类型的特定元素并放入列表中
var addfirst= document.querySelectorAll(".like-select li:first-child");
var ullist = document.querySelectorAll(".like-select");
ullist[0].innerHTML = addfirst[0].outerHTML + ullist[0].innerHTML ;
y = document.querySelectorAll(".like-select li");
// do an onlick here instead of mouse over
y[0].onmouseenter = function(){
//resize wrapper event - im not going to do a toggle because you get the idea
var comboboxwrapper = document.querySelectorAll(".like-select");
comboboxwrapper[0].style.height = "100px";
}
// loop though all other items except first-child
var i;
for (i = 1; i < y.length; i++) {
y[i].onmouseover = function(){
var selecteditem =document.querySelectorAll(".like-select li");
//将鼠标悬停在组合框中的值更改为
var mainitem = document.querySelectorAll(".like-select li:first-child");
mainitem[0].innerHTML = this.innerHTML;
};
} }
window.onload = load;
我想显示 link 的列表,如下拉菜单 select,尽可能不丢失语义。这是我试过的。 CSS 显然现在不起作用。对于 select,我用 JavaScript 中的 location.href
模拟了 link,但我猜它失去了语义价值和可访问性。
没有 jQuery 和 Bootstrap,
如何将 link 的列表显示为下拉列表 select?
document.getElementById("0").addEventListener("change", function (event) {
location.href = event.target.value;
});
.like-select {
appearance: select;
}
<p>Semantic wanted</p>
<ul class="like-select">
<li><a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li>
<li><a href="https://whosebug.com">Stack Overflow</a></li>
<li><a href="http://www.echojs.com/">Echo Js</a></li>
</ul>
<p>Look and feel wanted especially on mobile</p>
<select id="0">
<option value="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</option>
<option value="https://whosebug.com">Stack Overflow</option>
<option value="http://www.echojs.com/">Echo Js</option>
</select>
<option>
不采用嵌套的 HTML 元素。
您需要做的是设计您的 <ul> <li>
并使其外观和感觉像原生下拉菜单。
这是一个工作示例:
我只使用 CSS 制作了这个示例,希望这对您有所帮助
HTML:
<ul>
<li id="box">Hover Me
<ul>
<li class="dropdown_item"><a href="http://thinkio.ca">111</a></li>
<li class="dropdown_item"><a href="http://thinkio.ca">222</a></li>
</ul>
</li>
</ul>
CSS:
ul, li {
list-style-type: none;
margin: 0;
padding:0;
height:30px;
line-height: 30px;
width: 100px;
}
#box {
border: 1px solid #bbb;
display: inline-block;
cursor:default;
}
ul li ul {
display: none;
position: absolute;
top: 40px; /* change this value based on your browser */
left: 10px;
}
ul li:hover>ul:last-child {
display: block;
width: 100px;
}
ul li ul li:hover {
background-color:rgb(33,144,255);
color:white;
border: 1px solid #bbb;
}
WAI 使用 role=listbox
和 role=option
提供了多个模拟列表框的示例。这需要使用 aria-activedescendant
和 aria-selected
以获得更好的可访问性支持。
See Examples under section: 3.13 Listbox
对于样式,您可以复制 style used by the user agent stylesheet.
也就是说,将链接列表设置为下拉菜单 select 可能不是一个好主意,因为它可能会导致 unpredictable change of context
我想你正在寻找这样的东西?没有使用 Jquery 和 Bootstrap 解决方案
Url
的下拉菜单HTML
<div class="dropdown">
Select URL...
<div class="dropdown-content">
<ul class="like-select">
<li><a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li>
<li><a href="https://whosebug.com">Stack Overflow</a></li>
<li><a href="http://www.echojs.com/">Echo Js</a></li>
</ul>
</div>
</div>
CSS
.dropdown {
position: relative;
display: inline-block;
padding: 10px;
width:160px;
border: 1px solid;
}
.dropdown:after{
content: 'BC';
position: relative;
font-size:14px;
float:right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: inherit;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 39px;
left: 0;
width: 100%;
z-index: 1;
}
li a{
text-decoration:none;
color: black;
padding:10px;
}
ul{
padding:0;
margin:0;
}
li{
list-style: none;
padding:10px;
border-bottom:1px solid black;
}
li:hover{
background-color:gray;
}
li:hover a{
color:white;
}
JS
var dropdown = document.getElementsByClassName("dropdown");
var attribute;
var myFunction = function() {
attribute = this.getAttribute("data-target");
var x = document.getElementById(attribute);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('click', myFunction, false);
}
只需 CSS 和悬停的所有解决方案在移动设备上都运行良好!!!关于移动设备上没有悬停的评论不太正确...悬停状态映射到手指点击并在每个浏览器的每个移动设备上工作 OS!通常,默认行为已经可以解决问题,在某些情况下,您可以使其更适用于某些 JS...
如果您只需要 css 的下拉列表并且这里没有悬停,则可以使用复选框实现另一个解决方案:(只需 google "css checkbox hack" 了解更多信息)
.checkhack {
display: none;
}
#menu {
display: none;
}
#menutoggle:checked + #menu {
display: block;
}
<label for="menutoggle" class="checklabel">OPEN MENU</label>
<input id="menutoggle" class="checkhack" type="checkbox" />
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
无需使用 ID 选择器并保持上述 HTML 即可快速制作组合框的方法 link:https://codepen.io/gabep/pen/KXJoEK
首先 CSS 他们是 JS
拳头我的风格是UL :
.like-select {
height:21px;
overflow:hidden;
width:8%;
}
.like-select li{
appearance: select;
color:red;
border-left: 1px solid blue;
border-right: 1px solid blue;
list-style-type: none;
}
将第一个 child 作为你的盒子 :
.like-select li:first-child {
border: 1px solid blue;
}
将最后一个 child 设为下拉列表的底部:
.like-select li:last-child {
border-bottom: 1px solid blue;
}
给列表项一个悬停效果:
.like-select li a:hover {
background-color: green !important;
}
.like-select li:first-child a:hover{
background-color: none !important;
}
a {
color:blue;
text-decoration:none;
width:100%;
}
现在的 Js:
function load() {
//add the main item to your list you need to have it in your drop-down:
// 使用 querySelectorAll 查找任何类型的特定元素并放入列表中
var addfirst= document.querySelectorAll(".like-select li:first-child");
var ullist = document.querySelectorAll(".like-select");
ullist[0].innerHTML = addfirst[0].outerHTML + ullist[0].innerHTML ;
y = document.querySelectorAll(".like-select li");
// do an onlick here instead of mouse over
y[0].onmouseenter = function(){
//resize wrapper event - im not going to do a toggle because you get the idea
var comboboxwrapper = document.querySelectorAll(".like-select");
comboboxwrapper[0].style.height = "100px";
}
// loop though all other items except first-child
var i;
for (i = 1; i < y.length; i++) {
y[i].onmouseover = function(){
var selecteditem =document.querySelectorAll(".like-select li");
//将鼠标悬停在组合框中的值更改为
var mainitem = document.querySelectorAll(".like-select li:first-child");
mainitem[0].innerHTML = this.innerHTML;
};
} }
window.onload = load;