From e4fab2b9f5320d064f68ac16f6103f2ed11c0b86 Mon Sep 17 00:00:00 2001 From: pete Date: Fri, 23 Jan 2009 13:39:38 +0000 Subject: new cross-browser js toolbar menu git-svn-id: https://code.elgg.org/elgg/trunk@2606 36083f99-b078-4883-b0ff-0f9b5a30f544 --- views/default/css.php | 128 +++++++++++++++++------------- views/default/js/initialise_elgg.php | 75 +++++++++++++++++ views/default/navigation/topbar_tools.php | 18 ++--- 3 files changed, 155 insertions(+), 66 deletions(-) (limited to 'views/default') diff --git a/views/default/css.php b/views/default/css.php index 3e455bc0b..1cc2bb9d0 100644 --- a/views/default/css.php +++ b/views/default/css.php @@ -388,6 +388,7 @@ blockquote { position:relative; width:100%; height:24px; + z-index: 9000; /* if you have multiple position:relative elements, then IE sets up separate Z layer contexts for each one, which ignore each other */ } #elgg_topbar_container_left { float:left; @@ -542,83 +543,97 @@ blockquote { background: #0054a7; } + /* *************************************** TOP BAR - VERTICAL TOOLS MENU *************************************** */ +/* elgg toolbar menu setup */ #topbardropdownmenu, #topbardropdownmenu ul { margin:0; padding:0; display:inline; float:left; list-style-type: none; - z-index: 99999999; + z-index: 5000; + position: relative; } #topbardropdownmenu { - margin:0pt 15px 0pt 5px; + margin:0pt 20px 0pt 5px; +} +#topbardropdownmenu li { + display: block; + list-style: none; + margin: 0; + padding: 0; + float: left; + position: relative; } -/* Tools link in top menu */ -#topbardropdownmenu a, #topbardropdownmenu a:visited { +#topbardropdownmenu a { display:block; - padding:3px 13px 3px 3px; +} +#topbardropdownmenu ul { + display: none; + position: absolute; + left: 0; + margin: 0; + padding: 0; +} +/* IE6 fix */ +* html #topbardropdownmenu ul { + line-height: 1.1em; +} +/* IE6/7 fix */ +#topbardropdownmenu ul a { + zoom: 1; +} +#topbardropdownmenu ul li { + float: none; +} +/* elgg toolbar menu style */ +#topbardropdownmenu ul { + width: 150px; +} +#topbardropdownmenu *:hover { + background-color: none; +} +#topbardropdownmenu a { + padding:3px; text-decoration:none; color:white; } -#topbardropdownmenu li ul a { - width:120px; - height:auto; - float:left; +#topbardropdownmenu li.hover a { + background-color: #4690d6; + text-decoration: none; } - -/* menu list items */ -#topbardropdownmenu li {float:left; position:relative; background:#cccccc;} -#topbardropdownmenu ul a { - border-left:1px solid #f5f5f5; - border-right:1px solid #333333; - color:#4690d6 !important; - padding:2px 6px 2px 6px !important; - background: #DEDEDE !important; - border-top:1px solid #f5f5f5; - border-bottom:1px solid #999999; +#topbardropdownmenu ul li.drop a { + font-weight: normal; } - -/* IE7 */ -#topbardropdownmenu li:hover {position:relative;} -/* Make the Tools nav color persist */ -#topbardropdownmenu li:hover > a {background: #4690d6 url(_graphics/toolbar_arrow.png) no-repeat right -18px;} -#topbardropdownmenu li ul {display:none;width:134px !important;} -#topbardropdownmenu li:hover > ul { - display:block; - position:absolute; - top:-11px; - left:80px; - padding:10px 30px 30px 30px; - background:transparent url(_graphics/spacer.gif); -} -/* Position the first sub level beneath the top level links */ -#topbardropdownmenu > li:hover > ul { - left:-30px; - top:16px; -} -#topbardropdownmenu li a:active, #topbardropdownmenu li a:focus { - background:#4690d6; - color:white; +/* IE7 fixes */ +*:first-child+html #elgg_topbar_container_left a.pagelinks { + padding-bottom:6px; } -#topbardropdownmenu li.drop { - background: url(_graphics/toolbar_arrow.png) no-repeat right 9px; +*:first-child+html #topbardropdownmenu li.drop a.menuitemtools { + padding-bottom:6px; } -/* dropdown list links hover */ -#topbardropdownmenu li.drop ul li a:hover { - color:white !important; - background: #4690d6 !important; - border-left:1px solid #99ccff; - border-top:1px solid #99ccff; +#topbardropdownmenu ul { + top: 25px; +} +#topbardropdownmenu ul li a { + background-color: #999999;/* menu off state color */ + font-weight: bold; + padding-left:6px; + padding-top:4px; + padding-bottom:0; + height:22px; + border-bottom: 1px solid white; +} +#topbardropdownmenu ul a.hover { + background-color: #333333; +} +#topbardropdownmenu ul a { + opacity: 0.9; + filter: alpha(opacity=90); } -/* IE6 ONLY - make the sublevels appear */ -* html #topbardropdownmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(_graphics/spacer.gif);} -#topbardropdownmenu li a:hover ul {visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;} -#topbardropdownmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:99999; font-size:1em;} -* html #topbardropdownmenu li.drop {background: url(_graphics/toolbar_arrow_ie.gif) no-repeat right 9px;} -* html #topbardropdownmenu li a:hover {position:relative; background:#4690d6 url(_graphics/toolbar_arrow_ie.gif) no-repeat right -18px;} /* *************************************** @@ -2095,3 +2110,4 @@ div.ajax_loader { width:100%; height:33px; } + diff --git a/views/default/js/initialise_elgg.php b/views/default/js/initialise_elgg.php index 38f25673e..390b9cf94 100644 --- a/views/default/js/initialise_elgg.php +++ b/views/default/js/initialise_elgg.php @@ -209,3 +209,78 @@ jQuery.cookie = function(name, value, options) { return cookieValue; } }; + +// ELGG TOOLBAR MENU +$.fn.elgg_topbardropdownmenu = function(options) { + + options = $.extend({speed: 350}, options || {}); + + this.each(function() { + + var root = this, zIndex = 5000; + + function getSubnav(ele) { + if (ele.nodeName.toLowerCase() == 'li') { + var subnav = $('> ul', ele); + return subnav.length ? subnav[0] : null; + } else { + + return ele; + } + } + + function getActuator(ele) { + if (ele.nodeName.toLowerCase() == 'ul') { + return $(ele).parents('li')[0]; + } else { + return ele; + } + } + + function hide() { + var subnav = getSubnav(this); + if (!subnav) return; + $.data(subnav, 'cancelHide', false); + setTimeout(function() { + if (!$.data(subnav, 'cancelHide')) { + $(subnav).slideUp(options.speed); + } + }, 200); + } + + function show() { + var subnav = getSubnav(this); + if (!subnav) return; + $.data(subnav, 'cancelHide', true); + $(subnav).css({zIndex: zIndex++}).slideDown(options.speed); + if (this.nodeName.toLowerCase() == 'ul') { + var li = getActuator(this); + $(li).addClass('hover'); + $('> a', li).addClass('hover'); + } + } + + $('ul, li', this).hover(show, hide); + $('li', this).hover( + function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); }, + function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); } + ); + + }); + +}; + + + + + + + + + + + + + + + diff --git a/views/default/navigation/topbar_tools.php b/views/default/navigation/topbar_tools.php index 03e7317c8..9b0c06786 100644 --- a/views/default/navigation/topbar_tools.php +++ b/views/default/navigation/topbar_tools.php @@ -27,25 +27,23 @@ ?>