MegaMenu/SubMenu on the TopBar

Locked
guibernardi
Posts: 16
Joined: 19 Aug 2015, 15:16

05 Aug 2016, 15:21

Hello everyone,

How can I create a MegaMenu or a simple menu list in the topbar? I mean... like the menu above here which shows my username and when I pass the mouse it shows the options.

I tried to use megaMenu and li and ul, but it's doesn't work and megaMenu expanded and destroyed my topbar, so I think I need to change the CSS class or maybe try with other component.

Could you guys help me?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

09 Aug 2016, 11:12

I think you want something like the following screenshots. Right?

Image
Image

Test Code;

Code: Select all

#menu-resize-btn {
    float: left;
    margin-right: 50px;
}
#layout-topbar-right .ui-menubar {
    float: left;
    width: 70%;
    margin-top: 3px;
}
#layout-topbar-right .topbar-link img {
    margin: 1.6rem 1.6rem 0;
}

Code: Select all

...
<div id="layout-topbar-right">

    <a id="menu-resize-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-resize-btn-icon.svg" id="menu-resize-btn" library="olympos-layout" /></a>
    <a id="mobile-menu-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-btn-icon.svg" id="menu-btn-icon" library="olympos-layout" /></a>

    <h:form>
        <p:megaMenu orientation="horizontal">
            ...
        </p:megaMenu>
    </h:form>

    <a id="" class="topbar-link Animated03 Fright"><i class="icon-user7"></i></a>
    <a id="" class="topbar-link Animated03 Fright"><i class="icon-finish3"></i></a>

    <div id="search-bar">
        <input type="text" placeholder="Search"></input>
        <a id="search-btn" class="Animated03"><i class="icon-zoom64"></i></a>
    </div>

</div>
..
If right, I can attach a more detailed css. (Exp; on Table mode or Mobile mode)

guibernardi
Posts: 16
Joined: 19 Aug 2015, 15:16

09 Aug 2016, 13:30

aragorn wrote:I think you want something like the following screenshots. Right?

Image
Image

Test Code;

Code: Select all

#menu-resize-btn {
    float: left;
    margin-right: 50px;
}
#layout-topbar-right .ui-menubar {
    float: left;
    width: 70%;
    margin-top: 3px;
}
#layout-topbar-right .topbar-link img {
    margin: 1.6rem 1.6rem 0;
}

Code: Select all

...
<div id="layout-topbar-right">

    <a id="menu-resize-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-resize-btn-icon.svg" id="menu-resize-btn" library="olympos-layout" /></a>
    <a id="mobile-menu-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-btn-icon.svg" id="menu-btn-icon" library="olympos-layout" /></a>

    <h:form>
        <p:megaMenu orientation="horizontal">
            ...
        </p:megaMenu>
    </h:form>

    <a id="" class="topbar-link Animated03 Fright"><i class="icon-user7"></i></a>
    <a id="" class="topbar-link Animated03 Fright"><i class="icon-finish3"></i></a>

    <div id="search-bar">
        <input type="text" placeholder="Search"></input>
        <a id="search-btn" class="Animated03"><i class="icon-zoom64"></i></a>
    </div>

</div>
..
If right, I can attach a more detailed css. (Exp; on Table mode or Mobile mode)
Not really, I want something like Venture Theme: http://www.primefaces.org/venture/ when you click on the buttons on the top bar it displays an submenu.

Image

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Aug 2016, 13:49

I overrode js and css of layout for you. Please try;
// JS codes;

Code: Select all

