Group: http://groups.google.com/group/sitedesign/topics
- css drop-down menu misbehaving in FF [1 Update]
- "Vasyl Baryshev" <vaab2000@comcast.net> Aug 06 10:00PM -0400 ^
Guys, I hav ehit the wall with this menu. It is a simple CSS and JQuery
three-tier horizontal drop-down menu, only in FF the second sublevel is not
aligned with the first sublevel:
http://www.accc-cancer.org/default-newMenu.asp - look where it says
"Education".
Here's the CSS:
.ddsmoothmenu
{
font:normal 12px Arial;
background:#414141; /*background of menu bar (default
state)*/
width:100%;
}
.ddsmoothmenu ul
{
z-index:100;
margin:0;
padding:0;
list-style-type:none;
}
/*Top level list items*/
.ddsmoothmenu ul li
{
position:relative;
display:inline;
float:left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a
{
display:block;
background:#414141; /*background of menu items (default
state)*/
color:white;
padding:8px 11px;
border-right:1px solid #778;
color:#2d2b2b;
text-decoration:none;
}
* html .ddsmoothmenu ul li a
{ /*IE6 hack to get sub menu links to behave correctly*/
display:inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited
{
color:white;
}
.ddsmoothmenu ul li a.selected
{ /*CSS class that's dynamically added to the currently
active menu items' LI A element*/
background:black;
color:white;
}
.ddsmoothmenu ul li a:hover
{
background:black; /*background of menu items during
onmouseover (hover state)*/
color:white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul
{
position:absolute;
left:0;
display:none; /*collapse all sub menus to begin with*/
visibility:hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li
{
display:table-row;
float:none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul
{
margin-top:0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a
{
font:normal 12px Arial;
width:210px; /*width of sub menus*/
padding:5px;
margin:0;
border-bottom:1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images #########
*/
.downarrowclass
{
position:absolute;
top:12px;
right:5px;
}
.rightarrowclass
{
position:absolute;
top:6px;
right:5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{
opacity: 0.8;
}
===============================================================
and the JS:
var ddsmoothmenu={
arrowimages: {down:['downarrowclass', 'down.gif', 39],
right:['rightarrowclass', 'right.gif']},
transition: {overtime:300, outtime:300}, //duration of slide in/ out
animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds
before sub menus appear and disappear, respectively
///////Stop configuring beyond here///////////////////////////
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1,
//detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
css3support: window.msPerformance || (!document.all &&
document.querySelector), //detect browsers that support CSS3 box shadows
(ie9+ or FF3.5+, Safari3+, Chrome etc)
getajaxmenu:function($, setting){ //function to fetch external page
containing the panel DIVs
var $menucontainer=$('#'+setting.contentsource[0])
//reference empty div on page that will hold menu
$menucontainer.html("Loading Menu...")
$.ajax({
url: setting.contentsource[1], //path to
external menu file
async: true,
error:function(ajaxrequest){
$menucontainer.html('Error
fetching content. Server Response: '+ajaxrequest.responseText)
},
success:function(content){
$menucontainer.html(content)
ddsmoothmenu.buildmenu($,
setting)
}
})
},
buildmenu:function($, setting){
var smoothmenu=ddsmoothmenu
var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference
main menu UL
$mainmenu.parent().get(0).className=setting.classname ||
"ddsmoothmenu"
var $headers=$mainmenu.find("ul").parent()
$headers.hover(
function(e){
$(this).children('a:eq(0)').addClass('selected')
},
function(e){
$(this).children('a:eq(0)').removeClass('selected')
}
)
$headers.each(function(i){ //loop through each LI header
var $curobj=$(this).css({zIndex: 100-i})
//reference current LI header
var
$subul=$(this).find('ul:eq(0)').css({display:'block'})
$subul.data('timers', {})
this._dimensions={w:this.offsetWidth,
h:this.offsetHeight, subulw:$subul.outerWidth(),
subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false //is top
level header?
$subul.css({top:this.istopheader &&
setting.orientation!='v'? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight:
smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
'<img src="'+
(this.istopheader && setting.orientation!='v'?
smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
+'" class="' +
(this.istopheader && setting.orientation!='v'?
smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
+ '" style="border:0;" />'
)
if (smoothmenu.shadow.enable &&
!smoothmenu.css3support){ //if shadows enabled and browser doesn't support
CSS3 box shadows
this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shad
ow.offsetx : this._dimensions.w), y:(this.istopheader?
$subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)}
//store this shadow's offsets
if (this.istopheader)
$parentshadow=$(document.body)
else{
var
$parentLi=$curobj.parents("li:eq(0)")
$parentshadow=$parentLi.get(0).$shadow
}
this.$shadow=$('<div
class="ddshadow'+(this.istopheader? ' toplevelshadow' :
'')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px'
, top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent
node for the next shadow div
}
$curobj.hover(
function(e){
var
$targetul=$subul //reference UL to reveal
var
header=$curobj.get(0) //reference header LI as DOM object
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
var menuleft=header.istopheader && setting.orientation!='v'? 0 :
header._dimensions.w
menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).
width())? (header.istopheader && setting.orientation!='v'?
-header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) :
menuleft //calculate this sub menu's offsets from its parent
if ($targetul.queue().length<=1){ //if 1 or less queued animations
$targetul.css({left:menuleft+"px",
width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'
}, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable && !smoothmenu.css3support){
var shadowleft=header.istopheader?
$targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
var
shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offset
y : header._shadowoffset.y
if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers,
restore shadow's opacity to full
header.$shadow.css({opacity:1})
}
header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px',
left:shadowleft+'px',
top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'},
ddsmoothmenu.transition.overtime)
}
}
},
ddsmoothmenu.showhidedelay.showdelay)
},
function(e){
var
$targetul=$subul
var
header=$curobj.get(0)
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer=setTimeout(function(){
$targetul.animate({height:'hide', opacity:'hide'},
ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable && !smoothmenu.css3support){
if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child
shadow's opacity to 0, as "overflow:hidden" doesn't work in them
header.$shadow.children('div:eq(0)').css({opacity:0})
}
header.$shadow.css({overflow:'hidden'}).animate({height:0},
ddsmoothmenu.transition.outtime)
}
},
ddsmoothmenu.showhidedelay.hidedelay)
}
) //end hover
}) //end $headers.each()
if (smoothmenu.shadow.enable && smoothmenu.css3support){
//if shadows enabled and browser supports CSS3 shadows
var $toplevelul=$('#'+setting.mainmenuid+'
ul li ul')
var
css3shadow=parseInt(smoothmenu.shadow.offsetx)+"px
"+parseInt(smoothmenu.shadow.offsety)+"px 5px #aaa" //construct CSS3
box-shadow value
var shadowprop=["boxShadow", "MozBoxShadow",
"WebkitBoxShadow", "MsBoxShadow"] //possible vendor specific CSS3 shadow
properties
for (var i=0; i<shadowprop.length; i++){
$toplevelul.css(shadowprop[i], css3shadow)
}
}
$mainmenu.find("ul").css({display:'none',
visibility:'visible'})
},
init:function(setting){
if (typeof setting.customtheme=="object" &&
setting.customtheme.length==2){ //override default menu colors
(default/hover) with custom set?
var mainmenuid='#'+setting.mainmenuid
var mainselector=(setting.orientation=="v")?
mainmenuid : mainmenuid+', '+mainmenuid
document.write('<style type="text/css">\n'
+mainselector+' ul li a
{background:'+setting.customtheme[0]+';}\n'
+mainmenuid+' ul li a:hover
{background:'+setting.customtheme[1]+';}\n'
+'</style>')
}
this.shadow.enable=(document.all && !window.XMLHttpRequest)?
false : this.shadow.enable //in IE6, always disable shadow
jQuery(document).ready(function($){ //ajax menu?
if (typeof setting.contentsource=="object"){
//if external ajax menu
ddsmoothmenu.getajaxmenu($,
setting)
}
else{ //else if markup menu
ddsmoothmenu.buildmenu($,
setting)
}
})
}
} //end ddsmoothmenu variable
====================================================
Plus, http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Any advice will be greatly appreciated.
Thanks, Vasyl Baryshev
-----------------------------------------------------------
Life is a journey and I follow my path.
<http://vaab-kardiogramma.blogspot.com/>
You received this because you are subscribed to the "Web Design and Development" group at Google Groups. Messages are prefixed with [WD&D] in the subject. No spam is allowed. Be civil, be professional; try to be helpful & mind your netiquette. All posts are Copyright the original author and the Web Design and Development group. No reproduction of this content is allowed in any electronic or printed form outside the group at Google Groups and the http://www.WDaDg.org website. Any unauthorized use of our copy constitutes illegal Copyright infringement and may well be prosecuted to the full extent of the law. Digital Signature: $©"[W|D|&|D]g"|^|!SiteDesign@GG||#%$
To post to this group, email SiteDesign@googlegroups.com
To unsubscribe, email SiteDesign-unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/SiteDesign?hl=en
No comments:
Post a Comment