drop down menues for top bar

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

31 Jan 2016, 19:25

Hi,

I've bought the Atlas layout and themes.

But i have a question. Is it possible to add drop down to the topbar menu like in sentinel?

I've tried several possibilities but they all destroy the layout.

It need not pop up on mouse over. Clicking the menu item is perfect. I especially want a drop down menu on the user icon with' my profile' and 'logout' menu items.

In the source code for the top menu there seems to be some text for the menu items. but the text is not showing. Is it an error?

/
Kim Gabrielsen
Primefaces 6.2 / Glassfish 5 / Payara 5.182

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

03 Feb 2016, 10:04

I will work on this issue and get back to you. I need to override css and layout.js.

kyriv
Posts: 8
Joined: 29 Feb 2016, 21:10

09 Mar 2016, 17:31

Kim, the text for the topbar items only shows up on smaller devices. If you resize your browser to a "mobile" width then the text will appear. I believe this is how it was designed.

I would also like to extend a request to support drop down items for top bar icons. This would be great when incorporating a "profile" submenu, and language selections.

Thanks for the great work.

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

08 Apr 2016, 00:18

Hi,
is there an update on this issue?

I would really like to see it implemented. it would complete a super cool theme/layout.

/
Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

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

10 Apr 2016, 21:40

I overrode CSS and JS codes. Please try with;

- CSS

Code: Select all

<style type="text/css">
            
#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 {
    color: #567a84;
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 15px;
    transition: all 0.3s ease 0s;
    float: none;
}
#topbar-menu > li > ul li a {
    display: block;
    padding: 15px;
    cursor: pointer;
    color: #567a84;
    font-weight: 500;
    font-size: 14px;
    -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);
}

@media (min-width:480px) and (max-width: 640px) { 
    #topbar-menu {
        height: 300px !important;
        overflow-x: hidden;
        overflow-y: auto;
        width: 210px;
    } 
    #topbar-menu > li {
        width: 200px;
        display: block;
        height: auto;
    }
    #topbar-menu > li > a {
        display: block;
        padding: 20px 15px;
        cursor: pointer;
    }
    #topbar-menu > li > a > i {
        float: left;
        margin-right: 5px;
    }
    #topbar-menu > li > a > span {
        display: inline-block;
        float: left;
        margin-top: 2px;
    }
    #topbar-menu > li ul {
        width: 200px;
        overflow: hidden;
        position: inherit;
        height: 0px;
        padding: 0px;
        margin: 0px !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    #topbar-menu > li ul.active-menu {
        height: auto;
        background-color: #F9F9F9;
    }
    
    #topbar-menu > li > a:hover, #topbar-menu > li > a.active-menu {
        background-color: #f2f2f2;
    }
}

@media (max-width: 480px) {
    #topbar-menu {
        height: 300px !important;
        overflow-x: hidden;
        overflow-y: auto;
        width: 210px;
    } 
    #topbar-menu > li {
        width: 200px;
        display: block;
        height: auto;
    }
    #topbar-menu > li > a {
        display: block;
        padding: 20px 15px;
        cursor: pointer;
    }
    #topbar-menu > li > a > i {
        font-size: 20px;
        float: left;
        margin-right: 5px;
    }
    #topbar-menu > li > a > span {
        display: inline-block;
        float: left;
        margin-top: 2px;
    }
    #topbar-menu > li ul {
        width: 200px;
        overflow: hidden;
        position: inherit;
        height: 0px;
        padding: 0px;
        margin: 0px !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    #topbar-menu > li ul.active-menu {
        height: auto;
        background-color: #F9F9F9;
    }
    #topbar-menu > li > a:hover, #topbar-menu > li > a.active-menu {
        background-color: #f2f2f2;
    }
}

.PadWithBorder10 {
    border: 10px solid transparent;
}
            
</style>
- JS

Code: Select all

<script type="text/javascript">
     //<![CDATA[