<script type="text/javascript">
//<![CDATA[
 	PrimeFaces.widget.Olympos.prototype.bindEvents = function() {
        var $this = this;
        
        this.topbarMenu = $('#topbar-menu');
        this.rightMobileBtn = $('#mobile-right-menu-btn');
        this.topbarMenuClick = false;

        this.equalizeTabMenuHeights();
        $(".nano").nanoScroller({flash: true});
        
        // open layout tab menu sub menus
        this.layoutTabmenu.find('a').on('click', function () {
            $this.layoutTabmenu.find('li a').removeClass('active');
            $(this).addClass('active');
            $this.layoutSubmenus.removeClass('active');
            $('#' + String($(this).attr('rel'))).addClass('active');

            $this.equalizeTabMenuHeights();
        });
        
        // change menu mode from expanded to slim
        this.menuResizeButton.on('click',function() {
            if($this.body.hasClass('SlimMenu')){
                $(this).removeClass('active');
                $this.body.removeClass('SlimMenu');
            }
            else{
                $(this).addClass('active');
                $this.body.addClass('SlimMenu');
            }
        });
       
        // show and hide popup main menu when click a menu button
        this.menuPopupButton.off('click.popupMenubutton').on('click.popupMenubutton', function(e){
            $this.layoutMenuClick = true;
            
            if($this.menuWrapper.hasClass('active')) {
                $(this).removeClass('active');
                $this.menuWrapper.removeClass('active');
            }
            else {
                $(this).addClass('active');
                $this.menuWrapper.addClass('active');
            }
            
            if($this.topbarMenu.is(':visible')) {
                $this.topbarMenu.slideUp('400', function() {
                    $(this).attr('style', '');
                });
                
                $this.rightMobileBtn.removeClass('active');
            }
            
            e.preventDefault();
        });
        
        
        this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent(),
            parentSubmenu = menuitem.parent('ul').parent('li').closest('ul');

            if(parentSubmenu.attr('id') == "layout-menu") {
                $this.resetActiveMenuitems();
            }

            if(menuitem.hasClass('active-menu-parent')) {
                menuitem.removeClass('active-menu-parent');
                menuitemLink.removeClass('active-menu').next('ul').removeClass('active-menu');
                $this.removeMenuitem(menuitem.attr('id'));
            }
            else {
                var activeSibling = menuitem.siblings('.active-menu-parent');
                if(activeSibling.length) {
                    activeSibling.removeClass('active-menu-parent');
                    $this.removeMenuitem(activeSibling.attr('id'));

                    activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu');
                    activeSibling.find('li.active-menu-parent').each(function() {
                        var menuitem = $(this);
                        menuitem.removeClass('active-menu-parent');
                        $this.removeMenuitem(menuitem.attr('id'));
                    });
                }

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }

            if(menuitemLink.next().is('ul')) {
                e.preventDefault();
            }
            
            $this.saveMenuState();
            
            $this.equalizeTabMenuHeights();
        });
        
        this.menuWrapper.on('click', function() {
            $this.layoutMenuClick = true;
        });
        
        this.clickNS = 'click.' + this.id;
        $(document.body).off(this.clickNS).on(this.clickNS, function (e) {
            var isPopup = ($this.body.hasClass('PopupMenu') || document.documentElement.clientWidth <= 960);
            if(!$this.layoutMenuClick && isPopup) {
                $this.menuPopupButton.removeClass('active');
                $this.menuWrapper.removeClass('active');
            }
            
            if(!$this.topbarMenuClick) {
                $this.topbarMenu.removeClass('active');
                $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                $this.topMenuActive = false;
            }

            $this.topbarMenuClick = false;
            $this.layoutMenuClick = false;
        });
        
        this.topbarMenu.on('click', function() {
            $this.topbarMenuClick = true;
        });
        
        //topbar
        this.topbarMenu.find('a').click(function (e) {
            var link = $(this),
            submenu = link.next('ul');
            $this.topbarMenuClick = true;
            
            if (submenu.length) {
                if (submenu.hasClass('active-menu')) {
                    submenu.removeClass('active-menu');
                    link.removeClass('active-menu');
                    $this.topMenuActive = false;
                } else {
                    $this.topbarMenu.find('> li > ul.active-menu').removeClass('active-menu').prev('a').removeClass('active-menu');
                    link.addClass('active-menu').next('ul').addClass('active-menu');
                    $this.topMenuActive = true;
                }
            } else {
                if ($(e.target).is(':not(:input)')) {
                    $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                    $this.topMenuActive = false;
                }
            }
            
            var href = link.attr('href');
            if(href && href.trim() == "#") {
                e.preventDefault();
            }
        })
        .on('mouseenter', function () {
            var link = $(this);

            if (link.parent().parent().is($this.topbarMenu) && $this.topMenuActive && document.documentElement.clientWidth > 480) {
                var submenu = link.next('ul');

                $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                link.addClass('active-menu');

                if (submenu.length) {
                    submenu.addClass('active-menu');
                }
            }
        });

        this.rightMobileBtn.on('click', function() {
            if($this.topbarMenu.is(':visible')) {
                $this.topbarMenu.slideUp();
                $(this).removeClass('active');
            }
            else {
                $this.topbarMenu.slideDown();
                $(this).addClass('active');
            }
        });
    };
