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

Question

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="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>

Solution 1

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

Solution 2

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

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

Working Fiddle

Solution 3

<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

Solution 4

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

Solution 5

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>

View more solutions

Comments

[Walle Cyril]

without jQuery or Bootstrap

[steveax]

Since the OP is tagged with accessibility, I’m assuming they care about users that navigate with the keyboard. Your example would need a fair bit of work to be keyboard accessible (being able to focus and navigate the options with the keyboard.)

[Walle Cyril]

Does not behave like my <select> (wanted). Also :hover does not exist on mobile.

[Walle Cyril]

it works on desktop but on mobile there is no hover, only touch and swipe

[LSKhan]

Let me change it to click

[ToTaTaRi]

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, have you ever tried!? I've developed dozens of navigations just with css, working completly fine on mobile! Normally the default behaviour already does the trick, in some cases you can make it more usable with some JS...

[ToTaTaRi]

If you want a dropdown just with css and NO hover take a look at the "css checkbox hack" (just google that) and you'll find another quite good working solution! Maybe I'll post an answer with that approach...

[ToTaTaRi]

Just add some select box a like styles and there it is mobile friendly as well... ;-)

[ToTaTaRi]

Alternativly you could work with an anchor link and the :target-selector to manage the toggle!

[Walle Cyril]

Yes you are right. I think there is misunderstanding, what I want to say is that on mobile the hover interaction does not exist because there is no mouse cursor standing still like on desktop. Now, some browser on mobile automatically translate hover into "touching" or "touched" and it works yes, but in this case why not directly use touchstart or click event. Also I gave an example in my question how I want it to feel and behave, and I don't think the <select> is opening on hover on desktop.

[Walle Cyril]

is the solution provided by LSKhan good from an accessibility perspective ?

[Adam]

@WalleCyril No keyboard support

[ToTaTaRi]

But my checkbox Solution above behaves exactly like a select or Not!? It does Not Open on hover but ob Click...

[jmike]

this solution works perfectly only question is how do i add click out of the dropdown. i tried to click a random part of the screen but the dropdown is still up