major rewrite of menu code, tons of bug and usability fixes, faster, and better cross browser integration, and RTL support
This commit is contained in:
Ted Serbinski
parent
4d03934230
commit
21563d09ce
@ -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
132
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;
|
||||
}
|
||||
128
simplemenu.js
128
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 );
|
||||
});
|
||||
};
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user