SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help on roll over drop down menu

    http://www.kfx2.com/clients/doe/htdocs/

    Roll over the image Parents/Family and Community. You will see that the roll over drop down menu goes behind the pull down menu of Latest News. The menu's do this in Netscape 6 and IE 6. They work fine in Netscape 4.7.

    Any suggestions on how I can layer the roll over drop down menu's to be on top in all browsers?

    Here are my attributes for the roll over menu's:

    SDDM_submenu_x = 10
    SDDM_submenu_y = 35
    SDDM_submenu_width = 150

    SDDM_submenu_border = 1
    SDDM_submenu_border_color = "#000000"
    SDDM_submenu_item_indent = 5
    SDDM_submenu_item_height = 18
    SDDM_submenu_item_spacing = 1
    SDDM_submenu_item_spacing_color = "#BBC8C1"
    SDDM_submenu_background_color = "#BBC8C1"
    SDDM_submenu_highlight_color = "#FBF1D0"

    SDDM_submenu_font_face = "Arial, Helvetica, sans-serif"
    SDDM_submenu_font_size = 2
    SDDM_submenu_font_color = "#0E3D19"
    SDDM_submenu_font_highlight_color = "#0E3D19"
    SDDM_submenu_url_target = "_self"
    SDDM_hide_delay = 200

    Is there something I can add to layer them on top?

    There has to be something but I'm fairly new to developing menu's like this. Any help would be appreciated!

    Thanks!

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried specifying the z-index for stacking order, and or visibility? Using layers within <div> can help to achieve this, or check out some the dreamweaver extensions code that is available from ProjectSeven.com.

    It may help you to find what you are looking for even if you are not using dremaweaver. Just check the source code that it produces (see below).

    function P7_Snap() { //v2.62 by PVII
    var x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,args=P7_Snap.arguments;a=parseInt(a);
    for (k=0; k<(args.length-3); k+=4)
    if ((g=MM_findObj(args[k]))!=null) {
    el=eval(MM_findObj(args[k+1]));
    a=parseInt(args[k+2]);b=parseInt(args[k+3]);
    x=0;y=0;ox=0;oy=0;p="";tx=1;da="document.all['"+args[k]+"']";
    if(document.getElementById) {
    d="document.getElementsByName('"+args[k]+"')[0]";
    if(!eval(d)) {d="document.getElementById('"+args[k]+"')";if(!eval(d)) {d=da;}}
    }else if(document.all) {d=da;}
    if (document.all || document.getElementById) {
    while (tx==1) {p+=".offsetParent";
    if(eval(d+p)) {x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
    }else{tx=0;}}
    ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);var tw=x+ox+y+oy;
    if(tw==0 || (navigator.appVersion.indexOf("MSIE 4")>-1 && navigator.appVersion.indexOf("Mac")>-1)) {
    ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);
    }else{var w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;
    a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
    x=document.body.scrollLeft + event.clientX + bx;
    y=document.body.scrollTop + event.clientY;}}
    }else if (document.layers) {x=g.x;y=g.y;var q0=document.layers,dd="";
    for(var s=0;s<q0.length;s++) {dd='document.'+q0[s].name;
    if(eval(dd+'.document.'+args[k])) {x+=eval(dd+'.left');y+=eval(dd+'.top');break;}}}
    if(el) {e=(document.layers)?el:el.style;
    var xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
    if(navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4){xx+="px";yy+="px";}
    if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
    xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);
    xx+="px";yy+="px";}e.left=xx;e.top=yy;}}
    }
    Then you just reference it within your html as follows:

    P7_Snap('R3arrow','flyoutMenu',-113,16,'R3arrow','flyoutClose1',-205,-50,'menu_R3','flyoutClose2',101,-50)
    There is obviously a little more to it than this, but the guys at Project Seven have some great free extensions for dreamweaver that are extremely helpful.
    Go Leafs Go!!!!!!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •