Browse Source

major rewrite of menu code, tons of bug and usability fixes, faster, and better cross browser integration, and RTL support

Ted Serbinski 18 years ago
parent
commit
21563d09ce
5 changed files with 225 additions and 76 deletions
  1. 2 1
      README.txt
  2. 79 51
      simplemenu.css
  3. 119 9
      simplemenu.js
  4. 1 1
      simplemenu.module
  5. 24 14
      simplemenu_rtl.css

+ 2 - 1
README.txt

@@ -3,7 +3,7 @@
 
 --- README  -------------------------------------------------------------
 
-SimpleMenu, Version 2.1
+SimpleMenu, Version 3.0
 
 Written by Ted Serbinski, aka, m3avrck
   hello@tedserbinski.com
@@ -12,6 +12,7 @@ Written by Ted Serbinski, aka, m3avrck
 Requirements: Drupal 5.0
 
 Icons from: http://www.famfamfam.com/
+jQuery Superfish: http://users.tpg.com.au/j_birch/plugins/superfish/
 
 
 

+ 79 - 51
simplemenu.css

@@ -1,74 +1,102 @@
 /* $Id$ */
-
-ul#simplemenu,ul#simplemenu ul,ul#simplemenu li,ul#simplemenu a {
-color:#333;
-display:block;
-list-style:none;
-margin:0;
-padding:0;
-z-index:48;
+#simplemenu
+{
+	background:#ddd;
+	color:#333;
+	margin:0;
+	padding:0;
+	z-index:48;
+	border-bottom:1px solid #999;
+	font:11px Verdana, Helvetica, sans-serif;
+	left:0;
+	position:absolute;
+	top:0;
+	width:100%;
+	height:20px;
+	z-index:48;
 }
 
-ul#simplemenu {
-background:#ddd;
-border-bottom:1px solid #999;
-font:11px Verdana, Helvetica, sans-serif;
-left:0;
-position:absolute;
-top:0;
-width:100%;
-height:21px;
+#simplemenu li
+{
+	background:#ddd;
+	border-right:1px solid #999;
+	border-left:1px solid #eee;
+	float:left;
+	list-style:none;
+	position:relative;
+	margin:0;
+	padding:0;
+	z-index:48;
 }
 
-ul#simplemenu li {
-float:left;
-border-right:1px solid #999;
-border-left:1px solid #eee;
-text-align: left;  
+#simplemenu a
+{
+	color:#333;
+	display:block;
+	float:left;
+	padding:.3em 2em .3em .6em;
+	text-decoration:none;
+	background:#ddd;
 }
 
-ul#simplemenu li a {
-background:#ddd;
-padding:0.3em 2em 0.3em 0.6em;
-text-decoration:none;
+#simplemenu li.expanded > a
+{
+	background:url(right-green.gif) no-repeat 97%;
+	padding-right:2em;
 }
 
-ul#simplemenu ul li a {
-border:none;
-width:11em;
+#simplemenu li.root > a
+{
+	font-weight:700;
+	background:url(down-green.gif) no-repeat 97%;
 }
 
-ul#simplemenu li.expanded > a {
-background:#ddd url(right-green.gif) no-repeat 97%;
+#simplemenu li ul
+{
+	float:none;
+	top:-999em;
+	position:absolute;
+	margin:0;
+	padding:0;
+	z-index:48;
+	width:14em;
+	background:#ddd;
+	border:1px solid #999;
 }
 
-ul#simplemenu li.root > a {
-font-weight:bold;
-background:#ddd url(down-green.gif) no-repeat 97%;
+#simplemenu li:hover,#simplemenu li.sfhover,#simplemenu a:focus,#simplemenu a:hover,#simplemenu a:active
+{
+	background:#3875d7;
+	color:#fff;
 }
 
-ul#simplemenu li:hover > a {
-background-color:#3875d7;
-color:#fff;
+#simplemenu li:hover ul,#simplemenu li.sfhover ul
+{
+	left:-1px;
+	top:20px;
 }
 
