Left menu as overlay.

[TimTim]

Dear all

I have the following request, would be nice to get your advice on that.
Is it possible somehow to customize the left side menu to show it as overlay to create more space for the content on the page? Same way as it is done in Modena theme.
Its actually already behaves like that on smaller screens and phone displays (plus button on top menu that hide/show menu), so thought it should not be that difficult.

Thank you in advance

[cagatay.civici]

Check out Modena.

http://www.primefaces.org/modena/

[TimTim]

thanks for prompt reply, Optimus.

As i mentioned - i saw the way how the menu is implemented in Modena, like it and the question is: is there any way how to do the 'Modena way' menu in Rio via the customization without purchasing the Modena theme?

[mert.sincan]

I think you can change;
- in topbar.xhtml (remove 'ShowOnMobile' class)

Code: Select all

<a id="mobile-menu-button" class="Fright ripplelink Unselectable ShadowEffect"><i class="icon-add186"></i></a> 

- in rio-layout.less
Please use @media (min-width: 640px) instead of @media (min-width: 640px) and (max-width: 960px)

Code: Select all

/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) {
 .... Css ...
 }

[TimTim]

Many thanks, Aragorn! It works that way!
(minor update for those who is interested: second change was done in rio-layout.css, Rio v2.0)

[mert.sincan]

Glad to hear, thanks!

Also, I think you should change rio-layout.less. Because, it creates rio-layout.css

[TimTim]

Thank you!

[mert.sincan]

You're welcome

[mustafa.cataltepe]

I resolved this issue for myself by adding another media query in rio-layout.css because i did not want topbar icons hidden inside menu like in a smaller screen. I only added "Layout Menu Cover" and "Layout Portlets Cover" css from 640 to 960 part but removed padding from portlets cover.

Code: Select all

@media (min-width: 960px) {

/*Layout Menu Cover*/
#layout-menu-cover {
display:block;
height:100%;
position:fixed;
z-index:999;
border-bottom: solid1px #e0e0e0;
margin-left: -230px;
overflow:hidden;
 }
#layout-menu-cover.showmenu {
margin-left:0px;
}
.layout-menu{
margin-top: 57px;
}

/*Layout Portlets Cover*/
#layout-portlets-cover{
display:block;
margin-left:0px;
}

[mert.sincan]

Thanks @mustafa for your solution +1