aboutsummaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2009-01-23 13:39:38 +0000
committerpete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>2009-01-23 13:39:38 +0000
commite4fab2b9f5320d064f68ac16f6103f2ed11c0b86 (patch)
treeaaae06e48a7fdad523f76d62ed3efa46274d1342 /views
parent1c41df46a1d678b2d1ef2bdc0c71a5d5288055b2 (diff)
downloadelgg-e4fab2b9f5320d064f68ac16f6103f2ed11c0b86.tar.gz
elgg-e4fab2b9f5320d064f68ac16f6103f2ed11c0b86.tar.bz2
new cross-browser js toolbar menu
git-svn-id: https://code.elgg.org/elgg/trunk@2606 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'views')
-rw-r--r--views/default/css.php128
-rw-r--r--views/default/js/initialise_elgg.php75
-rw-r--r--views/default/navigation/topbar_tools.php18
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
}
-
?>