//]]>
   </script>
//CSS codes;

Code: Select all

<style type="text/css">  
#topbar-menu {
    float:right; 
    margin: 0; 
    padding: 0; 
}
        
#topbar-menu > li {
    float: left;
}
            
#topbar-menu > li ul.active-menu {
    height: auto;
    margin-left: -200px;
}

#topbar-menu > li ul {
    background-color: #ffffff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 250px;
    top:5rem;
}
#topbar-menu > li a{
    color: #567a84;
}

#topbar-menu > li > ul li a {
    float: none;
    display: block;
    padding: 13px;
    cursor: pointer;
    color: #567a84;
    font-size: 13px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#topbar-menu > li > ul li a i {
    color: #567a84;
}

#topbar-menu > li > ul li a:hover,
#topbar-menu > li > ul li a.active-menu {
    background-color: #f2f2f2;
}

#topbar-menu > li > a:hover, #topbar-menu > li > a.active-menu {
    background-color: rgba(255,255,255,0.1);
}

#mobile-right-menu-btn {
    display: none;
}

.PadWithBorder10 {
    border: 10px solid transparent;
}

.Fright {
    float: right;
}

.tb-menu-text {
    display: none;
}

.activeRightMenu {
    display: block;
}

#topbar-menu > li a .bubble {
    background-color: #ef3f61;
    border-radius: 30px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    margin: 0.4rem 0 0 -1rem;
    padding: 0.3rem 0.4rem;
    position: absolute;
}

#topbar-menu .topbar-link {
    background-color: transparent;
}

@media (max-width: 960px) {
    #topbar-menu > li ul {
        top: 9.5rem;
    }
}
@media (max-width: 480px) {
    #mobile-right-menu-btn {
        display: block;
        float: right;
    }
    
    #topbar-menu {
        float: none;
        display: none;
        position: absolute;
        right: 0;
        width: 200px;
    }
    
    #topbar-menu > li {
        float: none;
        background-color: #282828;
    }
    
    #topbar-menu .topbar-link {
        width: 100%;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.7);
        text-align: initial;
    }
    
    .tb-menu-text {
        display: inline-block;
    }
    
    .topbar-link i {
        padding: 0 10px;
    }
    
    #topbar-menu > li a .bubble {
        margin-left: -7rem;
    }
    
    #topbar-menu > li ul {
        position: relative;
        top: 0;
        width: auto;
    }
    
    #topbar-menu > li ul.active-menu {
        margin-left: 0px;
    }
}
</style>
topbar.xhtml

Code: Select all

