I saw the next in u page.
But in my proyect, the result it the next.
the toolbar and menu is over the content .
The menu expands where i click it (in dad item only)
in the responsive preview is not affected,it is shows normal
My toobar
Code: Select all
<a href="#" class="profile">
<span class="username">Sarah Miller</span>
<p:graphicImage name="images/avatar.png" library="apollo-layout" />
<i class="fa fa-angle-down"></i>
</a>
<span class="topbar-search">
<input type="text" placeholder="Search"/>
<span class="fa fa-search"></span>
</span>
<span class="topbar-themeswitcher">
</span>
<ul class="topbar-menu fadeInDown">
<li>
<a href="#">
<i class="topbar-icon fa fa-fw fa-user"></i>
<span class="topbar-item-name">Profile</span>
</a>
<ul>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-user"></i>
<span>Profile</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-user-secret"></i>
<span>Privacy</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-cog"></i>
<span>Settings</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-sign-out"></i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon fa fa-fw fa-cog"></i>
<span class="topbar-item-name">Settings</span>
</a>
<ul>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-paint-brush"></i>
<span>Change Theme</span>
<span class="topbar-badge">1</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-star-o"></i>
<span>Favorites</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-lock"></i>
<span>Lock Screen</span>
<span class="topbar-badge">3</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-picture-o"></i>
<span>Wallpaper</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon fa fa-fw fa-envelope-o"></i>
<span class="topbar-item-name">Messages</span>
<span class="topbar-badge">5</span>
</a>
<ul>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar1.png" library="apollo-layout" width="35"/>
<span>Give me a call</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar2.png" library="apollo-layout" width="35"/>
<span>Reports attached</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar3.png" library="apollo-layout" width="35"/>
<span>About your invoice</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar2.png" library="apollo-layout" width="35"/>
<span>Meeting today</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar4.png" library="apollo-layout" width="35"/>
<span>Out of office</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon fa fa-fw fa-bell-o"></i>
<span class="topbar-item-name">Notifications</span>
<span class="topbar-badge">2</span>
</a>
<ul>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-tasks"></i>
<span>Pending tasks</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-calendar-check-o"></i>
<span>Meeting today</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-download"></i>
<span>Download</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-plane"></i>
<span>Book flight</span>
</a>
</li>
</ul>
</li>
<li class="topbar-search-item">
<span class="topbar-search">
<input type="text" placeholder="Search"/>
<span class="fa fa-search"></span>
</span>
</li>
</ul>
</div>
</ui:composition>
Code: Select all
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pa="http://primefaces.org/apollo">
<div class="layout-menu-container">
<div class="nano">
<div class="nano-content menu-scroll-content">
<div class="layout-menu-title">MENU</div>
<h:form id="menuform">
<pa:menu>
<p:menuitem id="apl_dashboard" value="Dashboard" icon="fa fa-dashboard" outcome="/dashboard"/>
<p:submenu id="apl_default" label="Jsf" icon="fa fa-life-saver">
<p:menuitem id="apl_empty" value="Chequeo" icon="fa fa-square-o" outcome="/jsf/chequeo/listChequeos"/>
<p:menuitem id="apl_landing" value="Consulta" icon="fa fa-certificate" outcome="/jsf/consulta/listConsultas"/>
<p:menuitem id="apl_login" value="Modulo Atencion" icon="fa fa-sign-in" outcome="/jsf/modatencion/listModAtencions"/>
<p:menuitem id="apl_error" value="PsRole" icon="fa fa-exclamation-circle" outcome="/jsf/psrole/listPsroles"/>
<p:menuitem id="apl_404" value="PsroleUser" icon="fa fa-times" outcome="/jsf/psroleuser/listPsroleusers"/>
<p:menuitem id="apl_access" value="Psuser" icon="fa fa-exclamation-triangle" outcome="/jsf/psuser/listPsusers"/>
</p:submenu>
<p:submenu id="apl_hierarchy" label="Hierarchy" icon="fa fa-gg">
<p:submenu id="apl_sm1" label="Submenu 1" icon="fa fa-sign-in">
<p:submenu id="apl_sm11" label="Submenu 1.1" icon="fa fa-sign-in">
<p:menuitem id="apl_lnk111" value="Link 1.1.1" icon="fa fa-sign-in" url="#" />
<p:menuitem id="apl_lnk112" value="Link 1.1.2" icon="fa fa-sign-in" url="#" />
<p:menuitem id="apl_lnk113" value="Link 1.1.3" icon="fa fa-sign-in" url="#" />
</p:submenu>
<p:submenu id="apl_sm12" label="Submenu 1.2" icon="fa fa-sign-in">
<p:menuitem id="apl_lnk121" value="Link 1.2.1" icon="fa fa-sign-in" url="#" />
</p:submenu>
</p:submenu>
<p:submenu id="apl_sm2" label="Submenu 2" icon="fa fa-sign-in">
<p:submenu id="apl_sm21" label="Submenu 2.1" icon="fa fa-sign-in">
<p:menuitem id="apl_lnk211" value="Link 2.1.1" icon="fa fa-sign-in" url="#" />
<p:menuitem id="apl_lnk212" value="Link 2.1.2" icon="fa fa-sign-in" url="#" />
</p:submenu>
<p:submenu id="apl_sm22" label="Submenu 2.2" icon="fa fa-sign-in">
<p:menuitem id="apl_lnk221" value="Link 2.2.1" icon="fa fa-sign-in" url="#" />
</p:submenu>
</p:submenu>
</p:submenu>
<p:menuitem id="apl_doc" value="Docs" icon="fa fa-book" />
<p:menuitem id="apl_buy" value="Buy" icon="fa fa-credit-card" url="https://www.primefaces.org/store"/>
</pa:menu>
</h:form>
<div class="nano-scroll-footer" />
</div>
</div>
</div>
</ui:composition>
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<title><ui:insert name="title">PrimeFaces Apollo</ui:insert></title>
<h:outputScript name="js/nanoscroller.js" library="apollo-layout" />
<h:outputScript name="js/layout.js" library="apollo-layout" />
<h:outputStylesheet name="css/nanoscroller.css" library="apollo-layout" />
<h:outputStylesheet name="css/layout-green-light.css"
library="apollo-layout" />
</h:head>
<h:body>
<div class="layout-wrapper layout-green-light.css">
<ui:include src="topbar.xhtml" />
<div class="layout-wrapper layout-wrapper layout-horizontal">
<ui:include src="menu.xhtml" />
</div>
<div class="layout-content">
<div class="layout-breadcrumb">
<ul>
<li><p:link outcome="/dashboard"><i class="fa fa-home" /></p:link></li>
<li>/</li>
<ui:insert name="breadcrumb" />
</ul>
<div class="layout-breadcrumb-options">
<a href="#" title="Backup">
<i class="fa fa-cloud-upload"></i>
</a><a href="#" title="Bookmark">
<i class="fa fa-bookmark"></i>
</a><a href="#" title="Logout">
<i class="fa fa-sign-out"></i>
</a>
</div>
</div>
<div class="layout-content-container">
<ui:insert name="content"/>
</div>
</div>
<ui:include src="footer.xhtml" />
<div class="layout-mask"></div>
</div>
</h:body>
</html>