Hello
I would really like the theme Paradise to be implemented in the possibility of choosing between the menu: Horizontal or Vertical ..
I realized that most of the new themes (ecuador, serenity, ultima, apollo) have this functionality, I would be very grateful if this customization in Paradise could be possible.
Thank you very much for your cooperation.
Menu Modes - Horizontal or Vertical
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
We'll discuss it and get back to you.
Github Profile: https://github.com/mertsincan
Hello
If it's been almost 3 months, do you have a position on a request?
Thanks!
If it's been almost 3 months, do you have a position on a request?
Thanks!
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Sorry for the delayed response. Unfortunately, we don't think of adding Horizontal menu option.
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
Hello
What pessima news, I was so confident to have this functionality in this thema so beautiful, I even had plans to acquire the full license for another project, but under these conditions we will abort the idea.
Still thankful for attention.
What pessima news, I was so confident to have this functionality in this thema so beautiful, I even had plans to acquire the full license for another project, but under these conditions we will abort the idea.
Still thankful for attention.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Maybe you can override css and layout.js. I made some changes for you. Please try;
//custom css
//new layout.js
//template.xhtml
//custom css
Code: Select all
<style type="text/css">
.layout-wrapper .layout-menu-wrapper .nano > .nano-content.menu-scroll-content {
display: block;
height: 100%;
position: relative;
overflow: scroll;
overflow-x: hidden;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper {
padding-top: 15px;
left: -240px;
z-index: 100;
}
.layout-wrapper.layout-menu-horizontal.layout-menu-overlay-active .layout-menu-wrapper {
left: 0px;
}
@media (min-width: 1025px) {
.layout-wrapper.layout-menu-horizontal .layout-menu-container .layout-menu > li {
display: inline-block;
width: auto;
padding: 0;
height: 40px;
position: relative;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu {
padding: 0;
margin: 0;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .nano > .nano-content.menu-scroll-content {
display: block;
height: auto;
position: static;
overflow: visible;
overflow-x: visible;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper {
width: 100%;
height: auto;
left: 0;
z-index: 99;
position: fixed;
padding: 0 12px;
border: 0 none;
-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.layout-wrapper.layout-menu-horizontal .layout-content {
padding-top: 120px;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu > li > a {
height: 40px;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu > li > ul {
background-color: #ffffff;
top: 110px;
left: auto;
min-width: 250px;
position: fixed;
z-index: 1;
margin: 0;
overflow: auto;
max-height: 450px;
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu li > ul li a {
padding-left: 16px;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu ul li li a {
padding-left: 32px;
}
.layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu ul li li li a {
padding-left: 48px;
}
}
</style>
Code: Select all
<script type="text/javascript">
//<![CDATA[
/**
* PrimeFaces Paradise Layout
*/
PrimeFaces.widget.Paradise = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.wrapper = $(document.body).children('.layout-wrapper');
this.topbar = this.wrapper.children('.topbar');
this.menuWrapper = this.wrapper.find('> .layout-main > .layout-menu-wrapper');
this.menuButton = $('#menu-button');
this.userDisplay = $('#user-display');
this.topbarMenu = $('#topbar-menu');
this.topbarLinks = this.topbarMenu.find('a');
this.menu = this.menuWrapper.find('ul.layout-menu');
this.menulinks = this.menu.find('a');
this.expandedMenuitems = this.expandedMenuitems || [];
this.nano = this.menuWrapper.children('.nano');
var isHorizontalMenu = this.wrapper.hasClass('layout-horizontal');
if(!this.isSlim() && !this.isHorizontalMenu()) {
this.restoreMenuState();
}
if(!this.isSlim() && !isHorizontalMenu) {
this.nano.nanoScroller({flash:true});
this.nano.children('.nano-content').removeAttr('tabindex');
}
this.bindEvents();
},
bindEvents: function() {
var $this = this;
if(!this.wrapper.hasClass('layout-menu-slim')) {
this.nano.nanoScroller();
}
this.menuWrapper.on('click', function(e) {
$this.menuClick = true;
});
this.menuButton.on('click', function(e) {
if($this.wrapper.hasClass('layout-menu-horizontal')) {
$this.wrapper.toggleClass('layout-menu-overlay-active');
}
else if($this.isMobile()) {
$this.wrapper.toggleClass('layout-menu-active');
if($this.wrapper.hasClass('layout-menu-active'))
$this.wrapper.append('<div class="layout-mask"></div>');
else
$this.wrapper.children('.layout-mask').remove();
}
else {
if($this.wrapper.hasClass('layout-menu-overlay'))
$this.wrapper.toggleClass('layout-menu-overlay-active');
else
$this.wrapper.toggleClass('layout-menu-static-inactive');
}
$this.nano.nanoScroller();
$this.menuButtonClick = true;
e.preventDefault();
setTimeout(function() {
$(window).trigger('resize');
}, 320);
});
this.menulinks.off('click mouseenter').on('click', function(e) {
var link = $(this),
item = link.parent(),
submenu = item.children('ul');
if($this.isSlim() && item.parent().hasClass('layout-menu')) {
if(item.hasClass('active-menuitem')) {
if(submenu.length) {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
submenu.hide();
$this.menuHoverActive = false;
}
}
else {
item.addClass('active-menuitem');
$this.addMenuitem(item.attr('id'));
$this.deactivateItems(item.siblings(), false);
submenu.show();
$this.menuHoverActive = true;
}
}
else {
if(item.hasClass('active-menuitem')) {
if(submenu.length) {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
submenu.slideUp();
}
}
else {
$this.addMenuitem(item.attr('id'));
$this.deactivateItems(item.siblings(), true);
$this.activate(item);
}
}
setTimeout(function() {
if(!$this.isSlim()) {
$this.nano.nanoScroller();
}
}, 500);
if(submenu.length) {
e.preventDefault();
}
}).on('mouseenter', function(e) {
var link = $(this),
item = link.parent(),
submenu = item.children('ul');
if($this.isSlim() && item.parent().hasClass('layout-menu') && $this.menuHoverActive && !item.hasClass('active-menuitem')) {
$this.deactivateItems($this.menu.children('.active-menuitem'), false);
item.addClass('active-menuitem');
submenu.show();
}
});
this.userDisplay.on('click', function(e) {
$this.topbarMenuButtonClick = true;
if($this.topbarMenu.hasClass('topbar-menu-visible')) {
$this.hideTopBar();
}
else {
$this.topbarMenu.addClass('topbar-menu-visible fadeInDown');
}
e.preventDefault();
});
this.topbarLinks.on('click', function(e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.topbarLinkClick = true;
item.siblings('.menuitem-active').removeClass('menuitem-active');
if(item.hasClass('menuitem-active')) {
item.removeClass('menuitem-active');
link.next('ul').slideUp();
}
else {
item.addClass('menuitem-active');
link.next('ul').slideDown();
}
if(submenu.length) {
e.preventDefault();
}
});
$(document.body).off('click').on('click', function() {
if(!$this.topbarMenuButtonClick && !$this.topbarLinkClick) {
$this.hideTopBar();
}
if(!$this.menuClick && ($this.isSlim() || $this.isHorizontalMenu())) {
$this.deactivateItems($this.menu.children('.active-menuitem'), false);
$this.menuHoverActive = false;
}
if(($this.wrapper.hasClass('layout-menu-overlay-active') || $this.wrapper.hasClass('layout-menu-active')) && (!$this.menuClick && !$this.menuButtonClick)) {
$this.wrapper.removeClass('layout-menu-overlay-active layout-menu-active');
$this.wrapper.children('.layout-mask').remove();
}
$this.topbarLinkClick = false;
$this.topbarMenuButtonClick = false;
$this.menuClick = false;
$this.menuButtonClick = false;
});
},
activate: function(item) {
var submenu = item.children('ul');
item.addClass('active-menuitem');
if(submenu.length) {
submenu.slideDown();
}
},
deactivate: function(item) {
var submenu = item.children('ul');
item.removeClass('active-menuitem');
if(submenu.length) {
submenu.hide();
}
},
deactivateItems: function(items, animate) {
var $this = this;
for(var i = 0; i < items.length; i++) {
var item = items.eq(i),
submenu = item.children('ul');
if(submenu.length) {
if(item.hasClass('active-menuitem')) {
var activeSubItems = item.find('.active-menuitem');
item.removeClass('active-menuitem');
if(animate) {
submenu.slideUp('normal', function() {
$(this).parent().find('.active-menuitem').each(function() {
$this.deactivate($(this));
});
});
}
else {
submenu.hide();
item.find('.active-menuitem').each(function() {
$this.deactivate($(this));
});
}
$this.removeMenuitem(item.attr('id'));
activeSubItems.each(function() {
$this.removeMenuitem($(this).attr('id'));
});
}
else {
item.find('.active-menuitem').each(function() {
var subItem = $(this);
$this.deactivate(subItem);
$this.removeMenuitem(subItem.attr('id'));
});
}
}
else if(item.hasClass('active-menuitem')) {
$this.deactivate(item);
$this.removeMenuitem(item.attr('id'));
}
}
},
removeMenuitem: function (id) {
this.expandedMenuitems = $.grep(this.expandedMenuitems, function (value) {
return value !== id;
});
this.saveMenuState();
},
addMenuitem: function (id) {
if ($.inArray(id, this.expandedMenuitems) === -1) {
this.expandedMenuitems.push(id);
}
this.saveMenuState();
},
saveMenuState: function() {
$.cookie('paradise_expandeditems', this.expandedMenuitems.join(','), {path: '/'});
},
clearMenuState: function() {
$.removeCookie('paradise_expandeditems', {path: '/'});
},
restoreMenuState: function() {
var menucookie = $.cookie('paradise_expandeditems');
if (menucookie) {
this.expandedMenuitems = menucookie.split(',');
for (var i = 0; i < this.expandedMenuitems.length; i++) {
var id = this.expandedMenuitems[i];
if (id) {
var menuitem = $("#" + this.expandedMenuitems[i].replace(/:/g, "\\:"));
menuitem.addClass('active-menuitem');
var submenu = menuitem.children('ul');
if(submenu.length) {
submenu.show();
}
}
}
}
},
hideTopBar: function() {
var $this = this;
this.topbarMenu.addClass('fadeOutUp');
setTimeout(function() {
$this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
},500);
},
isHorizontalMenu: function() {
return this.wrapper.hasClass('layout-menu-horizontal') && this.isDesktop();
},
isMobile: function() {
return window.innerWidth <= 640;
},
isDesktop: function() {
return window.innerWidth > 1024;
},
isSlim: function() {
return !this.isMobile() && this.wrapper.hasClass('layout-menu-slim');
}
});
/*!
* jQuery Cookie Plugin v1.4.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2006, 2014 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD (Register as an anonymous module)
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var pluses = /\+/g;
function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}
function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}
function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}
function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}
try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}
function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}
var config = $.cookie = function (key, value, options) {
// Write
if (arguments.length > 1 && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
}
return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Read
var result = key ? undefined : {},
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
cookies = document.cookie ? document.cookie.split('; ') : [],
i = 0,
l = cookies.length;
for (; i < l; i++) {
var parts = cookies[i].split('='),
name = decode(parts.shift()),
cookie = parts.join('=');
if (key === name) {
// If second argument (value) is a function it's a converter...
result = read(cookie, value);
break;
}
// Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}
return result;
};
config.defaults = {};
$.removeCookie = function (key, options) {
// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};
}));
/* Issue #924 is fixed for 5.3+ and 6.0. (compatibility with 5.3) */
if(window['PrimeFaces'] && window['PrimeFaces'].widget.Dialog) {
PrimeFaces.widget.Dialog = PrimeFaces.widget.Dialog.extend({
enableModality: function() {
this._super();
$(document.body).children(this.jqId + '_modal').addClass('ui-dialog-mask');
},
syncWindowResize: function() {}
});
}
//]]>
</script>
//template.xhtml
Code: Select all
<h:body>
<div class="layout-wrapper layout-menu-horizontal">
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests