javascript - How to display a list of links as a drop down select?

I want to display a list of links like a drop down select, without losing the semantic if possible. Here's what I tried. The CSS obviously does not work now. For the select I emulated the link a bit with location.href in the JavaScript but it loses semantic value, and accessibility I guess.

Without jQuery and Bootstrap,

How to display a list of links as a drop down 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="">Wikipedia</a></li>
  <li><a href="">Stack Overflow</a></li>
  <li><a href="/">Echo Js</a></li>
</ul>

<p>Look and feel wanted especially on mobile</p>
<select id="0">
  <option value="">Wikipedia</option>
  <option value="">Stack Overflow</option>
  <option value="/">Echo Js</option>
</select>

Without jQuery and Bootstrap,

How to display a list of links as a drop down 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://stackoverflow.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://stackoverflow.com">Stack Overflow</option>
  <option value="http://www.echojs.com/">Echo Js</option>
</select>

Share Improve this question edited Oct 13, 2017 at 23:15 asked Oct 13, 2017 at 20:55 Walle Cyril 3,2474 gold badges28 silver badges60 bronze badges

do you want a dropdown of <a> tags? – Matthew Barbara Commented Oct 13, 2017 at 20:58
yes but with the same native feel and look as <select> on mobile – Walle Cyril Commented Oct 13, 2017 at 21:39
1 I feel like you could attempt to mimic the look and feel of the native select box, but it would never be exact. Would that suffice? – KillahB Commented Oct 16, 2017 at 7:04
Can you use javascript? – Blues Clues Commented Oct 17, 2017 at 9:13
yes, but it is even better without it – Walle Cyril Commented Oct 17, 2017 at 15:25

Add a comment |

6 Answers 6

Sorted by: Reset to default 5

The WAI provides multiple examples of emulated listbox using role=listbox and role=option. This requires the use of aria-activedescendant and aria-selected for better accessibility support.

See Examples under section: 3.13 Listbox

For the styling, you can copy the style used by the user agent stylesheet.

That being said, it might a bad idea to style a list of links as a dropdown select as it could lead to an unpredictable change of context

I think you are looking for something like this?Without using Jquery and Bootstrap solution

Dropdown for 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://stackoverflow.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: '\25BC';
  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;
}

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);
}

Working Fiddle

<option> does not take nested HTML elements.

What you have to do is style your <ul> <li> and make it look and feel like a native drop down.

Here is a working example:

https://codepen.io/anon/pen/boxKRz

I made this sample only using CSS, hope this will help u

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;
}

Link: https://codepen.io/zsydyc/pen/VMGGPv

ALL SOLUTION WITH JUST CSS AND HOVER ARE WORKING COMPLETLY WELL ON MOBILE!!! That comments that there is no hover on mobile are not quite right... The hover states are mapped to a finger tap and working on every mobile OS in every brwoser! Normally the default behaviour already does the trick, in some cases you can make it more usable with some JS...

If you want a dropdown just with css and NO hover here comes an other solution realized with a checkbox: (just google "css checkbox hack" for further information)

.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>

quick way of making a combobox without using ID selector and keeping the HTML as above link:https://codepen.io/gabep/pen/KXJoEK

first the CSS them the JS

fist I style the 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;
}

make the first child your box :

.like-select li:first-child {
    border: 1px solid blue;
}

make the last child the bottom part of dropdown:

 .like-select li:last-child {
        border-bottom: 1px solid blue;

    }

give the list item a hover effect :

.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%;
}

now the Js:

    function load() {
  //add the main item to your list you need to have it in your drop-down:

// use querySelectorAll to find specific elements of any type and put in a list

  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");

//change the value in the combobox with the value hovered over

  var mainitem = document.querySelectorAll(".like-select li:first-child");


  mainitem[0].innerHTML = this.innerHTML;   

 };


 } }

window.onload = load;

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display a list of links as a drop down select? - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)