I have written a pure css hover submenu drop down solution for the horizontal toolbar. I will attach a patch but the code added code is below (navbar.menu.css):

/**
 * Styling for Custom Navbar Dropdown 
 */

.navbar-tray-horizontal .navbar-menu-administration ul
{
	list-style:none !important; 
	position:relative !important;
	float:left !important;
	margin:0 !important;
	padding:0 !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul a
{
	display:block !important;
	text-decoration:none !important;
	line-height:39px !important;
	padding:0 15px !important;
    padding-left: 35px !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul li
{
	position:relative !important;
	float:left !important;
	margin:0 !important;
	padding:0 !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul li.current-menu-item
{
	background:#ddd !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul li:hover
{
	background:#f6f6f6 !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul ul
{
	display:none !important;
	position:absolute !important;
	top:100% !important;
	left:0 !important;
	background:#fff !important;
	padding:0 !important;
    border: 1px solid #DDDDDD !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul ul li
{
	float:none !important;
	width:200px !important;
    border: none !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul ul a
{
	line-height:120% !important;
	padding:10px 15px !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul ul ul
{
	top:0 !important;
	left:100% !important;
}

.navbar-tray-horizontal .navbar-menu-administration ul li:hover > ul
{
	display:block !important;
}

The !important tags could be removed on some of the properties but I included them to confirm no override conflicts from the vertical toolbar styling.

Comments

ErikHendrick’s picture

ErikHendrick commented

I added your CSS to the website, and tested the nav on Chrome, Opera, and Firefox

Dropdowns Only Appear When On Non-Administrative Pages (only when on website pages)
>Structure (main menu drops down, but multiple sub-menus do not fly-out)
>Configuration (all sub-menus fly-out)
>Reports

Dropdowns never appear for the following menu items
>Content
>Appearance
>People
>Modules

eshta’s picture

eshta commented
Status: Active » Postponed

Navbar is a backport of the D8 toolbar. The goal is to have any improvements added to D8 toolbar and then changes backported here for use in D7. This would be a pretty substantial functional change and it should be addressed there first.

With that said - I do like the idea, personally, I tend to work in vertical mode purely for access to all the submenus.

bccrayton’s picture

bccrayton commented

What administrative theme are you using Bodigiti?

The discussed issue with only being able to see the sub-menus on Non-Administrative pages sounds like a admin theme conflict or z-index styling issue.

As far as the drop downs never appearing on some of the menu items or missing flyouts, that's not my styling, its due to the lack of submenu and relative deep links in the navbar module itself.

For example, if there is a submenu present for a menu item in the vertical menu, my styling will style it to be a drop down.

Furthermore, you can manually add any sub menu links to the management menu and it will appear as a submenu link in the drop down and vertical toolbar for most be not all.

ErikHendrick’s picture

ErikHendrick commented

Hi, I have tested it using Administrative themes "Seven" and "Adminimal" with the same results: drop-down menus are only appearing on non-administrative pages.

There are "display: none;" properties active on Admin pages while the same selectors do not have them on non-admin pages. The following "display: none;" property from the module's CSS (navbar.module.css) is active while I'm on Admin pages but not while on non-admin pages :

272 /* Hide secondary menus when the tray is horizontal. */
273 #navbar-administration.navbar-oriented .navbar-tray-horizontal .menu li ul {
274 display: none;
275 }

Regarding your styling, thanks for the insight about the vertical-menu relating to the drop-down menu.

hass’s picture

hass commented
Project: Navbar » Drupal core
Version: 7.x-1.x-dev » 8.0.x-dev
Component: Code » toolbar.module
Status: Postponed » Active

Moving for decision making to D8. Please move back once done or just close if we do not like to implement this at all.

idebr’s picture

idebr commented
Related issues: +#1847274: Introduce dropdown menus to menus when the tray is in a horizontal orientation

Dropdowns for the horizontal toolbar have been postponed to a release past 8.0.x

hass’s picture

hass commented
Status: Active » Closed (duplicate)
bwaindwain’s picture

bwaindwain commented
Version: 8.0.x-dev » 9.x-dev

Adaptation of this code for Drupal 7 is at https://www.drupal.org/node/2481207. Thanks bccrayton!

Version: 9.x-dev » 9.0.x-dev

The 9.0.x branch will open for development soon, and the placeholder 9.x branch should no longer be used. Only issues that require a new major version should be filed against 9.0.x (for example, removing deprecated code or updating dependency major versions). New developments and disruptive changes that are allowed in a minor version should be filed against 8.9.x, and significant new features will be moved to 9.1.x at committer discretion. For more information see the Allowed changes during the Drupal 8 and 9 release cycles and the Drupal 9.0.0 release plan.