...
<div id="layout-topbar-right">

    <a id="menu-resize-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-resize-btn-icon.svg" id="menu-resize-btn" library="olympos-layout" /></a>
    <a id="mobile-menu-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-btn-icon.svg" id="menu-btn-icon" library="olympos-layout" /></a>

    <!-- ***************ADDED****************** -->
    <a id="mobile-right-menu-btn" class="topbar-link Animated03"><i class="fa fa-ellipsis-v"/></a>
    <ul id="topbar-menu">
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-archive24"></i><span class="tb-menu-text"> Archive</span></a>
            <ul>
                <li><a href="#"><i class="icon-schoolboy1 Fs15 Blue Fright"></i> <span>Clark Davenport</span><br/><span class="Fs12">Hi, How is going ?</span></a></li>
                <li><a href="#"><i class="icon-schoolboy1 Fs15 Red Fright"></i> <span>Jack Sparrow</span><br/><span class="Fs12">Test Results</span></a></li>
                <li><a href="#"><i class="icon-schoolboy1 Fs15 Fright"></i> <span>Jack Sparrow</span><br/><span class="Fs12">Test Results</span></a></li>
                <li><a href="#"><i class="icon-schoolboy1 Purple Fs15 Fright"></i> <span>George Flinn</span><br/><span class="Fs12">MapX Test Cases</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-flag66"></i><span class="tb-menu-text"> Checkpoints</span></a>
            <ul>
                <li><a href="#"><i class="icon-sunny15 Fs15 Fleft MarRight10"></i> <span> Brightness</span></a></li>
                <li><a href="#"><i class="icon-user7 Fs15 Fleft MarRight10"></i> <span> Accounts</span></a></li>
                <li><a href="#"><i class="icon-cloud291 Fs15 Fleft MarRight10"></i> <span> Attachments</span></a></li>
                <li><a href="#"><i class="icon-padlock27 Fs15 Fleft MarRight10"></i> <span> Log Out System</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-bell42"></i><span class="tb-menu-text"> Alerts</span><span class="bubble animated rubberBand">13</span></a>
            <ul>
                <li><a href="#"><i class="icon-done2 Fs20 Blue Fright"></i> <span class="Blue">Reports Exported</span><br/><span class="Fs12">Recorded To File System</span></a></li>
                <li><a href="#"><i class="icon-done2 Fs20 Red Fright"></i> <span class="Red">Bug Alert</span><br/><span class="Fs12">SportX Tools</span></a></li>
                <li><a href="#"><i class="icon-done2 Fs20 Red Fright"></i> <span class="Red">Bug Alert</span><br/><span class="Fs12">MapX Tools</span></a></li>
                <li><a href="#"><i class="icon-done2 Fs20 Orange Fright"></i> <span class="Orange">Download Completed</span><br/><span class="Fs12">SportX Tools</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-first32"></i><span class="tb-menu-text"> Search Page</span></a>
            <ul>
                <li>
                    <span class="PadWithBorder10 DispBlock">
                        <div style="position: relative;">
                            <p:inputText placeholder="Search here" style="width: 70%;"/> 
                            <p:button icon="fa fa-search White" styleClass="Fright" style="position: absolute; top: 0; right: -4px; height: 100%"/>
                        </div>
                    </span>
                </li>
            </ul>
        </li>
        <li><a href="#" class="topbar-link Animated03"><i class="icon-user7"></i><span class="tb-menu-text"> Welcome, Skywalker</span></a></li>
    </ul>

    <div id="search-bar">
        <input type="text" placeholder="Search"></input>
        <a id="search-btn" class="Animated03"><i class="icon-zoom64"></i></a>
    </div>

</div>
...
Screenshots;
Image

Image

On Mobile
Image

guibernardi
Posts: 16
Joined: 19 Aug 2015, 15:16

15 Aug 2016, 16:42

aragorn wrote:I overrode js and css of layout for you. Please try;
// JS codes;

Code: Select all

