Hi,
I'm trying to migrate our user menu to Barcelona user menu. Unfortunately, it does not support "submenu" like California does. Is it possible to port California user menu to Barcelona please?
Update existing user menu
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: 87
- Joined: 10 Jan 2018, 16:04
Hi,
I'll check and get back to you.
Best Regards
I'll check and get back to you.
Best Regards
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
Hi Babas007,
There codes(HTML, SCSS and JS) that an example of profile menu in California. You can use and edit them according to your need.
HTML code;
SCSS code;
JS code;
Regards
There codes(HTML, SCSS and JS) that an example of profile menu in California. You can use and edit them according to your need.
HTML code;
Code: Select all
<ul id="topbar-usermenu" class="usermenu">
<li>
<a href="#">
<i class="fa fa-fw fa-user"></i>
<span class="topbar-item-name">Profile</span>
<span class="topbar-submenuitem-badge">4</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-cog"></i>
<span class="topbar-item-name">Settings</span>
<span class="topbar-submenuitem-badge">2</span>
</a>
<ul>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-paint-brush"></i>
<span>Change</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-star-o"></i>
<span>Favorites</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-lock"></i>
<span>Lock Screen</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-picture-o"></i>
<span>Wallpaper</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-envelope-o"></i>
<span class="topbar-item-name">Messages</span>
</a>
<ul>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar1.png" library="california-layout" width="25"/>
<span>Give me a call</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar2.png" library="california-layout" width="25"/>
<span>Reports attached</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar3.png" library="california-layout" width="25"/>
<span>About your invoice</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar2.png" library="california-layout" width="25"/>
<span>Meeting today</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar4.png" library="california-layout" width="25"/>
<span>Out of office</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-bell-o"></i>
<span class="topbar-item-name">Notifications</span>
</a>
<ul>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-tasks"></i>
<span>Pending tasks</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-calendar-check-o"></i>
<span>Meeting today</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-download"></i>
<span>Download</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="fa fa-fw fa-plane"></i>
<span>Book flight</span>
</a>
</li>
</ul>
</li>
</ul>
Code: Select all
.usermenu {
list-style: none;
padding: 0;
margin: 0;
display: none;
&.usermenu-active {
display: block;
}
li {
a {
display: block;
text-align: left;
i {
margin-right: 9px;
vertical-align: middle;
}
span, img {
display: inline-block;
vertical-align: middle;
}
}
ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
a {
padding-left: 24px;
span, img {
vertical-align: middle;
}
img {
margin-right: 8px;
}
}
}
}
> li {
&.menuitem-active {
> a {
padding-left: 8px;
}
}
}
}
Code: Select all
this.topbarUsermenuButton = $('#topbar-usermenu-button');
this.topbarUserMenu = $('#topbar-usermenu');
if (this.topbarUserMenu.length)
this.usermenuLinks = this.topbarUserMenu.find('a');
_bindEvents: function() {
var $this = this;
$this.topbarUsermenuButton.off('click').on('click', function (e) {
$this.topbarMenuClick = true;
if ($this.topbarUserMenu.hasClass('usermenu-active')) {
$this.topbarUserMenu.removeClass('fadeInDown').addClass('fadeOutUp');
setTimeout(function () {
$this.topbarUserMenu.removeClass('usermenu-active fadeOutUp');
}, 250);
}
else {
$this.topbarUserMenu.addClass('usermenu-active fadeInDown');
}
e.preventDefault();
});
$this.topbarUserMenu.off('click').on('click', function (e) {
$this.topbarMenuClick = true;
});
$this.usermenuLinks.on('click', function (e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.usermenuLinkClick = true;
item.siblings('.menuitem-active').removeClass('menuitem-active').children('ul').slideUp();
if (item.hasClass('menuitem-active')) {
item.removeClass('menuitem-active');
submenu.slideUp();
}
else {
item.addClass('menuitem-active');
submenu.slideDown();
}
if (submenu.length) {
e.preventDefault();
}
});
$(document.body).on('click', function() {
if (!$this.topbarMenuClick && $this.topbarUserMenu.hasClass('usermenu-active')) {
$this.topbarUserMenu.removeClass('usermenu-active')
}
$this.topbarMenuClick = false;
});
}
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
It's not certain yet. We'll discuss with team members.
Best Regards
Best Regards
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
Of course we try every code that sent to you and we check out is it working on themes. I tried codes on Barcelona and it is working. I believe you can make it work without struggling.
Best Regards
Best Regards
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
We don't plan to integrate these changes to Barcelona.
Regards
Regards
-
- Information
-
Who is online
Users browsing this forum: No registered users and 4 guests