The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Split Button UI Widget

Hi,

I have just left university and I am about to embark on my profesisonal web development career.

I have never really posted before, mainly just harvested information already present in forums on the web to aid in my learning. However, I thought now would be the best time as any to actually join one.

I'll not ramble anymore, and get straight onto it.

Ive been thinking about split buttons for a while now since I've started seeing them popping up on sites, and also in yahoo's UI library.

Ineated of creating one myself I decided to look on the web to see if I could find one, all I could find was the yahoo split button.

I didnt want to use Yahoo's because of the file imports required and I couldnt be bothered diving into the code. So I left it.

Today, I was revisited by the problem thinking that a split button would be a great advangtage here, so I decided to try to create a very simple one just to see what it would be like.

I decided to use one javascript funciton to toggle the display attribute of a div element to help me achieve the effect, although it probably could be achieved using purely css.

I decided to post this because I would like any thoughts on the issue as there are probably many ways to get the same desired effect, and would like to know if any one has implemented somthing similar?

I have posted all of the code below, it is very simple but provides a good initial building block.

note: this example uses a small 16x9 image for the down arrow, which is situated on the right of the button.

It has been tested on IE7 and Firefox, and Safari for Windows. FF and Safari dont expand the full height of the container div holding the span element that contains the split arrow image (note: im not saying FF and safari are wrong), but its only test code.