What comboBox or dropDownList is this one?

Question

I'm looking to create a similar combobox or dropdown list like this where the box containing the selection items pops up when "Gold coast" or "Newest" button is click on the right side of the following page:

Deal Zoo

It seems to have a very slick look and feel and I wonder where to get the Javascript or ASP .Net component for this?

Consider [jQuery UI](http://jqueryui.com/) or read [this thread](http://stackoverflow.com/questions/1923233/create-a-styled-dropdown-like-on-jquery-ui) — mkilmanas, Jun 06 '11 at 05:22

Dave Morro · Accepted Answer · 2011-06-06T13:52:12.627

I'm the creator of Deal Zoo. Happy to help you out with the dropdown styling. It's a combination of javascript/jquery, css and plain ol' HTML to achieve the result.

You'll need to make sure you have the Jquery library. I use the google hosted version.

The HTML is:

<dl class="dropdown">
  <dt><a href=""><span>Newest<span class="icon"></span></span></a></dt>
  <dd>
    <ul style="display: none; ">
      <li><a href="/sydney" class="selected">Newest</a></li>
      <li><a href="/sydney/cheapest" class="">Cheapest</a></li>
      <li><a href="/sydney/popular" class="">Most Popular</a></li>
      <li><a href="/sydney/ending" class="">Ending Soon</a></li>
    </ul>
  </dd>
</dl>

The CSS is (adapt as needed, the images would obviously need to be created)

.dropdown {
  position: relative;
  width: 200px;
}
.dropdown dt a {
  display: block; 
  border: 1px solid #A3CFE4; 
  color: #585858;
  background-color: #ececec;
  background-image: -moz-linear-gradient(center top, #fefefe, #e9e9e9);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e9e9e9));
  border-style: solid;
  border-color: #ccc;
  border-width: 1px;
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  padding: 5px 0 6px 5px;
  text-shadow: 0 0 1px #fff; 
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
}
.dropdown dt a:hover {
  border-color: #b3b3b3;
  background-color: #d7d7d7;
  background-image: -moz-linear-gradient(center top, #f0f0f0, #dadada);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dadada));
}
.dropdown dt a:active {
  color:#454545;
  background: #ccc;
  border-color: #bbb;
}
.dropdown dt a span {
  cursor: pointer; 
  padding: 4px 5px 5px;
}
.dropdown dt a span .icon {
  background: url(/images/dropdown-arrow.png) no-repeat scroll right center;
  width: 14px;
  height: 10px;
  padding-left: 15px;
}
.dropdown dd ul { 
  display: none;
  list-style: none; 
  position: absolute; 
  right: 0px; 
  top: 0px; 
  width: auto; 
  min-width: 170px;
  background: white;
  -webkit-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
  -moz-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
  box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 4px 0px;
  z-index: 100;
  font-size: 12px;
}
.dropdown dd ul li a { 
  padding: 2px 10px 2px 20px; 
  display: block;
  color: #333;
}
.dropdown dd ul li a:hover { 
  color: #fefefe;
  background: #3296df;
}
.dropdown dd ul li a.selected {
  background: url(/images/tick.png) left 7px no-repeat;
  font-weight: bold
}
.dropdown dd ul li a.selected:hover {
  background-color: #3296df;
  background-position: left -53px;
  color: #fefefe;
}

The Javascript is:

$(document).ready(function (){
    $(".dropdown dt a").click(function(e) {
        e.preventDefault();
        $(this).parents(".dropdown").children("dd").children("ul").toggle();
    });

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });
});

Thanks Dave. Such as a small world. I wouldn't expect the originator to be posting a reply here! I made it work without "$('.truncatable').truncate" and "$('#changeLocation').change". I wonder which element $('.truncatable') and $('#changeLocation') points to and how to make them work? I can see that $('#changeLocation') is to pick up the changed event when the drop down list is selected but could not seem to find the selector. Thanks mate! — Weng Fai Wong, Jun 06 '11 at 12:37
Ah, yeah ignore those two. Inadvertently left them in. Best, dm. — Dave Morro, Jun 06 '11 at 13:52

What comboBox or dropDownList is this one?

1 Answers1