From 9a44acd27b0f8fb63cd07af7e7232f6c2b29ecf5 Mon Sep 17 00:00:00 2001 From: cash Date: Wed, 21 Sep 2011 20:57:33 -0400 Subject: Fixes #3770 CSS only site menu that works in IE7 --- js/lib/ui.js | 33 -------- views/default/css/elements/navigation.php | 123 ++++++++++++++++-------------- views/default/css/ie.php | 13 ++-- views/default/navigation/menu/site.php | 2 +- 4 files changed, 73 insertions(+), 98 deletions(-) diff --git a/js/lib/ui.js b/js/lib/ui.js index 46e418e8b..7abf7626f 100644 --- a/js/lib/ui.js +++ b/js/lib/ui.js @@ -22,13 +22,6 @@ elgg.ui.init = function () { if ($('.elgg-input-date').length) { elgg.ui.initDatePicker(); } - - // fix for ie7 CSS issue on menu dropdown - // open the menu when you hover over it, close when you click off of it. - // @todo This should be possible with CSS. Anyone want to tame the beast, go for it. - if ($.browser.msie && $.browser.version <= 7) { - $('.elgg-menu-site > .elgg-more').live('mouseenter', elgg.ui.ie7MenuFixMouseEnter) - } } /** @@ -282,32 +275,6 @@ elgg.ui.initDatePicker = function() { }); } -/** - * IE 7 doesn't like our site menu system CSS, so open it with JS. - */ -elgg.ui.ie7MenuFixMouseEnter = function() { - $('.elgg-menu-site .elgg-menu-site-more').css('display', 'block'); - $('.elgg-menu-site .elgg-more > a') - .css('background-color', 'white') - .css('color', '#555') - - $body = $('body'); - if (!$body.data('hasIe7Clear')) { - $body.live('click', elgg.ui.ie7MenuClear); - $body.data('hasIe7Clear', true); - } - -} - -/** - * Close the menu when clicking on the body - */ -elgg.ui.ie7MenuClear = function() { - $('.elgg-menu-site .elgg-menu-site-more').css('display', 'none'); - $('.elgg-menu-site .elgg-more > a') - .css('background-color', 'transparent') - .css('color', 'white') -} elgg.register_hook_handler('init', 'system', elgg.ui.init); elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.LoginHandler); \ No newline at end of file diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php index b5388715e..9eef96eb9 100644 --- a/views/default/css/elements/navigation.php +++ b/views/default/css/elements/navigation.php @@ -169,95 +169,100 @@ } .elgg-menu-site > li > a { - font-weight: bold; - padding: 3px 13px 0px 13px; - height: 20px; + font-weight: bold; + padding: 3px 13px 0px 13px; + height: 20px; } .elgg-menu-site > li > a:hover { - text-decoration: none; + text-decoration: none; } - .elgg-menu-site-default { - position: absolute; - bottom: 0; - left: 0; - height: 23px; + position: absolute; + bottom: 0; + left: 0; + height: 23px; } .elgg-menu-site-default > li { - float: left; - margin-right: 1px; + float: left; + margin-right: 1px; } -.elgg-menu-site-default > li > a {color: white} +.elgg-menu-site-default > li > a { + color: white; +} +.elgg-menu-site > li > ul { + display: none; + background-color: white; +} + +.elgg-menu-site > li:hover > ul { + display: block; +} .elgg-menu-site-default > .elgg-state-selected > a, .elgg-menu-site-default > li:hover > a { - background: white; - color: #555; - - -webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); - -moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); - box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); - - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + background: white; + color: #555; + + -webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25); + + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; } .elgg-menu-site-more { - display: none; - position: relative; - left: -1px; - width: 100%; - z-index: 1; - min-width: 150px; - border: 1px solid #999; - border-top: 0; - - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); -} + position: relative; + left: -1px; + width: 100%; + min-width: 150px; + border: 1px solid #999; + border-top: 0; -li:hover > .elgg-menu-site-more { - display: block; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); } .elgg-menu-site-more > li > a { - background: white; - color: #555; - - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + background-color: white; + color: #555; + + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } + .elgg-menu-site-more > li > a:hover { - background: #4690D6; - color: white; + background: #4690D6; + color: white; } + .elgg-menu-site-more > li:last-child > a, .elgg-menu-site-more > li:last-child > a:hover { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } .elgg-more > a:before { - content: "\25BC"; - font-size: smaller; - margin-right: 4px; + content: "\25BC"; + font-size: smaller; + margin-right: 4px; } /* *************************************** diff --git a/views/default/css/ie.php b/views/default/css/ie.php index cb4ede0ae..c5edefd4c 100644 --- a/views/default/css/ie.php +++ b/views/default/css/ie.php @@ -1,11 +1,14 @@ /** - * elgg_layout css for Internet Explorer > ie6 - * @uses $vars['wwwroot'] The site URL -*/ + * CSS for Internet Explorer for versions > ie6 + */ + * {zoom: 1;} /* trigger hasLayout in IE */ -/* tools drop-down menu */ -#elgg-header {z-index:1;} +/* site menu drop-down for IE7 */ +.elgg-page-header { + z-index: 1; +} + .navigation li a:hover ul {display:block; position:absolute; top:21px; left:0;} .navigation li a:hover ul li a {display:block;} .navigation li.navigation-more ul li a {width:150px;background-color: #dedede;} diff --git a/views/default/navigation/menu/site.php b/views/default/navigation/menu/site.php index 1409f54af..e2d3aa8fa 100644 --- a/views/default/navigation/menu/site.php +++ b/views/default/navigation/menu/site.php @@ -15,7 +15,7 @@ if (isset($vars['menu']['more'])) { echo '
  • '; $more = elgg_echo('more'); - echo "$more"; + echo "$more"; echo elgg_view('navigation/menu/elements/section', array( 'class' => 'elgg-menu elgg-menu-site elgg-menu-site-more', -- cgit v1.2.3