CSS single select list example

Question

I am looking for a click based single select list. Instead of the normal drop down list, I want an overlay menu (similar to how we see on facebook when we change privacy settings, the single select list that appears). Is that CSS based or any code examples to creating a similar list? All the lists i found of the net are hover lists not same as we see on f/b.

Thanks.

Something like this:

Answer 1

It is just a menu that pops up where use can pick an option.

If you were using jQuery it would be something like this plug-in http://plugins.jquery.com/project/selectbox

Answer 2

I can't find a non JS-solution (and for JS I'm using jQuery to assign focus to an arbitrary element that would keep the sub-menu open (on the plus side, I'm pretty darn sure that Facebook will be using JavaScript, of some sort, to achieve their implementation too).

However, I've put together a couple of examples, these are, much like Facebook, simply dropdown lists, with a JavaScript handler to assign focus to the clicked element (to keep the sub-menu open regardless of mouse position on the page, until the user clicks elsewhere).

With that in mind, I've used the standard css dropdown-style mark-up:

  <ul>
    <li><a href="#">Symbol</a>
      <ul>
        <li>option 1</li>
        <li>option 2</li>
        <li>option 3</li>
      </ul>
    </li>
    <li><a href="#">Symbol</a>
      <ul>
        <li>option 1</li>
        <li>option 2</li>
        <li>option 3</li>
      </ul>
    </li>
    <li><a href="#">Symbol</a>
      <ul>
        <li>option 1</li>
        <li>option 2</li>
        <li>option 3</li>
      </ul>
    </li>
  </ul>

With the css:

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
  }
  ul li {
    display: inline-block;
    position: relative;
    width: 100px;
    border-bottom: 1px solid #ccc;
  }
  ul li ul {
    display: none;
    width: 100%;
    position: absolute;
    top: 1em;
    left: 0;
  }

  ul li a:hover + ul,
  ul li a:active + ul,
  ul li a:focus + ul {
    display: block;
  }

  ul li ul li {
    border: 0 none transparent;
  }

And the jQuery:

$(document).ready(
  function() {
    $('li a').click(
      function(){
        $(this).focus();
      });
  }
  );

Demo at JS Bin

Notice that I've used a elements, since focus is more easily assigned to anchors than plain, in this case, li elements. However a second version, with the same end result is achieved with the following jQuery:

$(document).ready(
  function() {
    $('li').click(
      function(){
        $('li').not(this).removeAttr('tabindex');
        $(this).attr('tabindex','-1').focus();
      });
  }
  );

Demo at JS Bin.

---

Addenda

Stu Nicholls, of CSS Play seems to have achieved a pure-css solution for this (with a gallery), but I haven't worked my way through his CSS to see how he did it.