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.


Code HTML4Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<script type="text/javascript">
<!--
function toggle(sDivId) {
     var oDiv = document.getElementById(sDivId);
     oDiv.style.display = (oDiv.style.display == "none" || oDiv.style.display == "") ? "block" : "none";
}
//-->
</script>
<style type="text/css">
<!--
a {
    text-decoration:none;
}
 
#sbwrap {
    width: 150px; 
    background-color:#ccc;
    text-align:center;
}
 
 
#splitarr {
    background-color:#eee;
    float:right;
    height:100%;
}
 
#mitems ul {
    list-style-type:none;
    margin:0;
    padding:0;
    margin:0px;
    padding:0px;
    background-color:#eee;
    width:134px; /* (150-16) width of arrow image */
}
 
#mitems ul li a {
    display:block;
    width:100%;
}
 
#mitems ul li a:hover {
   background-color:#cfc;
   text-decoration:underline; 
}
 
#sbwrap div#mitems {
    display:none;
    text-align:left;
    background-color:#fff
}
 
#sbwrap div span img {
    cursor:hand; 
}
 
//-->
</style>
</head>
<body>
    <div id="sbwrap">
            <span id="splitarr">
                <img src="menuarrow.gif" alt="" onclick="toggle('mitems')" />
            </span>
            <span>
                <a href="#">My Apps</a>
            </span>
        <div id="mitems">
            <ul>
                <li><a href="#">Menu 1</a></li> 
                <li><a href="#">Menu 1</a></li>  
                <li><a href="#">Menu 1</a></li>     
            </ul>
        </div>
    </div>
 
</body>
</html>

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.

Thank You