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?

Answer 1

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