Page 1 of 2
drop down menues for top bar
Posted: 31 Jan 2016, 19:25
by kimg
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
Re: drop down menues for top bar
Posted: 03 Feb 2016, 10:04
by mert.sincan
I will work on this issue and get back to you. I need to override css and layout.js.
Re: drop down menues for top bar
Posted: 09 Mar 2016, 17:31
by kyriv
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.
Re: drop down menues for top bar
Posted: 08 Apr 2016, 00:18
by kimg
Hi,
is there an update on this issue?
I would really like to see it implemented. it would complete a super cool theme/layout.
/
Kim
Re: drop down menues for top bar
Posted: 10 Apr 2016, 21:40
by mert.sincan
I overrode CSS and JS codes. Please try with;
- 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>
Example topbar.xhtml
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
Re: drop down menues for top bar
Posted: 12 Apr 2016, 00:45
by kimg
It looks perfect. Thanks a lot...
Should I include the CSS and JS in my template?
/
Kim
Re: drop down menues for top bar
Posted: 12 Apr 2016, 08:46
by mert.sincan
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
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>
Re: drop down menues for top bar
Posted: 23 Apr 2016, 14:28
by kimg
Many many thanks. It works perfectly.
Now it makes the usability of the template a lot better.
/
Kim
Re: drop down menues for top bar
Posted: 25 Apr 2016, 16:33
by mert.sincan
Glad to hear, thanks a lot for the update!
Re: drop down menues for top bar
Posted: 28 Apr 2016, 01:32
by kimg
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