<script type="text/javascript">
//<![CDATA[
 	PrimeFaces.widget.Olympos.prototype.bindEvents = function() {
        var $this = this;
        
        this.topbarMenu = $('#topbar-menu');
        this.rightMobileBtn = $('#mobile-right-menu-btn');
        this.topbarMenuClick = false;

        this.equalizeTabMenuHeights();
        $(".nano").nanoScroller({flash: true});
        
        // open layout tab menu sub menus
        this.layoutTabmenu.find('a').on('click', function () {
            $this.layoutTabmenu.find('li a').removeClass('active');
            $(this).addClass('active');
            $this.layoutSubmenus.removeClass('active');
            $('#' + String($(this).attr('rel'))).addClass('active');

            $this.equalizeTabMenuHeights();
        });
        
        // change menu mode from expanded to slim
        this.menuResizeButton.on('click',function() {
            if($this.body.hasClass('SlimMenu')){
                $(this).removeClass('active');
                $this.body.removeClass('SlimMenu');
            }
            else{
                $(this).addClass('active');
                $this.body.addClass('SlimMenu');
            }
        });
       
        // show and hide popup main menu when click a menu button
        this.menuPopupButton.off('click.popupMenubutton').on('click.popupMenubutton', function(e){
            $this.layoutMenuClick = true;
            
            if($this.menuWrapper.hasClass('active')) {
                $(this).removeClass('active');
                $this.menuWrapper.removeClass('active');
            }
            else {
                $(this).addClass('active');
                $this.menuWrapper.addClass('active');
            }
            
            if($this.topbarMenu.is(':visible')) {
                $this.topbarMenu.slideUp('400', function() {
                    $(this).attr('style', '');
                });
                
                $this.rightMobileBtn.removeClass('active');
            }
            
            e.preventDefault();
        });
        
        
        this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent(),
            parentSubmenu = menuitem.parent('ul').parent('li').closest('ul');

            if(parentSubmenu.attr('id') == "layout-menu") {
                $this.resetActiveMenuitems();
            }

            if(menuitem.hasClass('active-menu-parent')) {
                menuitem.removeClass('active-menu-parent');
                menuitemLink.removeClass('active-menu').next('ul').removeClass('active-menu');
                $this.removeMenuitem(menuitem.attr('id'));
            }
            else {
                var activeSibling = menuitem.siblings('.active-menu-parent');
                if(activeSibling.length) {
                    activeSibling.removeClass('active-menu-parent');
                    $this.removeMenuitem(activeSibling.attr('id'));

                    activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu');
                    activeSibling.find('li.active-menu-parent').each(function() {
                        var menuitem = $(this);
                        menuitem.removeClass('active-menu-parent');
                        $this.removeMenuitem(menuitem.attr('id'));
                    });
                }

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }

            if(menuitemLink.next().is('ul')) {
                e.preventDefault();
            }
            
            $this.saveMenuState();
            
            $this.equalizeTabMenuHeights();
        });
        
        this.menuWrapper.on('click', function() {
            $this.layoutMenuClick = true;
        });
        
        this.clickNS = 'click.' + this.id;
        $(document.body).off(this.clickNS).on(this.clickNS, function (e) {
            var isPopup = ($this.body.hasClass('PopupMenu') || document.documentElement.clientWidth <= 960);
            if(!$this.layoutMenuClick && isPopup) {
                $this.menuPopupButton.removeClass('active');
                $this.menuWrapper.removeClass('active');
            }
            
            if(!$this.topbarMenuClick) {
                $this.topbarMenu.removeClass('active');
                $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                $this.topMenuActive = false;
            }

            $this.topbarMenuClick = false;
            $this.layoutMenuClick = false;
        });
        
        this.topbarMenu.on('click', function() {
            $this.topbarMenuClick = true;
        });
        
        //topbar
        this.topbarMenu.find('a').click(function (e) {
            var link = $(this),
            submenu = link.next('ul');
            $this.topbarMenuClick = true;
            
            if (submenu.length) {
                if (submenu.hasClass('active-menu')) {
                    submenu.removeClass('active-menu');
                    link.removeClass('active-menu');
                    $this.topMenuActive = false;
                } else {
                    $this.topbarMenu.find('> li > ul.active-menu').removeClass('active-menu').prev('a').removeClass('active-menu');
                    link.addClass('active-menu').next('ul').addClass('active-menu');
                    $this.topMenuActive = true;
                }
            } else {
                if ($(e.target).is(':not(:input)')) {
                    $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                    $this.topMenuActive = false;
                }
            }
            
            var href = link.attr('href');
            if(href && href.trim() == "#") {
                e.preventDefault();
            }
        })
        .on('mouseenter', function () {
            var link = $(this);

            if (link.parent().parent().is($this.topbarMenu) && $this.topMenuActive && document.documentElement.clientWidth > 480) {
                var submenu = link.next('ul');

                $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                link.addClass('active-menu');

                if (submenu.length) {
                    submenu.addClass('active-menu');
                }
            }
        });

        this.rightMobileBtn.on('click', function() {
            if($this.topbarMenu.is(':visible')) {
                $this.topbarMenu.slideUp();
                $(this).removeClass('active');
            }
            else {
                $this.topbarMenu.slideDown();
                $(this).addClass('active');
            }
        });
    };
