I'm using facelets and I have the following layout page:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<title><ui:insert name="title" /></title>
<link href="../css/cssmenu/styles.css" rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<div id="layout">
<table>
<tr>
<td height="500" valign="top">
<div id="menu">
<ui:include src="menu.xhtml" />
</div>
</td>
<td>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
</td>
</tr>
</table>
</div>
</h:body>
</html>
Also my menu.xhtml page is the following:
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:body>
<h:form id="menuForm">
<div id="menuLateral">
<p:growl id="messages" autoUpdate="true" showDetail="true" />
<p:panelMenu style="width:200px" id="panelMenu">
<p:submenu label="Incidentes">
<p:menuitem value="#{menuController.test}" action="#{menuController.save}"
ajax="true" update="messages"
icon="ui-icon-disk" />
</p:submenu>
<p:submenu label="Non-Ajax Menuitem">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close" />
</p:submenu>
<p:separator />
<p:submenu label="Navigations">
<p:submenu label="Links" icon="ui-icon-extlink">
<p:submenu label="PrimeFaces" icon="ui-icon-heart">
<p:menuitem value="Home" url="http://www.primefaces.org"
icon="ui-icon-home" />
<p:menuitem value="Docs"
url="http://www.primefaces.org/documentation.html"
icon="ui-icon-document" />
<p:menuitem value="Download"
url="http://www.primefaces.org/downloads.html"
icon="ui-icon-arrowthick-1-s" />
<p:menuitem value="Support"
url="http://www.primefaces.org/support.html"
icon="ui-icon-wrench" />
</p:submenu>
</p:submenu>
<p:menuitem value="Mobile" icon="ui-icon-signal" />
</p:submenu>
</p:panelMenu>
</div>
</h:form>
</h:body>
</html>
What I want is to make my primefaces menu to look like this one: http://cssmenumaker.com/builder/1442641 (or anyone actually, its just an example)
However im not sure what my css stylesheet should contain or what to do to accomplish it. I will deeply appreciate your suggestions.
