Просмотр исходного кода

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

Ted Serbinski 18 лет назад
Родитель
Сommit
21563d09ce
5 измененных файлов с 225 добавлено и 76 удалено
  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;
 }