Atlas.bindEvents = function () {
    var $this = this;
    this.firstActiveMenu = null;

    this.menuButton.on('click', function () {
        $this.menuButtonClick = true;

        if ($this.menuWrapper.hasClass('active')) {
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
        } else {
            $this.menuButton.addClass('active');
            $this.menuWrapper.addClass('active');
            $this.topbarMenu.removeClass('active');
            $this.topmenuButton.removeClass('active');
        }
    });

    this.topmenuButton.on('click', function () {
        $this.topmenuButtonClick = true;

        if ($this.topbarMenu.hasClass('active')) {
            $this.topbarMenu.removeClass('active');
            $this.topmenuButton.removeClass('active');
        } else {
            $this.topbarMenu.addClass('active');
            $this.topmenuButton.addClass('active');
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
        }
    });

    this.menulinks.on('click', function (e) {
        var menuitemLink = $(this),
                menuitem = menuitemLink.parent();

        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'));
            $this.menubarActive = false;
        } else {
            var activeSiblings = $this.findActiveSiblings(menuitem);
            for (var i = 0; i < activeSiblings.length; i++) {
                var activeSibling = activeSiblings[i];
                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'));
            $this.menubarActive = true;
        }

        if (menuitemLink.next().is('ul')) {
            e.preventDefault();
        } else {
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
        }

        if (!$this.isPopupMenu) {
            $this.firstActiveMenu = $this.menu.children('li.active-menu-parent');
            $this.removeMenuitem($this.firstActiveMenu.attr('id'));
        }

        $this.saveMenuState();
    })
    .on('mouseenter', function () {
        if ($('body').hasClass('PopupMenu')) {
            return;
        }

        var menuitemLink = $(this),
                menuitem = menuitemLink.parent();

        if ($this.menubarActive && document.documentElement.clientWidth > 960 && menuitem.closest('ul').attr('id') === "layout-menu" && !menuitem.hasClass('active-menu-parent')) {
            var prevMenuLink = menuitem.parent().find('a.active-menu');

            prevMenuLink.removeClass('active-menu').next('ul.active-menu').removeClass('active-menu');
            prevMenuLink.closest('li').removeClass('active-menu-parent');
            $this.removeMenuitem(prevMenuLink.closest('li').attr('id'));
            menuitem.addClass('active-menu-parent');
            menuitemLink.addClass('active-menu').next('ul[role="menu"]').addClass('active-menu');
        }

    });

    this.menuWrapper.clickOff(function (e) {
        if ($this.menuButtonClick) {
            $this.menuButtonClick = false;
        } else {
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
            $this.menu.children('li.active-menu-parent').removeClass('active-menu-parent').children('a,ul').removeClass('active-menu');
            $this.menubarActive = false;
        }
    });

    this.topbarMenu.clickOff(function (e) {
        if ($this.topmenuButtonClick) {
            $this.topmenuButtonClick = false;
        } else {
            $this.topbarMenu.removeClass('active');
            $this.topmenuButton.removeClass('active');
        }
    });

    $(window).resize(function () {
        $this.equalLinks();
    });

    //topbar
    this.topbarMenu.find('a').click(function (e) {
        var link = $(this),
                submenu = link.next('ul');

        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;
            }
        }
        e.preventDefault();
    })
    .on('mouseenter', function () {
        var link = $(this);

        if (link.parent().parent().is($this.topbarMenu) && $this.topMenuActive && document.documentElement.clientWidth > 960) {
            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.topbarMenu.find('li').clickOff(function () {
        if ($this.topmenuButtonClick) {
            $this.topmenuButtonClick = false;
        } else {
            $this.topbarMenu.find('.active-menu').removeClass('active-menu');
            $this.topMenuActive = false;
        }
    });

};
     //]]>
</script>
Example topbar.xhtml

Code: Select all

....
<!-- Line 19 -->
<ul id="topbar-menu">
    <li>
        <a href="#"><i class="icon-archive"></i><span class="tb-menu-text"> Archive</span></a>
        <ul>
            <li><a href="#"><i class="icon-briefcase Fs18 Blue Fright"></i> <span>Clark Davenport</span><br/><span class="Fs12">Hi, How is going ?</span></a></li>
            <li><a href="#"><i class="icon-briefcase Fs18 Red Fright"></i> <span>Jack Sparrow</span><br/><span class="Fs12">Test Results</span></a></li>
            <li><a href="#"><i class="icon-briefcase Fs18 Fright"></i> <span>Jack Sparrow</span><br/><span class="Fs12">Test Results</span></a></li>
            <li><a href="#"><i class="icon-briefcase Purple Fs18 Fright"></i> <span>George Flinn</span><br/><span class="Fs12">MapX Test Cases</span></a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-flag"></i><span class="tb-menu-text"> Checkpoints</span></a>
        <ul>
            <li><a href="#"><i class="icon-sun3 Fs18 Fleft MarRight10"></i> <span> Brightness</span></a></li>
            <li><a href="#"><i class="icon-users Fs18 Fleft MarRight10"></i> <span> Accounts</span></a></li>
            <li><a href="#"><i class="icon-attachment Fs18 Fleft MarRight10"></i> <span> Attachments</span></a></li>
            <li><a href="#"><i class="icon-lock Fs18 Fleft MarRight10"></i> <span> Log Out System</span></a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-bell"></i><span class="tb-menu-text"> Alerts</span><span class="bubble animated rubberBand">13</span></a>
        <ul>
            <li><a href="#"><i class=" icon-circle 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-circle 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-circle 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-circle Fs20 Orange Fright"></i> <span class="Orange">Download Completed</span><br/><span class="Fs12">SportX Tools</span></a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-magnifying-glass"></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="#"><i class="icon-users"></i><span class="tb-menu-text"> Welcome, Skywalker</span></a></li>
</ul>
...

Screenshots;
Desktop
Image

Image


Mobile
Image

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

12 Apr 2016, 00:45

It looks perfect. Thanks a lot...

Should I include the CSS and JS in my template?

/
Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

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

12 Apr 2016, 08:46

Yes, you can add my Js and Css codes. Please let me know if you encounter a problem.

Also, I think you can create new files to add my Css and JS codes into your project.
Exp;
template.xhtml

Code: Select all

<!DOCTYPE html>
<html ..>

    <h:head>
         ....

        <h:outputScript name="js/equalize.js" library="atlas-layout" />
        <h:outputScript name="js/layout.js" library="atlas-layout" />

        <h:outputScript name="js/myTopbarCustom.js" library="atlas-layout" /> //  ADDED!! please add my JS codes into myTopbarCustom.js

         ...
    </h:head>

    <h:body>
        
          ....
        
        <h:outputStylesheet name="css/atlas-font.css" library="atlas-layout" />
        <h:outputStylesheet name="css/atlas-layout.css" library="atlas-layout" />

        <h:outputStylesheet name="css/myTopbarCustom.css" library="atlas-layout" /> // ADDED!! please add my CSS codes into myTopbarCustom.css

    </h:body>

</html>

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

23 Apr 2016, 14:28

Many many thanks. It works perfectly.

Now it makes the usability of the template a lot better.

/
Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

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

25 Apr 2016, 16:33

Glad to hear, thanks a lot for the update!

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

28 Apr 2016, 01:32

I'm back... :lol:

One more issue. If I substitute the "#" in the URL with a real URL like this:

<li><a href="http://primefaces.org"><i class="icon-sun3 Fs18 Fleft MarRight10"></i> <span> New conference</span></a></li>

I see the changed text:

New conference

and the browser shows the link text. But when i click the menu item my browser doesn't navigate to the desired site/URL.

Am I doing something wrong or is it and error?

one more....what can i do to make the menu point under the mouse pointer stand out?

Sorry, it may seem trivial to you but I'm not a web designer...

/
Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

Locked

Return to “Atlas”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests