The Select Tag as a Navigation Element

You’ve seen it hundreds of times before. You’re browsing a site, whether it be ecom, banking or aunt Mable’s online macrame tips (really?), and you’ll be presented a choice regarding “what do you want to do” or “where do you want to go” next? Quite often, we see this in the form of a select box with several choices in the drop-down. You choose one, click ‘Go’ and off you go to another page to continue your online journey. Essentially, you ARE submitting a choice via a form, but I contend that this is a somewhat awkward use of the select element. Why not stick with traditional links? After all is this not what links are for?

“But I like the tidy, compact display of a select box,” you say? I agree, it does give you a quick and easy option of presenting a large number of choices without taking up a lot of real estate. But what if you want to maintain that unique look and feel to your site? You don’t want to just toss that ugly standard select box on the screen and call it a day. Sure, you can style it to some extent, but you’re limited in what you can do, and it will never look exactly the same from one browser/OS to the next.

There is a better way. And it’s quite simple. For this example, I’ve styled my select button to look pretty much like a traditional select tag, but since it’s not really a select tag, the styling possibilities via CSS are endless.

The Example

The HTML

As you can see, the HTML is rather simple and it consists of a containing div element, the primary “select” anchor and an unordered list. The list serves as the drop-down that contains all your “option” anchors.

1
2
3
4
5
6
7

<div class="select-menu"><a href="#" class="select-btn">Action</a>
	<ul>
		<li><a href="edit.html">Edit This User</a></li>
		<li><a href="suspend.html">Suspend This User</a></li>
		<li><a href="delete.html">Delete This User</a></li>
	</ul>
</div>

The CSS
First, style the containing element. This class will give the nested elements scope. You can declare a global width here and/or style widths individually depending on the initial option text inside your select button. Either way, you’ll need some kind of width or float to keep the select button from expanding to the full width of its parent.

1
2
3
4

.select-menu {
	display: inline-block;
	width: 100px;
}

Next, style the anchors.

1
2
3
4

.select-menu a {
	display: block;
	text-decoration: none;
}

And now the select button itself. I gave mine a background graphic to mimic the down arrow seen on a typical select element.

1
2
3
4
5
6

.select-menu a.select-btn {
	padding: 2px 6px;
	color: #555555;
	background: #FFFFFF url(select.gif) no-repeat right;
	border: 1px solid #CACACA;
}

The select button’s hover and selected state.

1
2
3
4
5
6

.select-menu a.select-btn:hover,
.select-menu.open a.select-btn {
	color: #555555;
	background-image: url(select_o.gif);
	border-color: #9F9F9F;
}

Here we have the drop-down list of options. By default, it is hidden and positioned absolute so as not to disrupt the surrounding layout. No need for an explicit width here. The drop down options will be as wide as they need to be, regardless of the width of the select button itself. (Take that, IE!). If you like, you can give it a minimum width so it is never smaller than the select button.

1
2
3
4
5
6
7
8
9
10

.select-menu ul {
	display: none;
	position: absolute;
	margin-top: -1px;
	white-space: nowrap;
	background: #FFFFFF;
	border-bottom: 1px solid #9F9F9F;
	border-left: 1px solid #9F9F9F;
	min-width: 99px;
}

And finally we have the “option” elements themselves. I gave mine borders, but you can style yours however you wish.

1
2
3
4
5
6
7
8
9
10
11
12
13

.select-menu li {
	border-right: 1px solid #9F9F9F;
	border-top: 1px solid #CACACA;
}
 
.select-menu li a {
	padding: 3px 6px;
	font-size: 11px;
}
 
.select-menu li a:hover {
	background: #EEF5DF;
}

Oh, and without this little bit, we have no dropdown. When the “open” class is applied to the parent div, the dropdown list will appear. How do you apply this? See the script below.

1

.select-menu.open ul { display: block; }

The Javascript
This script relies on the Prototype Javascript framework, so if you’re not using it, you’ll need another way to toggle the “open” class. The first function is a simple toggle. You can apply this to the onclick handler of the select button and the dropdown will show/hide when clicked.

1
2
3
4

function toggleSelectMenu(obj){
	$(obj).up(0).toggleClassName('open');
	return false;
}

This second function provides a more unobtrusive method for activating your select buttons. It will detect when focus leaves the select button and hide the dropdown, much like a traditional select element.

1
2
3
4
5
6
7
8
9
10
11

function initSelectMenus(className){
	var actions = $$(className);
	actions.each(function(item) {
		Event.observe(item, 'click', function(e){
			item.up().toggleClassName('open');
		});
		Event.observe(item, 'blur', function(e){
			setTimeout(function() {item.up().removeClassName('open')}, 250);
		});
	});
}

Just insert this line in a <script> tag at the bottom of your page and voila, you’re done!

1

Event.observe(window, 'load', function(){initSelectMenus('A.select-btn')});

The Conclusion
As you have seen, the markup and CSS are pretty straightforward and lightweight. And there are some distinct advantages over using a traditional select tag to navigate. First, you can style it however you like and pretty much guarantee the same appearance across browsers. Secondly, you have full control over the width. You don’t have to put up with IE truncating your drop-down options if you want the select box to be shorter in width. Finally, you don’t have to mess around with forms just to navigate from one page to the next. The links do the work for you.