//]]>
   </script>
//CSS codes;

Code: Select all

<style type="text/css">  
#topbar-menu {
    float:right; 
    margin: 0; 
    padding: 0; 
}
        
#topbar-menu > li {
    float: left;
}
            
#topbar-menu > li ul.active-menu {
    height: auto;
    margin-left: -200px;
}

#topbar-menu > li ul {
    background-color: #ffffff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 250px;
    top:5rem;
}
#topbar-menu > li a{
    color: #567a84;
}

#topbar-menu > li > ul li a {
    float: none;
    display: block;
    padding: 13px;
    cursor: pointer;
    color: #567a84;
    font-size: 13px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#topbar-menu > li > ul li a i {
    color: #567a84;
}

#topbar-menu > li > ul li a:hover,
#topbar-menu > li > ul li a.active-menu {
    background-color: #f2f2f2;
}

#topbar-menu > li > a:hover, #topbar-menu > li > a.active-menu {
    background-color: rgba(255,255,255,0.1);
}

#mobile-right-menu-btn {
    display: none;
}

.PadWithBorder10 {
    border: 10px solid transparent;
}

.Fright {
    float: right;
}

.tb-menu-text {
    display: none;
}

.activeRightMenu {
    display: block;
}

#topbar-menu > li a .bubble {
    background-color: #ef3f61;
    border-radius: 30px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    margin: 0.4rem 0 0 -1rem;
    padding: 0.3rem 0.4rem;
    position: absolute;
}

#topbar-menu .topbar-link {
    background-color: transparent;
}

@media (max-width: 960px) {
    #topbar-menu > li ul {
        top: 9.5rem;
    }
}
@media (max-width: 480px) {
    #mobile-right-menu-btn {
        display: block;
        float: right;
    }
    
    #topbar-menu {
        float: none;
        display: none;
        position: absolute;
        right: 0;
        width: 200px;
    }
    
    #topbar-menu > li {
        float: none;
        background-color: #282828;
    }
    
    #topbar-menu .topbar-link {
        width: 100%;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.7);
        text-align: initial;
    }
    
    .tb-menu-text {
        display: inline-block;
    }
    
    .topbar-link i {
        padding: 0 10px;
    }
    
    #topbar-menu > li a .bubble {
        margin-left: -7rem;
    }
    
    #topbar-menu > li ul {
        position: relative;
        top: 0;
        width: auto;
    }
    
    #topbar-menu > li ul.active-menu {
        margin-left: 0px;
    }
}
</style>
topbar.xhtml

Code: Select all