-ul#simplemenu li ul {
-background:#999;
-border:1px solid #999;
-left:-9999px;
-position:absolute;
-width:14em;
-z-index:24;
-}       
+#simplemenu li:hover li ul,#simplemenu li.sfhover li ul
+{
+	top:-999em;
+}
 
-ul#simplemenu li ul ul {
-margin:0 0 0 6em;
+#simplemenu li li:hover ul,#simplemenu li li.sfhover ul
+{
+	left:14em;
+	top:-1px;
+	width:14em;
 }
 
-ul#simplemenu li:hover ul ul,ul#simplemenu li:hover ul ul ul,ul#simplemenu li.sfhover ul ul,ul#simplemenu li.sfhover ul ul ul {
-left:-9999px;
+#simplemenu li li
+{
+	background:#ddd;
+	float:none;
+	border:none;
 }
 
-ul#simplemenu li:hover ul,ul#simplemenu li li:hover ul,ul#simplemenu li li li:hover ul,ul#simplemenu li.sfhover ul,ul#simplemenu li li.sfhover ul,ul#simplemenu li li li.sfhover ul {
-left:auto;
+#simplemenu li li a
+{
+	float:none;
+	padding-right:0;
 }

+ 119 - 9
simplemenu.js

@@ -19,13 +19,123 @@ $(document).ready(function() {
       break;
   }  
   
-  $('body').css('margin-top', '23px');
+  $('body').css('margin-top', '20px');
   
-  // Build menu
-  $('#simplemenu').append(simplemenu);
-  $('#simplemenu li').hover(function() {
-    $('ul', this).slideDown(200);
-  }, function() {});
-  $('#simplemenu a').title('');
-  $('#simplemenu').children('li.expanded').addClass('root');          
-});
+  // Build menu        
+  $('#simplemenu').append(simplemenu).children('li.expanded').addClass('root').superfish({
+		animation : { opacity:"show", delay: 750 }
+	})
+	.find(">li[ul]")
+		.mouseover(function(){
+			$("ul", this).bgIframe({opacity:false});
+		})
+		.find("a")
+			.focus(function(){
+				$("ul", $("#simplemenu>li[ul]")).bgIframe({opacity:false});
+			});    
+});           
+
+/*
+ * Superfish - jQuery menu widget
+ *
+ * Copyright (c) 2007 Joel Birch
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * 	http://www.opensource.org/licenses/mit-license.php
+ * 	http://www.gnu.org/licenses/gpl.html
+ *
+ * Last updated: 18/3/07 to remove iframes on 'out'
+ */
+
+(function($){
+	$.fn.superfish = function(o){
+		var defaults = {
+			hoverClass	: "sfHover",
+			delay		: 500,
+			animation	: {opacity:"show"},
+			speed		: "normal"
+		},
+			over = function(){
+				var $$ = $(this);
+				clearTimeout(this.sfTimer);
+				if (!$$.is("."+o.hoverClass)) {
+					$$.addClass(o.hoverClass)
+						.find("ul")
+							.animate(o.animation,o.speed)
+							.end()
+						.siblings()
+						.removeClass(o.hoverClass);
+				}
+			},
+			out = function(){
+				var $$ = $(this);
+				this.sfTimer=setTimeout(function(){
+					$$.removeClass(o.hoverClass)
+					.find("iframe", this)
+						.remove();
+				},o.delay);
+			};
+		o = $.extend(defaults, o || {});
+		var sfHovAr=$("li",this)
+			.hover(over,out)
+			.find("a").each(function() {
+				var $a = $(this), $li = $a.parents("li");
+				$a.focus(function(){ $li.each(over); })
+				  .blur(function(){ $li.each(out); });
+			}).end();
+		$(window).unload(function() {
+			sfHovAr.unbind("mouseover").unbind("mouseout");
+		});
+		return this;
+	};
+})(jQuery);        
+
+/* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * $LastChangedDate: 2007-03-07 15:07:51 -0600 (Wed, 07 Mar 2007) $
+ * $Rev: 1505 $
+ */
+
+/**
+ * The bgiframe is chainable and applies the iframe hack to get 
+ * around zIndex issues in IE6. It will only apply itself in IE 
+ * and adds a class to the iframe called 'bgiframe'.
+ * 
+ * It does take borders into consideration but all values
+ * need to be in pixels and the element needs to have
+ * position relative or absolute.
+ *
+ * NOTICE: This plugin uses CSS expersions in order to work
+ * with an element's borders, height and with and can result in poor 
+ * performance when used on an element that changes properties 
+ * like size and position a lot. Two of these expressions can be
+ * removed if border doesn't matter and performance does.
+ * See lines 39 and 40 below and set top: 0 and left: 0
+ * instead of their current values.
+ *
+ * @example $('div').bgiframe();
+ * @before <div><p>Paragraph</p></div>
+ * @result <div><iframe class="bgiframe".../><p>Paragraph</p></div>
+ *
+ * @name bgiframe
+ * @type jQuery
+ * @cat Plugins/bgiframe
+ * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
+ */
+jQuery.fn.bgIframe = jQuery.fn.bgiframe = function() {
+	// This is only for IE6
+	if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function') ) return this;
+	var html = '<iframe class="bgiframe" src="javascript:;" tabindex="-1" '
+	 					+'style="display:block; position:absolute; '
+						+'top: expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)  || 0) * -1) + \'px\'); '
+						+'left:expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth) || 0) * -1) + \'px\'); ' 
+						+'z-index:-1; filter:Alpha(Opacity=\'0\'); '
+						+'width:expression(this.parentNode.offsetWidth + \'px\'); '
+						+'height:expression(this.parentNode.offsetHeight + \'px\')"/>';
+	return this.each(function() {
+		if ( !jQuery('iframe.bgiframe', this)[0] )
+			this.insertBefore( document.createElement(html), this.firstChild );
+	});
+};

