Commit a988674d authored by dudenhofer's avatar dudenhofer Committed by Bojan Zivanovic

Issue #1881208 by cn313: Fixed Toolbar Megamenu doesn't work with IE.

Change-Id: Ib22f7d1e26700e7a7c7f0e3085c3f945b9a5aac5
Reviewed-on: https://code.drupalcommerce.org/710Tested-by: 's avatarJenkinsCG <jenkins@drupalcommerce.org>
Reviewed-by: 's avatarBojan Zivanovic <bojan@commerceguys.com>
parent 60b3b5a0
#toolbar #toolbar-user {
float: left; /* LTR */
}
body.toolbar #toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper ul.menu ul.menu,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings div.toolbar-menu-wrapper ul.menu ul.menu {
#toolbar .toolbar-menu-store-settings .wrapper-depth-3 ul.group {
float: right;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-advanced-store-settings {
#toolbar .toolbar-menu-store-settings .wrapper-depth-3 ul.group-0 {
float: left;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-products {
clear: right;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu li {
#toolbar .toolbar-menu-site-settings .wrapper-depth-3 ul.group {
float: right;
clear: right;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu ul.menu {
padding: 0 0 0 20px;
}
#toolbar div.toolbar-menu .toolbar-menu-wrapper {
padding-right: 175px;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-advanced-store-settings {
float: none;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-products {
clear: both;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu li {
float: none;
clear: both;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper {
width: auto;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-product-settings {
float: none;
#toolbar .toolbar-menu-site-settings .wrapper-depth-3 ul.group-1 {
float: left;
}
#toolbar > div.toolbar-menu > div.toolbar-menu-wrapper > ul.group,
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper .group {
#toolbar-user {
left: 0;
right: auto;
}
#toolbar .wrapper-depth-2 {
left: auto;
right: 30px;
}
#toolbar ul.menu-depth-2 {
float: right;
}
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper {
margin-left: 0;
margin-right: -10px;
#toolbar .wrapper-depth-3 {
text-align: right;
left: auto;
right: 0;
}
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper div.toolbar-menu-wrapper {
margin-right: 0;
padding-left: 0;
padding-right: 1em;
#toolbar ul.menu-depth-3 {
float: right;
clear: right;
}
#toolbar .wrapper-depth-3 a,
#toolbar .wrapper-depth-4 a {
clear: right;
}
#toolbar .wrapper-depth-4 {
padding-left: 0;
padding-right: 10px;
}
/**
* Someone please redo this thing completely.
*
* (start from scratch)
*/
/* Fix drop-down cropping in IE 7 & 8 */
#toolbar {
filter: none !important;
background: #000;
padding: 0;
}
#toolbar > div.toolbar-menu {
background-color: #333;
}
#toolbar > div.toolbar-menu {
#toolbar div.toolbar-menu {
margin: 0 auto;
height: 25px;
padding: 3px 0 0;
width: 90%;
}
#toolbar > div.toolbar-menu > div.toolbar-menu-wrapper > ul.group {
float: left; /* LTR */
#toolbar .wrapper-depth-2,
#toolbar-home,
#toolbar-user {
padding-top: 2px;
top: 0;
}
#toolbar > div.toolbar-menu > div.toolbar-menu-wrapper > ul.group > li {
margin-bottom: -1px;
#toolbar-home {
width: 30px;
}
#toolbar div.toolbar-menu-wrapper {
position: relative;
#toolbar-user {
width: 20%;
left: auto; /* LTR */
right: 0; /* LTR */
}
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper {
position: absolute;
top: -1000px;
left: -10px; /* LTR */
background: #333;
border-radius: 0 0 5px 5px;
-moz-box-shadow: 0 3px 10px #000;
-webkit-box-shadow: 0 3px 10px #000;
box-shadow: 0 3px 10px #000;
padding: 1em;
opacity: 0;
z-index: -1;
}
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper div.toolbar-menu-wrapper {
position: static;
background: transparent;
border-radius: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
margin-left: 0; /* LTR */
padding: 0;
padding-left: 1em; /* LTR */
width: normal;
display: block;
opacity: 1;
#toolbar .wrapper-depth-2{
width: 80%;
padding-top: 2px;
left: 30px; /* LTR */
}
#toolbar div.toolbar-menu ul li:hover a {
background: #444;
#toolbar ul.menu-depth-2 {
display: inline-block;
float: left; /* LTR */
}
#toolbar div.toolbar-menu ul li:hover div a {
background: transparent;
#toolbar li.depth-2 {
position: relative;
height: 30px;
margin-bottom: 0;
padding: 0 5px;
}
#toolbar .wrapper-depth-3 {
margin: -10px 0 0;
position: absolute;
text-align: left; /* LTR */
padding: 10px 5px 10px 5px;
width: 200px;
background: #000;
top: -999px;
left: 0; /* LTR */
display: inline-block;
z-index: -1;
#toolbar div.toolbar-menu-wrapper > ul.menu > li > div.toolbar-menu-wrapper {
/* Transition for browsers that support it. */
-webkit-transition: .5s all;
-webkit-transition-delay: .25s;
-moz-transition: .5s all;
......@@ -71,14 +64,11 @@
transition: .5s all;
transition-delay: .25s;
}
#toolbar li.depth-2:hover .wrapper-depth-3,
#toolbar li.depth-2 .wrapper-depth-3:hover {
top: 100%;
#toolbar div.toolbar-menu-wrapper > ul.menu > li.open > div.toolbar-menu-wrapper,
#toolbar div.toolbar-menu-wrapper > ul.menu:hover > li > div.toolbar-menu-wrapper {
display: block;
opacity: 1;
top: 30px;
/* Transition for browsers that support it. */
-webkit-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
......@@ -88,49 +78,33 @@
transition: 0.5s;
-moz-transition: 0.5s;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu li a {
color: #eee;
font-weight: bold;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu li a {
font-weight: normal;
color: #ccc;
background: transparent;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li a:focus,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li a:hover,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li a:active,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li a.active:focus {
#toolbar ul.menu-depth-3 {
background: transparent;
color: #fff;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li a.active:hover,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li a.active:active,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li a.active,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul li.active-trail a {
background: transparent;
text-shadow: none;
color: #fff;
position: relative;
padding-bottom: 10px;
width: 100%;
float: left; /* LTR */
clear: left; /* LTR */
}
#toolbar ul.menu ul.menu li a {
#toolbar ul.menu-depth-3,
#toolbar ul.menu-depth-4,
#toolbar ul.menu-depth-3 li.depth-3,
#toolbar ul.menu-depth-4 li.depth-4 {
float: none;
display: block;
clear: both;
}
#toolbar ul.menu ul.menu li {
#toolbar .wrapper-depth-3 a,
#toolbar .wrapper-depth-4 a {
float: none;
clear: left; /* LTR */
display: inline-block;
}
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper .group {
width: 10em;
float: left; /* LTR */
#toolbar .wrapper-depth-4 {
padding-left: 10px; /* LTR */
}
#toolbar .wrapper-depth-3 li.depth-3,
#toolbar .wrapper-depth-4 li.depth-4,
#toolbar .expanded,
#toolbar .collapsed {
list-style: none !important;
}
......@@ -132,12 +132,16 @@ function toolbar_megamenu_get_menu_tree() {
}
function toolbar_megamenu_tree_output($tree, $balance = TRUE) {
// Add IE-specific Stylesheet.
drupal_add_css(drupal_get_path('module','toolbar_megamenu') . '/toolbar_megamenu_ie.css', array('group' => CSS_THEME, 'weight' => 23, 'browsers' => array('!IE' => FALSE), 'preprocess' => FALSE));
$build = array();
$groups = array();
// Build the groups up-front so that we get proper grouping and accurate
// counts for the first/last classes.
$current_group = 0;
$current_depth = 0;
foreach ($tree as $data) {
// Break to a new group (even for non-visible items), but only if the
// current group is not empty.
......@@ -147,6 +151,7 @@ function toolbar_megamenu_tree_output($tree, $balance = TRUE) {
if ($data['link']['access'] && !$data['link']['hidden']) {
$groups[$current_group][] = $data;
}
$current_depth = $data['link']['depth'];
}
$router_item = menu_get_item();
......@@ -188,6 +193,7 @@ function toolbar_megamenu_tree_output($tree, $balance = TRUE) {
// Allow menu-specific theme overrides.
$element['#theme'] = 'menu_link__' . strtr($data['link']['menu_name'], '-', '_');
$element['#attributes']['class'] = $class;
$element['#attributes']['class'][] .= 'depth-' . $current_depth;
$element['#title'] = $data['link']['title'];
$element['#href'] = $data['link']['href'];
$element['#localized_options'] = !empty($data['link']['localized_options']) ? $data['link']['localized_options'] : array();
......@@ -206,7 +212,7 @@ function toolbar_megamenu_tree_output($tree, $balance = TRUE) {
}
$build[$group_id] += array(
'#sorted' => TRUE,
'#prefix' => '<ul class="menu group group-' . $group_id . ' toolbar-menu-' . $css_class . '">',
'#prefix' => '<ul class="menu group group-' . $group_id . ' toolbar-menu-' . $css_class . ' menu-depth-' . $current_depth . '">',
'#suffix' => '</ul>',
);
}
......@@ -215,7 +221,7 @@ function toolbar_megamenu_tree_output($tree, $balance = TRUE) {
// Add the theme wrapper for outer markup.
// Allow menu-specific theme overrides.
$build += array(
'#prefix' => '<div class="toolbar-menu-wrapper">',
'#prefix' => '<div class="toolbar-menu-wrapper wrapper-depth-' . $current_depth . ' clearfix">',
'#suffix' => '</div>',
);
}
......
#toolbar .toolbar-menu {
postion: relative;
}
#toolbar-home,
#toolbar-user {
position: absolute;
top: 0;
z-index: 2;
}
#toolbar-home {
left: 0;
}
#toolbar-user {
right: 0;
}
#toolbar .wrapper-depth-2 {
position: relative;
z-index: 1;
width: auto;
padding: 0;
margin: 0 250px 0 140px;
}
#toolbar .wrapper-depth-2,
#toolbar .depth-2,
#toolbar .depth-2 a {
display: inline-block;
position: relative;
z-index: 1;
}
body.toolbar #toolbar ul.menu-depth-2 .wrapper-depth-3 {
margin-top: -15px;
}
body.toolbar #toolbar .wrapper-depth-3 li {
list-style-image: none !important;
}
/* Hide Toolbar Drawer */
body.toolbar #toolbar .toolbar-drawer {
height: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment