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
drop down menues for top bar
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I will work on this issue and get back to you. I need to override css and layout.js.
Github Profile: https://github.com/mertsincan
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.
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.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I overrode CSS and JS codes. Please try with;
- CSS
- JS
Example topbar.xhtml
Screenshots;
Desktop
Mobile
- 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>
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>
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
Mobile
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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
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>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for the update!
Github Profile: https://github.com/mertsincan
I'm back...
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
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
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest