new cross-browser js toolbar menu

git-svn-id: https://code.elgg.org/elgg/trunk@2606 36083f99-b078-4883-b0ff-0f9b5a30f544

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
 		}
-
 ?>