bachir/materio-base-legacy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ted Serbinski
2007-04-07 05:41:34 +00:00
parent 4d03934230
commit 21563d09ce
5 changed files with 226 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.txt
View File

@@ -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/

132
simplemenu.css
View File

@@ -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;
}

128
simplemenu.js
View File

@@ -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 );
});
};

2
simplemenu.module
View File

@@ -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');
}
}

38
simplemenu_rtl.css
View File

@@ -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;
}
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.root > a
{
font-weight:700;
background:url(down-green.gif) no-repeat 3%;
}
#simplemenu li li:hover ul,#simplemenu li li.sfhover ul
{
left:-14.2em;
}