Menu Side Bar

Post Reply
User avatar
Jarciano
Posts: 17
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

08 Jul 2017, 14:58

Hello,

I would like to know if it is possible to have two menu options in the Atlas, besides the standard conventional menu of thema, I would like to add the side bar menu as of thema paradise.
It would be possible?

Thank you.
--
Jarciano Silva
CEO - Chief Executive Officer
AJ Desenvolvimento | http://www.ajdesenvolvimento.com

User avatar
aragorn
Posts: 2643
Joined: 29 Jun 2013, 12:38

10 Jul 2017, 12:36

Atlas has two menu option; Horizontal menu(Default) and Popup Menu. Which Paradise menu mode do you want to use in the Atlas Layout?

User avatar
Jarciano
Posts: 17
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

16 Jul 2017, 19:55

Hello,

I would like to have and the possibility of the user to choose the Horizontal menu (default) or the Menu side bar (static menu) according to the selection of the image.

https://uploaddeimagens.com.br/imagens/ ... -25-png--2

https://uploaddeimagens.com.br/imagens/ ... -53-28-png


Thank.
Last edited by Jarciano on 16 Jul 2017, 19:59, edited 1 time in total.
--
Jarciano Silva
CEO - Chief Executive Officer
AJ Desenvolvimento | http://www.ajdesenvolvimento.com

User avatar
aragorn
Posts: 2643
Joined: 29 Jun 2013, 12:38

21 Jul 2017, 13:06

I think you can override the Atlas Popup menu css. Exp;

Code: Select all

<style type="text/css">
   @media(min-width: 641px) {
            body.PopupMenu #layout-menu-cover {
                left:-300px;
                display: block;
                height: 100%;
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                transition: all 0.5s ease;
            }
            body.PopupMenu #layout-menu-cover.active {
                max-height: none !important;
                height: 100%;
                left: 0px;
            }
            body.PopupMenu #layout-menu-cover.active + #layout-portlets-cover {
                padding-left: 320px;
            }
            body.PopupMenu #layout-portlets-cover {
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                transition: all 0.5s ease;
            }
            body.PopupMenu #layout-menu-cover {
                background-color: #ffffff;
            }
            body.PopupMenu #layout-menu > li > a:hover, 
            body.PopupMenu #layout-menu > li > a:active, 
            body.PopupMenu #layout-menu > li > a.active-menu,
            body.PopupMenu.LeadenTopbar #layout-menu-cover a.active-menu {
                background-color: #3E5E66;
                color: rgba(255, 255, 255, 0.8);
            }
      }
 </style>

User avatar
Jarciano
Posts: 17
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

24 Jul 2017, 15:02

Hello,

Sorry for not knowing where to make this change, could you give me an example of where to add the CSS code to work?
--
Jarciano Silva
CEO - Chief Executive Officer
AJ Desenvolvimento | http://www.ajdesenvolvimento.com

User avatar
aragorn
Posts: 2643
Joined: 29 Jun 2013, 12:38

24 Jul 2017, 16:09

You can add the above codes into h:head tag in template.xhtml. Also, for static menu, please add 'PopupMenu' class to h:body. I overrode this class.

User avatar
Jarciano
Posts: 17
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

24 Jul 2017, 20:06

Many thanks, but the side menu was not fixed, and besides how do I switch between a standard menu with the side?

The menu in the mobile version was not like in Paradise, how do I leave the mobile version as the version for better navigation?
--
Jarciano Silva
CEO - Chief Executive Officer
AJ Desenvolvimento | http://www.ajdesenvolvimento.com

User avatar
aragorn
Posts: 2643
Joined: 29 Jun 2013, 12:38

31 Jul 2017, 08:00

Many thanks, but the side menu was not fixed,

- Could you please attach a screenshot?
and besides how do I switch between a standard menu with the side?
- You can change the class of h:body or use javascript;
function changeMenu() {
$('body').removeClass('PopupMenu');
}
The menu in the mobile version was not like in Paradise, how do I leave the mobile version as the version for better navigation?
- You need to override css style. For mobile, you can use @media queries; https://responsivedesign.is/develop/bro ... eakpoints/

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests