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?
MegaMenu/SubMenu on the TopBar
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I think you want something like the following screenshots. Right?
Test Code;
If right, I can attach a more detailed css. (Exp; on Table mode or Mobile mode)
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>
..
Github Profile: https://github.com/mertsincan
-
- Posts: 16
- Joined: 19 Aug 2015, 15:16
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.aragorn wrote:I think you want something like the following screenshots. Right?
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; }
If right, I can attach a more detailed css. (Exp; on Table mode or Mobile mode)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> ..
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I overrode js and css of layout for you. Please try;
// JS codes;
//CSS codes;
topbar.xhtml
Screenshots;
On Mobile
// 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>
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>
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>
...
On Mobile
Github Profile: https://github.com/mertsincan
-
- Posts: 16
- Joined: 19 Aug 2015, 15:16
Aragorn, thanks your attention.aragorn wrote:I overrode js and css of layout for you. Please try;
// JS codes;//CSS 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>
topbar.xhtmlCode: 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>
Screenshots;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> ...
On Mobile
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.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Which olympos version are you using? Please try with new version.
Github Profile: https://github.com/mertsincan
-
- Posts: 16
- Joined: 19 Aug 2015, 15:16
I'm using 1.0 version.aragorn wrote:Which olympos version are you using? Please try with new version.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please use Olympos.bindEvents instead of PrimeFaces.widget.Olympos.prototype.bindEvents.
Github Profile: https://github.com/mertsincan
-
- Posts: 16
- Joined: 19 Aug 2015, 15:16
Works perfectly! Thank you so much!aragorn wrote:Please use Olympos.bindEvents instead of PrimeFaces.widget.Olympos.prototype.bindEvents.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks for the update!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest