从停靠栏中移动折叠的菜单按钮 [英] Move collapsed menu button from the dockbar

问题描述

我需要为未登录的访客隐藏扩展坞.我通过创建使用welcome-theme作为父主题的自定义主题以及以下代码片段来做到这一点:

I need to hide dockbar for non logged in guests. I did that by creating custom theme that uses welcome-theme as a parent, and the following snippet:

#if($is_signed_in)
    #dockbar()
#end

在主题的模板\ portal_normal.vm中.

in theme's templates\portal_normal.vm.

这带来了另一个问题-当页面重新排序以适合移动屏幕时，菜单折叠为停靠栏中隐藏的按钮.我很想让它在其他地方折叠，只是不被隐藏-例如，在小徽标/网站标题旁边，或作为第一个面包屑项目.

This presents another problem - when page reorders to fit a mobile screen, menu collapses to a button in the dockbar which is hidden. I would love to have it collapse somewhere else, just that it isn't hidden - for example next to the small logo / site title, or as a first breadcrumbs item.

操作方法或从何处开始.感谢您的帮助.

How to do it, or where to begin. I appreciate any help.

推荐答案

默认情况下，电话和平板电脑视口的菜单会折叠.您可以创建自己的按钮以在手机/平板电脑视口中打开/关闭折叠菜单.检查以下简化示例:

Menu collapses by default for phone and tablet viewports. You can create your own button to open/close collapsed menu in phone/tablet viewport. Check following simplified example:

主题速度模板:

#if(!$is_signed_in)
<div id="mainNavigationToggle" class="btn btn-secondary">
    <i class="icon-reorder"></i>
</div>
#end

主题 main.js :

AUI().ready(function (A) {
        var navigationToggleBtn = A.one('#mainNavigationToggle'); // get our toggle button
        var navigationUl = A.one(Liferay.Data.NAV_SELECTOR); // get default navigation ul element
        if (navigationToggleBtn && navigationUl) { // do nothing when toggle button not present (user not signed in) or if navigation is not present
            navigationToggleBtn.on( // otherwise assign simple function that'll toggle 'open' menu class on default navigation which will cause it to open, same for menu toggle button
                'click',
                function (event) {
                    navigationToggleBtn.toggleClass('open');
                    navigationUl.toggleClass('open');
                }
            );
        }
    }
);

主题 custom.css :

#mainNavigationToggle {
  display: none; /* hide by default */
  @include respond-to(phone, tablet) {
    display: block; /* show only for phone and tablet viewports */
  }
}

这篇关于从停靠栏中移动折叠的菜单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！