Custom Drop-Down List Styling

A tutorial on how to create some custom drop-down lists. We'll show you five examples with different looking drop-down menus and lists for various purposes.

A few things before starting:

You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.
I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:
```
  *,
  *:after,
  *:before {
      box-sizing: border-box;
  }
  
```

How do we start?

First question: what do we need to create a drop-down? In general, we’ll use a division with a span and an unordered list for the drop-down list (we might tweak this for some examples):

<div class="wrapper-dropdown">
 <span>I'm kinda the label!</span>
 <ul class="dropdown">
  <li>I'm hidden!</li>
  <li>Me too!</li>
  <li>So do I.</li>
 </ul>
</div>

The JavaScript

For now and before everything else, we need some JavaScript to make this work. Since it’s basically the same JS snippet for all demos, let’s deal with it now:

 //...

 obj.dd.on('click', function(event){
  $(this).toggleClass('active');
  return false;
 });

 //...

 $(function() {

  var dd = new DropDown( $('#dd') );

  $(document).click(function() {
   // all dropdowns
   $('.wrapper-dropdown-1').removeClass('active');
  });

 });

So what does this script do exactly? First, it toggles a class called .active when you click on the wrapper. It means if the wrapper doesn’t have the .active class, it adds it, and if it does, it removes it.
Second thing, it replicates the default behavior of a select drop-down by closing it if you click anywhere else on the screen. Basically, the script says if we click on a child from the <html> tag (so every single node on the DOM), the wrapper loses its .active class. But we prevent this behavior on the wrapper itself by stopping the propagation. Fairly simple, right?
Well, now we understand how it works, I guess it’s time to create some neat drop-downs!

Example 1

Let’s start with something simple: a basic drop-down for gender. Let’s look at the markup first:

The Markup

We need a few things: a wrapper, a (hidden) drop-down list and a “label” which we will wrap into a span. We use anchors because it seems semantically correct to me, but we could have also used another tag.

<div id="dd" class="wrapper-dropdown-1" tabindex="1">
 <span>Gender</span>
    <ul class="dropdown">
        <li><a href="#">Male</a></li>
        <li><a href="#">Female</a></li>
    </ul>
</div>

The CSS

Let’s dig into the CSS which is our focus in this tutorial. We will start with the wrapper:

.wrapper-dropdown {
    /* Size and position */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 200px;
    padding: 10px;
    margin: 0 auto;

    /* Styles */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;

    /* Font settings */
    font-weight: bold;
}

We did a few things here. First we set a width to our dropdown and some paddings/margins. Next, we gave it some styles. And finally, we set some font settings, which will cascade to the dropdown itself.
Let’s finish with the “label” by adding the little arrow on the right with a pseudo-element (styling purpose = no extra markup).

.wrapper-dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent #fff;    
}

I think we all know how to create a little triangle with CSS thanks to some border tricks. It’s a hack yep, but it works pretty well so why not? Nothing much there then: a little white down arrow on the right of the wrapper.
We have a nice little button there, but without an actual drop-down it has no point really. So let’s deal with our list!

.wrapper-dropdown-1 .dropdown {
 /* Size & position */
    position: absolute;
    top: 100%;
    left: 0; /* Size */
    right: 0; /* Size */

    /* Styles */
    background: #fff;
    font-weight: normal; /* Overwrites previous font-weight: bold; */

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

What did we just do? We give the drop-down absolute positioning and placed it just behind the button (top: 100%;). We gave it the same width as the button with the left and right values set to 0. And more importantly, we hide it by reducing its opacity to 0. What about pointer-events? Not seeing something doesn’t mean it’s not there. Setting pointer-events to none prevents clicking on the dropdown while it’s “hidden”.
Let’s give some styles to the list elements inside the dropdown:

.wrapper-dropdown-1 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #9e9e9e;
    padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
    background: #f3f8f8;
}

Okay, so we have a nice button and a nice hidden drop-down menu. Now we have to deal with the “open” case when you click on the button to show the options.
With JavaScript we toggle a class .active when we click on the button, so based on this class we can change our CSS to show the drop-down.

/* Active state */
.wrapper-dropdown-1.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
    border-color: #9bc7de transparent;
    border-width: 6px 6px 0 6px ;
    margin-top: -3px;
}

.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

Three things here:

First, we make the drop-down appear by turning its opacity to 1. Don’t forget to set the pointer-event to auto to enable the interaction with it!
Next, we change the direction and the color of the little arrow.
Then, we change the background behind the arrow by using a clever gradient on the button. Isn’t that nice?

.wrapper-dropdown {
    /* Size and position */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 200px;
    padding: 10px;
    margin: 0 auto;

    /* Styles */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;

    /* Font settings */
    font-weight: bold;
}

.wrapper-dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent #fff;    
}

.wrapper-dropdown-1 .dropdown {
 /* Size & position */
    position: absolute;
    top: 100%;
    left: 0; /* Size */
    right: 0; /* Size */

    /* Styles */
    background: #fff;
    font-weight: normal; /* Overwrites previous font-weight: bold; */

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-1 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #9e9e9e;
    padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
    background: #f3f8f8;
}

/* Active state */
.wrapper-dropdown-1.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
    border-color: #9bc7de transparent;
    border-width: 6px 6px 0 6px ;
    margin-top: -3px;
}

.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

Three things here:

First, we make the drop-down appear by turning its opacity to 1. Don’t forget to set the pointer-event to auto to enable the interaction with it!
Next, we change the direction and the color of the little arrow.
Then, we change the background behind the arrow by using a clever gradient on the button. Isn’t that nice?

1.Demo
2.Download Source

Ath-Solution

Sabtu, 30 April 2016

Custom Drop-Down List Styling

How do we start?

The JavaScript

Example 1

The Markup

The CSS

ath-solutions

Ath-Solution

Sabtu, 30 April 2016

Custom Drop-Down List Styling

How do we start?

The JavaScript

Example 1

The Markup

The CSS

Artikel Terkait

ath-solutions