diff options
| -rw-r--r-- | views/default/css.php | 128 | ||||
| -rw-r--r-- | views/default/js/initialise_elgg.php | 75 | ||||
| -rw-r--r-- | views/default/navigation/topbar_tools.php | 18 |
3 files changed, 155 insertions, 66 deletions
diff --git a/views/default/css.php b/views/default/css.php index 3e455bc0b..1cc2bb9d0 100644 --- a/views/default/css.php +++ b/views/default/css.php @@ -388,6 +388,7 @@ blockquote { position:relative; width:100%; height:24px; + z-index: 9000; /* if you have multiple position:relative elements, then IE sets up separate Z layer contexts for each one, which ignore each other */ } #elgg_topbar_container_left { float:left; @@ -542,83 +543,97 @@ blockquote { background: #0054a7; } + /* *************************************** TOP BAR - VERTICAL TOOLS MENU *************************************** */ +/* elgg toolbar menu setup */ #topbardropdownmenu, #topbardropdownmenu ul { margin:0; padding:0; display:inline; float:left; list-style-type: none; - z-index: 99999999; + z-index: 5000; + position: relative; } #topbardropdownmenu { - margin:0pt 15px 0pt 5px; + margin:0pt 20px 0pt 5px; +} +#topbardropdownmenu li { + display: block; + list-style: none; + margin: 0; + padding: 0; + float: left; + position: relative; } -/* Tools link in top menu */ -#topbardropdownmenu a, #topbardropdownmenu a:visited { +#topbardropdownmenu a { display:block; - padding:3px 13px 3px 3px; +} +#topbardropdownmenu ul { + display: none; + position: absolute; + left: 0; + margin: 0; + padding: 0; +} +/* IE6 fix */ +* html #topbardropdownmenu ul { + line-height: 1.1em; +} +/* IE6/7 fix */ +#topbardropdownmenu ul a { + zoom: 1; +} +#topbardropdownmenu ul li { + float: none; +} +/* elgg toolbar menu style */ +#topbardropdownmenu ul { + width: 150px; +} +#topbardropdownmenu *:hover { + background-color: none; +} +#topbardropdownmenu a { + padding:3px; text-decoration:none; color:white; } -#topbardropdownmenu li ul a { - width:120px; - height:auto; - float:left; +#topbardropdownmenu li.hover a { + background-color: #4690d6; + text-decoration: none; } - -/* menu list items */ -#topbardropdownmenu li {float:left; position:relative; background:#cccccc;} -#topbardropdownmenu ul a { - border-left:1px solid #f5f5f5; - border-right:1px solid #333333; - color:#4690d6 !important; - padding:2px 6px 2px 6px !important; - background: #DEDEDE !important; - border-top:1px solid #f5f5f5; - border-bottom:1px solid #999999; +#topbardropdownmenu ul li.drop a { + font-weight: normal; } - -/* IE7 */ -#topbardropdownmenu li:hover {position:relative;} -/* Make the Tools nav color persist */ -#topbardropdownmenu li:hover > a {background: #4690d6 url(<?php echo $vars['url']; ?>_graphics/toolbar_arrow.png) no-repeat right -18px;} -#topbardropdownmenu li ul {display:none;width:134px !important;} -#topbardropdownmenu li:hover > ul { - display:block; - position:absolute; - top:-11px; - left:80px; - padding:10px 30px 30px 30px; - background:transparent url(<?php echo $vars['url']; ?>_graphics/spacer.gif); -} -/* Position the first sub level beneath the top level links */ -#topbardropdownmenu > li:hover > ul { - left:-30px; - top:16px; -} -#topbardropdownmenu li a:active, #topbardropdownmenu li a:focus { - background:#4690d6; - color:white; +/* IE7 fixes */ +*:first-child+html #elgg_topbar_container_left a.pagelinks { + padding-bottom:6px; } -#topbardropdownmenu li.drop { - background: url(<?php echo $vars['url']; ?>_graphics/toolbar_arrow.png) no-repeat right 9px; +*:first-child+html #topbardropdownmenu li.drop a.menuitemtools { + padding-bottom:6px; } -/* dropdown list links hover */ -#topbardropdownmenu li.drop ul li a:hover { - color:white !important; - background: #4690d6 !important; - border-left:1px solid #99ccff; - border-top:1px solid #99ccff; +#topbardropdownmenu ul { + top: 25px; +} +#topbardropdownmenu ul li a { + background-color: #999999;/* menu off state color */ + font-weight: bold; + padding-left:6px; + padding-top:4px; + padding-bottom:0; + height:22px; + border-bottom: 1px solid white; +} +#topbardropdownmenu ul a.hover { + background-color: #333333; +} +#topbardropdownmenu ul a { + opacity: 0.9; + filter: alpha(opacity=90); } -/* IE6 ONLY - make the sublevels appear */ -* html #topbardropdownmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(<?php echo $vars['url']; ?>_graphics/spacer.gif);} -#topbardropdownmenu li a:hover ul {visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;} -#topbardropdownmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:99999; font-size:1em;} -* html #topbardropdownmenu li.drop {background: url(<?php echo $vars['url']; ?>_graphics/toolbar_arrow_ie.gif) no-repeat right 9px;} -* html #topbardropdownmenu li a:hover {position:relative; background:#4690d6 url(<?php echo $vars['url']; ?>_graphics/toolbar_arrow_ie.gif) no-repeat right -18px;} /* *************************************** @@ -2095,3 +2110,4 @@ div.ajax_loader { width:100%; height:33px; } + diff --git a/views/default/js/initialise_elgg.php b/views/default/js/initialise_elgg.php index 38f25673e..390b9cf94 100644 --- a/views/default/js/initialise_elgg.php +++ b/views/default/js/initialise_elgg.php @@ -209,3 +209,78 @@ jQuery.cookie = function(name, value, options) { return cookieValue;
}
};
+
+// ELGG TOOLBAR MENU
+$.fn.elgg_topbardropdownmenu = function(options) {
+
+ options = $.extend({speed: 350}, options || {});
+
+ this.each(function() {
+
+ var root = this, zIndex = 5000;
+
+ function getSubnav(ele) {
+ if (ele.nodeName.toLowerCase() == 'li') {
+ var subnav = $('> ul', ele);
+ return subnav.length ? subnav[0] : null;
+ } else {
+
+ return ele;
+ }
+ }
+
+ function getActuator(ele) {
+ if (ele.nodeName.toLowerCase() == 'ul') {
+ return $(ele).parents('li')[0];
+ } else {
+ return ele;
+ }
+ }
+
+ function hide() {
+ var subnav = getSubnav(this);
+ if (!subnav) return;
+ $.data(subnav, 'cancelHide', false);
+ setTimeout(function() {
+ if (!$.data(subnav, 'cancelHide')) {
+ $(subnav).slideUp(options.speed);
+ }
+ }, 200);
+ }
+
+ function show() {
+ var subnav = getSubnav(this);
+ if (!subnav) return;
+ $.data(subnav, 'cancelHide', true);
+ $(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
+ if (this.nodeName.toLowerCase() == 'ul') {
+ var li = getActuator(this);
+ $(li).addClass('hover');
+ $('> a', li).addClass('hover');
+ }
+ }
+
+ $('ul, li', this).hover(show, hide);
+ $('li', this).hover(
+ function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
+ function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
+ );
+
+ });
+
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/views/default/navigation/topbar_tools.php b/views/default/navigation/topbar_tools.php index 03e7317c8..9b0c06786 100644 --- a/views/default/navigation/topbar_tools.php +++ b/views/default/navigation/topbar_tools.php @@ -27,25 +27,23 @@ ?> <ul id="topbardropdownmenu"> - <li class="drop"><a href="#"><?php echo(elgg_echo('tools')); ?><!--[if IE 7]></a><![endif]--> - <!--[if lte IE 6]><table><tr><td><![endif]--> - <ul> + <li class="drop"><a href="#" class="menuitemtools"><?php echo(elgg_echo('tools')); ?></a> + <ul> <?php - foreach($alphamenu as $item) { - echo "<li><a href=\"{$item->value}\">" . $item->name . "</a></li>"; - } - ?> </ul> - <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> -<?php +<script type="text/javascript"> + $(function() { + $('#topbardropdownmenu').elgg_topbardropdownmenu(); + }); +</script> +<?php } - ?> |