Notification badge on p:menuitem

Post Reply
hecnabae
Posts: 2
Joined: 20 May 2015, 09:57
Location: Valencia (Spain)
Contact:

22 Mar 2017, 12:13

The showcase shows an example to draw menu elements with a notification badge.

Code: Select all

 
 <div class="inbox-labels">
   <span>Labels</span>
     <ul>
      <li class="clearfix">
        <span class="inbox-label">Work</span>
        <span class="inbox-label-badge">4</span>
      </li>
      <li class="clearfix">
        <span class="inbox-label">Personel</span>
        <span class="inbox-label-badge">2</span>
      </li>
      <li class="clearfix">
        <span class="inbox-label">Shared</span>
        <span class="inbox-label-badge">3</span>
      </li>
      <li class="clearfix">
        <span class="inbox-label">General</span>
        <span class="inbox-label-badge">5</span>
      </li>
    </ul>
  </div>
But those elements doesn't has the menu effects (onhover,...). Is there anyway to put a notification badge on p:menuitem?
Senior software engineer at http://mes-view.com

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

23 Mar 2017, 10:58

Please try;

Code: Select all

.layout-wrapper .topbar .topbar-menu > li > a .topbar-icon:hover ~ .topbar-badge {
   color: red; // you can change this value or add new css
}
Is there anyway to put a notification badge on p:menuitem?
- You need to override DefaultMenuItem.java, MenuItem.java of PrimeFaces (to add an attribute to p:menuitem) and MenuRenderer.java of Morpheus(to add <span class="topbar-badge">..</span> into DOM)

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest