diff --git a/README.txt b/README.txt index 947f89af..46c3db32 100644 --- a/README.txt +++ b/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/ diff --git a/simplemenu.css b/simplemenu.css index 9942b2c3..46a168b6 100644 --- a/simplemenu.css +++ b/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; -} - -ul#simplemenu li ul ul { -margin:0 0 0 6em; +#simplemenu li:hover li ul,#simplemenu li.sfhover li ul +{ + top:-999em; } -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:hover ul,#simplemenu li li.sfhover ul +{ + left:14em; + top:-1px; + width:14em; } -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 +{ + background:#ddd; + float:none; + border:none; +} + +#simplemenu li li a +{ + float:none; + padding-right:0; } \ No newline at end of file diff --git a/simplemenu.js b/simplemenu.js index 637e082a..42be6136 100644 --- a/simplemenu.js +++ b/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'); -}); \ No newline at end of file + // 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

Paragraph

+ * @result