TehNrd

<apex:component >
	<apex:includeScript value="{!$Resource.multiSelectButton_js}"/>
	<apex:attribute name="buttonText" description="Text displayed." type="String" required="true"/>
	<apex:attribute name="uniqueId" description="Unique Id for this componenet. Must be unique across all multiSelectButtons. This is not the component Id." type="String" required="true"/>
 
	<div name="multiButton" id="button{!uniqueId}" class="menuButton" onclick="showOptions('{!uniqueId}');" >
		<div id="CloneButton{!uniqueId}" class="menuButtonButton" onmouseover="divHover = 'CloneMenu{!uniqueId}';" onmouseout="divHover = '';">{!buttonText}</div>
		<div name="multipButtonOpts" id="CloneMenu{!uniqueId}" class="menuButtonMenu">
			<apex:componentBody/>
		</div>
	</div>
</apex:component>

var divHover = '';
 
/*When a multi select button is clicked this method executes. First it hides all options for every
multiselect button on the page the show but options for the button that was clicked. This way, if
you click one button and then click another button the options on the first will disappear. */
 
function showOptions(objId){
	var multiButtons = document.getElementsByName("multiButton");
	for(var i=0; i < multiButtons.length; i++){
		multiButtons[i].style.position = '';
	}
 
	var multiButtonOpts = document.getElementsByName("multipButtonOpts");
	for(var i=0; i < multiButtonOpts.length; i++){
		multiButtonOpts[i].style.display = 'none';
	}		
 
	document.getElementById('CloneMenu' + objId).style.display = 'block';
	document.getElementById('CloneMenu' + objId).style.top = '17px';
	document.getElementById('button' + objId).style.position = 'relative';
}
 
/*Any time the document is click and the mouse is not over a multiselect button hide 
all options */
document.onclick = function(){
	if(divHover == '' || divHover == null){
		var divs = document.getElementsByTagName('div');
		for(i=0; i < divs.length; i++){
			if(divs[i].getAttribute('name') == 'multiButton'){
				divs[i].style.position = '';
			}
			if(divs[i].getAttribute('name') == 'multipButtonOpts'){
				divs[i].style.display = 'none';
			}
		}
	}
}

<apex:page controller="multiButton">
	<apex:form >
		Normal html links:<br/>
		<c:multiSelectButton uniqueId="show1" buttonText="Links">
			<apex:outputLink value="http://www.digg.com">digg.com</apex:outputLink>
			<apex:outputLink value="http://www.engadget.com">engadget.com</apex:outputLink>
			<apex:outputLink value="http://www.gizmodo.com">gizmodo.com</apex:outputLink>
		</c:multiSelectButton><br/><br/>
 
		Links that pass params:<br/>
		<apex:inputText value="{!searchValue}"/>
		<c:multiSelectButton uniqueId="show3" buttonText="Search">
			<apex:commandLink value="Google" action="{!doSearch}">
				<apex:param assignTo="{!searchEngine}" value="www.google.com/search?q="/>
			</apex:commandLink>
			<apex:commandLink value="Yahoo" action="{!doSearch}">
				<apex:param assignTo="{!searchEngine}" value="search.yahoo.com/search?p="/>
			</apex:commandLink>
			<apex:commandLink value="Bing" action="{!doSearch}">
				<apex:param assignTo="{!searchEngine}" value="www.bing.com/search?q="/> 
			</apex:commandLink>
		</c:multiSelectButton><br/><br/>
 
 
	    These options are bound to action methods in the controller:<br />
		<apex:pageBlock id="tables">
 
			<apex:pageBlockButtons location="top">
				<c:multiSelectButton uniqueId="show2" buttonText="View:">
					<apex:commandLink value="Accounts" action="{!showAccts}" rerender="tables" />
					<apex:commandLink value="Opportunities" action="{!showOpps}" rerender="tables" />
				</c:multiSelectButton>
			</apex:pageBlockButtons>
 
			<apex:pageBlockTable value="{!opps}" var="o" rendered="{!viewList = 'opps'}">
				<apex:column value="{!o.Name}" />
				<apex:column value="{!o.StageName}" />
				<apex:column value="{!o.Amount}" />
			</apex:pageBlockTable>
 
			<apex:pageBlockTable value="{!accts}" var="a" rendered="{!viewList = 'accts'}">
				<apex:column value="{!a.Name}" />
				<apex:column value="{!a.BillingCity}" />
				<apex:column value="{!a.BillingCountry}" />
			</apex:pageBlockTable>
 
		</apex:pageBlock>
	</apex:form>
</apex:page>

public class multiButton {
 
	public List opps {get; set;}
	public List accts {get; set;}
	public String viewList {get; set;}
	public String searchValue {get; set;}
	public String searchEngine {get; set;}
 
	public multiButton(){
		//Query in the contructor for this example
		opps = [select Name, StageName, Amount from Opportunity limit 10];
		accts = [select Name, BillingCity, BillingCountry from Account limit 10];
	}
 
	public void showAccts(){
		viewList = 'accts';
	}
 
	public void showOpps(){
		viewList ='opps';
	}
 
	public pageReference doSearch(){
		PageReference searchPage = new PageReference('http://' + searchEngine + searchVAlue );
		searchPage.setRedirect(true);
		return searchPage;
	}
}