主要是使用<layout:accordionLayout/>控件实现效果，话不多说，直接上代码：

?

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
	xmlns:ui="http://java.sun.com/jsf/facelets" renderKitId="AJAX">
	<w:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<w:stylesheet src="resources/css/style.css"></w:stylesheet>
	</w:head>
	<w:page title="Insert title here">
		<layout:borderLayout fitToBody="true">
			<layout:panel region="north" autoHeight="true" border="false">
				<ui:include src="header.xhtml"></ui:include>
			</layout:panel>
			<layout:panel region="west" width="200"  title="菜单" split="true" border="false" collapsible="true">
				<layout:accordionLayout id="layout" animate="true" fit="true" border="false"></layout:accordionLayout>
			</layout:panel>
			 <layout:panel region="center" title="center" fit="true">                
			 <w:iframe style="width: 100%; height: 100%" id="frame" src="workspace.xhtml" name="content" frameborder="no" />           
			  </layout:panel>
			  <layout:panel region="south" autoHeight="true" border="false">               
			   <ui:include src="footer.xhtml" />            
			   </layout:panel>
		</layout:borderLayout>
	</w:page>
</f:view>

?

?

package com.ahsl.index;

import java.util.List;

import javax.faces.application.Application;
import javax.faces.component.html.HtmlGraphicImage;
import javax.faces.component.html.HtmlOutputLink;
import javax.faces.component.html.HtmlOutputText;
import javax.faces.context.FacesContext;

import org.operamasks.faces.annotation.BeforeRender;
import org.operamasks.faces.annotation.Bind;
import org.operamasks.faces.annotation.Inject;
import org.operamasks.faces.annotation.ManagedBean;
import org.operamasks.faces.annotation.ManagedBeanScope;
import org.operamasks.faces.component.layout.impl.UIAccordionLayout;
import org.operamasks.faces.component.layout.impl.UIPanel;

import com.ahsl.index.enities.Function;
import com.ahsl.index.enities.Functiontype;
import com.ahsl.index.service.IFunctionService;
import com.ahsl.index.service.IFunctiontypeService;
@ManagedBean(name = "AccordionLayoutBean", scope = ManagedBeanScope.REQUEST)
public class AccordionLayoutBean {
	
	  @Inject(value="functionSpringService")
	  private IFunctionService fs;
	  
	  @Inject(value="functiontypeSpringService")
	  private IFunctiontypeService fts;
	
	  @Bind
	  private UIAccordionLayout layout;
	  
	  @BeforeRender
	  public void beforeRender(boolean isPostback) {
	    
	    FacesContext context = FacesContext.getCurrentInstance();
	    Application app = context.getApplication();
	    List<Functiontype> ftlist=fts.findAll();
	    for (Functiontype ft:ftlist) {
	        UIPanel panel = (UIPanel) app
	            .createComponent(UIPanel.COMPONENT_TYPE);
	        panel.setTitle(ft.getName());
	        List<Function> flist=fs.findByTypeID(ft.getUid());
	        for (Function fun:flist) {
	            HtmlOutputLink hOL = (HtmlOutputLink) app
	                .createComponent(HtmlOutputLink.COMPONENT_TYPE);
	            hOL.setValue(fun.getFunCode());
	            hOL.setTarget("content");
	            hOL.setStyle("color: #0078C2;text-decoration: none;margin: 6px 3px;font-size: 14px;font-weight: bold;");
	            
	            // 显示图标
//	            if (hnode.getImage() != null) {
//	              HtmlGraphicImage image = (HtmlGraphicImage) app
//	                  .createComponent(HtmlGraphicImage.COMPONENT_TYPE);
//	              image.setUrl(hnode.getImage());
//	              image.setStyle("margin: 0px 1