Category: Web Development

Create a dropdown using a list <ul>

We’ve all been there – that moment when you see your wonderful layout ending up with fugly default browser styling. If only all browsers would adopt the same styling for our dear HTML elements and let us add sparkles and colors. Ok, maybe not sparkles but at least style that darn dropdown. And please don’t get me started on mobile.

For one project I worked on, the only option I had was to not use <select> for the dropdown but style a list <ul> instead and make it look like the styled dropdown the client wanted – Dropdown Select Design This is the dropdown code using a <select> as we all know –

	<select>
		<option>Gummi Bears</option>
		<option>Tiramisu</option>
		<option>Carrot Cake</option>
		<option>Chocolate</option>
		<option>Jelly Beans</option>
		<option>Cotton Candy</option>
		<option>Marzipan</option>
		<option>Lollipop</option>
		<option>Fruitcake</option>
		<option>Donut</option>
	</select> 

First, let’s break down what are the parts of this module we’re creating. This will help us figure out what we’re dealing with as were transforming a simple list to a <select> dropdown and then adding some nice styling.

 

A simple list:

Select your favorite

  • Gummi Bears
  • Tiramisu
  • Carrot Cake
  • Chocolate
  • Jelly Beans
  • Cotton Candy
  • Marzipan
  • Lollipop
  • Fruitcake
  • Donut

The code:

    Select your favorite
	<ul>
		<li>Gummi Bears</li>
		<li>Tiramisu</li>
		<li>Carrot Cake</li>
		<li>Chocolate</li>
		<li>Jelly Beans</li>
		<li>Cotton Candy</li>
		<li>Marzipan</li>
		<li>Lollipop</li>
		<li>Fruitcake</li>
		<li>Donut</li>
	</ul>

 

We should be able to transform the above code to a dropdown with the following parts: dropdown guide

  1. Container
    • Our dropdown needs to be in a container where we can control the position of the  contents of a dropdown which we’ll set as …
  2. Trigger
    • This is the part of the dropdown that you click to show the list options available
  3. List options
    • The contents of the dropdown are the options available with the <select>

 

Read More

1 2