+ 1 - 1
simplemenu.module

@@ -50,7 +50,7 @@ function simplemenu_footer() {
     );
     
     drupal_add_js(array('simplemenu' => $settings), 'setting');
-    drupal_add_js('var simplemenu = '. drupal_to_js(simplemenu_get_menu() .';'), 'inline');
+    drupal_add_js('var simplemenu = '. drupal_to_js(simplemenu_get_menu()) .';', 'inline');
     drupal_add_js($path .'/simplemenu.js');
   }
 }

+ 24 - 14
simplemenu_rtl.css

@@ -1,20 +1,30 @@
 /* $Id$ */
-                               
-ul#simplemenu li {
-float:right;
-border-right:1px solid #eee;
-border-left:1px solid #999;  
+
+#simplemenu li
+{
+	float:right;
+	border-right:1px solid #eee;
+	border-left:1px solid #999;
 }
 
-ul#simplemenu li.expanded > a {
-background:#ddd url(left-green.gif) no-repeat 97%;
-}     
+#simplemenu a
+{
+	padding:.3em .6em .3em 2em;
+}
 
-ul#simplemenu li.root > a {
-font-weight:bold;
-background:#ddd url(down-green.gif) no-repeat 97%;
-}  
+#simplemenu li.expanded > a
+{
+	background:url(left-green.gif) no-repeat 3%;
+	padding-left:2em;
+}
+
+#simplemenu li.root > a
+{
+	font-weight:700;
+	background:url(down-green.gif) no-repeat 3%;
+}
 
-ul#simplemenu li:hover ul,ul#simplemenu li li:hover ul,ul#simplemenu li li li:hover ul,ul#simplemenu li.sfhover ul,ul#simplemenu li li.sfhover ul,ul#simplemenu li li li.sfhover ul {
-right:auto;
+#simplemenu li li:hover ul,#simplemenu li li.sfhover ul
+{
+	left:-14.2em;
 }