...
<div id="layout-topbar-right">

    <a id="menu-resize-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-resize-btn-icon.svg" id="menu-resize-btn" library="olympos-layout" /></a>
    <a id="mobile-menu-btn" class="topbar-link Animated03"><h:graphicImage name="images/menu-btn-icon.svg" id="menu-btn-icon" library="olympos-layout" /></a>

    <!-- ***************ADDED****************** -->
    <a id="mobile-right-menu-btn" class="topbar-link Animated03"><i class="fa fa-ellipsis-v"/></a>
    <ul id="topbar-menu">
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-archive24"></i><span class="tb-menu-text"> Archive</span></a>
            <ul>
                <li><a href="#"><i class="icon-schoolboy1 Fs15 Blue Fright"></i> <span>Clark Davenport</span><br/><span class="Fs12">Hi, How is going ?</span></a></li>
                <li><a href="#"><i class="icon-schoolboy1 Fs15 Red Fright"></i> <span>Jack Sparrow</span><br/><span class="Fs12">Test Results</span></a></li>
                <li><a href="#"><i class="icon-schoolboy1 Fs15 Fright"></i> <span>Jack Sparrow</span><br/><span class="Fs12">Test Results</span></a></li>
                <li><a href="#"><i class="icon-schoolboy1 Purple Fs15 Fright"></i> <span>George Flinn</span><br/><span class="Fs12">MapX Test Cases</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-flag66"></i><span class="tb-menu-text"> Checkpoints</span></a>
            <ul>
                <li><a href="#"><i class="icon-sunny15 Fs15 Fleft MarRight10"></i> <span> Brightness</span></a></li>
                <li><a href="#"><i class="icon-user7 Fs15 Fleft MarRight10"></i> <span> Accounts</span></a></li>
                <li><a href="#"><i class="icon-cloud291 Fs15 Fleft MarRight10"></i> <span> Attachments</span></a></li>
                <li><a href="#"><i class="icon-padlock27 Fs15 Fleft MarRight10"></i> <span> Log Out System</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-bell42"></i><span class="tb-menu-text"> Alerts</span><span class="bubble animated rubberBand">13</span></a>
            <ul>
                <li><a href="#"><i class="icon-done2 Fs20 Blue Fright"></i> <span class="Blue">Reports Exported</span><br/><span class="Fs12">Recorded To File System</span></a></li>
                <li><a href="#"><i class="icon-done2 Fs20 Red Fright"></i> <span class="Red">Bug Alert</span><br/><span class="Fs12">SportX Tools</span></a></li>
                <li><a href="#"><i class="icon-done2 Fs20 Red Fright"></i> <span class="Red">Bug Alert</span><br/><span class="Fs12">MapX Tools</span></a></li>
                <li><a href="#"><i class="icon-done2 Fs20 Orange Fright"></i> <span class="Orange">Download Completed</span><br/><span class="Fs12">SportX Tools</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="topbar-link Animated03"><i class="icon-first32"></i><span class="tb-menu-text"> Search Page</span></a>
            <ul>
                <li>
                    <span class="PadWithBorder10 DispBlock">
                        <div style="position: relative;">
                            <p:inputText placeholder="Search here" style="width: 70%;"/> 
                            <p:button icon="fa fa-search White" styleClass="Fright" style="position: absolute; top: 0; right: -4px; height: 100%"/>
                        </div>
                    </span>
                </li>
            </ul>
        </li>
        <li><a href="#" class="topbar-link Animated03"><i class="icon-user7"></i><span class="tb-menu-text"> Welcome, Skywalker</span></a></li>
    </ul>

    <div id="search-bar">
        <input type="text" placeholder="Search"></input>
        <a id="search-btn" class="Animated03"><i class="icon-zoom64"></i></a>
    </div>

</div>
...
Screenshots;
Image

Image

On Mobile
Image
Aragorn, thanks your attention.

I tried as your example, but I think is missing something.

The line in js code: PrimeFaces.widget.Olympos.prototype.bindEvents = function() { isn't working.

Olympos variable is not defined, so the console displays:

Uncaught TypeError: Cannot read property 'prototype' of undefined

Do I need to set something in the js base code?

Thanks in advance.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 Aug 2016, 10:00

Which olympos version are you using? Please try with new version.

guibernardi
Posts: 16
Joined: 19 Aug 2015, 15:16

16 Aug 2016, 12:58

aragorn wrote:Which olympos version are you using? Please try with new version.
I'm using 1.0 version.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 Aug 2016, 13:12

Please use Olympos.bindEvents instead of PrimeFaces.widget.Olympos.prototype.bindEvents.

guibernardi
Posts: 16
Joined: 19 Aug 2015, 15:16

16 Aug 2016, 13:19

aragorn wrote:Please use Olympos.bindEvents instead of PrimeFaces.widget.Olympos.prototype.bindEvents.
Works perfectly! Thank you so much!

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 Aug 2016, 14:27

Glad to hear, thanks for the update!

Locked

Return to “Olympos”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest