Primefaces MegaMenu [closed]
want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 8 months ago .
improve this questionGood colleagues, I'm having a problem with the MegaMenu component of primefaces I would like the components to be visible to users more they are hidden behind the region central, so I'd like to bring forward. How can I do that? I tried to use an external css and calling more unfortunately did not work so I decided to use inline css also did not solve. Below I leave pictures
Menu Code
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:form>
<h3
style="font-size: 1.3em; margin: 0; margin-left: 2%; font-weight: 1.5; padding: 5px;"
align="center">Administrador</h3>
<p:menu style="border:none; width:95%;">
<p:menuitem icon="ui-icon-check" value="Estoque de produtos"
outcome="/pages/productos.xhtml" />
<p:menuitem icon="ui-icon-person" value="Funcionários"
outcome="/pages/funcionarios.xhtml" />
<p:menuitem icon="ui-icon-tag" value="Departamentos"
outcome="/pages/departamentos.xhtml" />
</p:menu>
<p:megaMenu orientation="#{MBIncludesBean.orientation}"
style="border:none;">
<p:submenu label=" Consultar ações">
<p:column>
<p:submenu label="Consultar Historiais">
<p:menuitem value="Historial de entradas"
outcome="/pages/entradaProductos.xhtml" />
<p:menuitem value="Historial de saídas"
outcome="/pages/saidaProductos.xhtml" />
<p:menuitem value="Historial de requisições"
outcome="/pages/requisicoes.xhtml" />
<p:menuitem value="Historial de produtos"
outcome="/pages/historialProducto.xhtml" />
<p:menuitem value="Historial de departamentos"
outcome="/pages/historialDepartamento.xhtml" />
<p:menuitem value="Historial de funcionários"
outcome="/pages/historialFuncionario.xhtml" />
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
</ui:composition>
CSS code
@charset "ISO-8859-1";
.ui-layout-west {
z-index: 20 !important;
overflow: visible !important;;
}
.ui-widget, .ui-widget .ui-widget {
font-size: 95% !important;
}
.ui-layout-west .ui-layout-unit-content {
overflow: visible !important;
}
Layout code
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title><ui:insert name="namePage">Layout do sistema</ui:insert></title>
<h:outputStylesheet library="css" name="style.css"/>
</h:head>
<h:body style="background: #f2f1f1;">
<p:growl id="msg" life="6000" />
<p:layout fullPage="true" style="border:none;">
<p:layoutUnit position="west" size="245" style="border:none;" >
<ui:insert name="menu" />
</p:layoutUnit>
<p:layoutUnit size="60" position="north" style="border:none; overflow:visible;">
<ui:insert name="cabecalho" />
</p:layoutUnit>
<p:layoutUnit position="center" style="border:none; ">
<ui:insert name="conteudo" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
1 answers
Ayrton as stated in the comment This is just a simple template to help you understand an html structure template that can solve your problem. It is basically done with position:relative in aside and position:absolute in section, with this you can control the z-index of menu and leave above the content and without this scrollbar that appears there, because aside does not need to have a width defined
I tried to save on CSS to make it easier to understand, and left the comments on code for you to better understand the points.
Notice that the menu now opens above the section next to it, but without giving a scroll bar and not interfering with anything in the content around it by having position:absolute
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
/* a barra lateral não tem largura definida e está com o z-index definito para sobrepor a section ao lado */
aside {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
/* a section sim tem largura definida em 75% da largura da tela e fica alinhada a direita pois tem um margin-left automático que empurra a section pra direita */
section {
position: relative;
height: 100%;
width: 75%;
margin-left: auto;
background-color: silver;
}
/* CSS apenas para ativar o menu e facilitar a visualização, vc não precisa desse código CSS no seu modelo. */
label {
user-select: none;
cursor: pointer;
display: inline-block;
padding: 8px;
border: 1px solid #000;
background-color: #fff;
transition: 500ms;
}
label:hover {
background-color: limegreen;
}
li{
display: inline-block;
background-color: red;
}
nav {
display: none;
}
[type="checkbox"] {
display: none;
}
#btn:checked + nav {
display: block;
}<aside>
<!-- o conteúdo da aside vai ser o seu menu e o restante das infor que precisa. -->
<label for="btn">menu</label>
<input type="checkbox" name="" id="btn">
<nav>
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
<li>item 05</li>
<li>item 06</li>
</ul>
</nav>
</aside>
<!-- aqui vem o conteúdo prencipal -->
<section>123</section>