Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Spry Menu Bar

  1. #1

    Spry Menu Bar

    Ciao a tutti!
    Sto cercando di realizzare una menu bar con Spry Menu Bar di Dreamweaver CS3.
    Su Firefox funziona tutto alla perfezione, su IE 6 i sottomenu compaiono in orizzontale anzichè in verticale, e su IE 7 compaiono giusti ma al secondo livello di sottomenu non si visualizza la tendina.
    Cosa può essere secondo voi?
    Vi allego JS e CSS

    Codice JS:
    Codice PHP:
    /* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */

    var Spry;
    if(!
    Spry)
    {
        
    Spry = {};
    }
    if(!
    Spry.Widget)
    {
        
    Spry.Widget = {};
    }

    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a menu
    Spry.Widget.MenuBar = function(elementopts)
    {
        
    this.init(elementopts);
    };

    Spry.Widget.MenuBar.prototype.init = function(elementopts)
    {
        
    this.element this.getElement(element);

        
    // represents the current (sub)menu we are operating on
        
    this.currMenu null;

        var 
    isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
        if(
    typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
        {
            
    // bail on older unsupported browsers
            
    return;
        }

        
    // load hover images now
        
    if(opts)
        {
            for(var 
    k in opts)
            {
                var 
    rollover = new Image;
                
    rollover.src opts[k];
            }
        }

        if(
    this.element)
        {
            
    this.currMenu this.element;
            var 
    items this.element.getElementsByTagName('li');
            for(var 
    i=0i<items.lengthi++)
            {
                
    this.initialize(items[i], elementisie);
                if(
    isie)
                {
                    
    this.addClassName(items[i], "MenuBarItemIE");
                    
    items[i].style.position "static";
                }
            }
            if(
    isie)
            {
                if(
    this.hasClassName(this.element"MenuBarVertical"))
                {
                    
    this.element.style.position "relative";
                }
                var 
    linkitems this.element.getElementsByTagName('a');
                for(var 
    i=0i<linkitems.lengthi++)
                {
                    
    linkitems[i].style.position "relative";
                }
            }
        }
    };

    Spry.Widget.MenuBar.prototype.getElement = function(ele)
    {
        if (
    ele && typeof ele == "string")
            return 
    document.getElementById(ele);
        return 
    ele;
    };

    Spry.Widget.MenuBar.prototype.hasClassName = function(eleclassName)
    {
        if (!
    ele || !className || !ele.className || ele.className.search(new RegExp("\\b" className "\\b")) == -1)
        {
            return 
    false;
        }
        return 
    true;
    };

    Spry.Widget.MenuBar.prototype.addClassName = function(eleclassName)
    {
        if (!
    ele || !className || this.hasClassName(eleclassName))
            return;
        
    ele.className += (ele.className " " "") + className;
    };

    Spry.Widget.MenuBar.prototype.removeClassName = function(eleclassName)
    {
        if (!
    ele || !className || !this.hasClassName(eleclassName))
            return;
        
    ele.className ele.className.replace(new RegExp("\\s*\\b" className "\\b""g"), "");
    };

    // addEventListener for Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(elementeventTypehandlercapture)
    {
        try
        {
            if (
    element.addEventListener)
            {
                
    element.addEventListener(eventTypehandlercapture);
            }
            else if (
    element.attachEvent)
            {
                
    element.attachEvent('on' eventTypehandler);
            }
        }
        catch (
    e) {}
    };

    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
    Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
    {
        var 
    layer document.createElement('iframe');
        
    layer.tabIndex '-1';
        
    layer.src 'javascript:false;';
        
    menu.parentNode.appendChild(layer);
        
        
    layer.style.left menu.offsetLeft 'px';
        
    layer.style.top menu.offsetTop 'px';
        
    layer.style.width menu.offsetWidth 'px';
        
    layer.style.height menu.offsetHeight 'px';
    };

    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
    {
        var 
    layers menu.parentNode.getElementsByTagName('iframe');
        while(
    layers.length 0)
        {
            
    layers[0].parentNode.removeChild(layers[0]);
        }
    };

    // clearMenus for Menu Bar
    // root is the top level unordered list (<ul> tag)
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    {
        var 
    menus root.getElementsByTagName('ul');
        for(var 
    i=0i<menus.lengthi++)
        {
            
    this.hideSubmenu(menus[i]);
        }
        
    this.removeClassName(this.element"MenuBarActive");
    };

    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    {
        return (
    navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == && event.target.parentNode == event.relatedTarget)));
    };

    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
    {
        if(
    this.currMenu)
        {
            
    this.clearMenus(this.currMenu);
            
    this.currMenu null;
        }
        
        if(
    menu)
        {
            
    this.addClassName(menu"MenuBarSubmenuVisible");
            if(
    typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
            {
                if(!
    this.hasClassName(this.element"MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
                {
                    
    menu.style.top menu.parentNode.offsetTop 'px';
                }
            }
            if(
    typeof document.uniqueID != "undefined")
            {
                
    this.createIframeLayer(menu);
            }
        }
        
    this.addClassName(this.element"MenuBarActive");
    };

    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
    {
        if(
    menu)
        {
            
    this.removeClassName(menu"MenuBarSubmenuVisible");
            if(
    typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
            {
                
    menu.style.top '';
                
    menu.style.left '';
            }
            
    this.removeIframeLayer(menu);
        }
    };

    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitemelementisie)
    {
        var 
    opentimeclosetime;
        var 
    link listitem.getElementsByTagName('a')[0];
        var 
    submenus listitem.getElementsByTagName('ul');
        var 
    menu = (submenus.length submenus[0] : null);

        var 
    hasSubMenu false;
        if(
    menu)
        {
            
    this.addClassName(link"MenuBarItemSubmenu");
            
    hasSubMenu true;
        }

        if(!
    isie)
        {
            
    // define a simple function that comes standard in IE to determine
            // if a node is within another node
            
    listitem.contains = function(testNode)
            {
                
    // this refers to the list item
                
    if(testNode == null)
                {
                    return 
    false;
                }
                if(
    testNode == this)
                {
                    return 
    true;
                }
                else
                {
                    return 
    this.contains(testNode.parentNode);
                }
            };
        }
        
        
    // need to save this for scope further down
        
    var self this;

        
    this.addEventListener(listitem'mouseover', function(e)
        {
            if(
    self.bubbledTextEvent())
            {
                
    // ignore bubbled text events
                
    return;
            }
            
    clearTimeout(closetime);
            if(
    self.currMenu == listitem)
            {
                
    self.currMenu null;
            }
            
    // show menu highlighting
            
    self.addClassName(linkhasSubMenu "MenuBarItemSubmenuHover" "MenuBarItemHover");
            if(
    menu && !self.hasClassName(menu"MenuBarSubmenuVisible"))
            {
                
    opentime window.setTimeout(function(){self.showSubmenu(menu);}, 250);
            }
        }, 
    false);

        
    this.addEventListener(listitem'mouseout', function(e)
        {
            if(
    self.bubbledTextEvent())
            {
                
    // ignore bubbled text events
                
    return;
            }

            var 
    related = (typeof e.relatedTarget != 'undefined' e.relatedTarget e.toElement);
            if(!
    listitem.contains(related))
            {
                
    clearTimeout(opentime);
                
    self.currMenu listitem;

                
    // remove menu highlighting
                
    self.removeClassName(linkhasSubMenu "MenuBarItemSubmenuHover" "MenuBarItemHover");
                if(
    menu)
                {
                    
    closetime window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
                }
            }
        }, 
    false);
    }; 
    Shryne
    --------------------------------------------------
    WebMaster di Loskabrones.net
    --------------------------------------------------

  2. #2
    Codice CSS:
    Codice PHP:
    @charset "UTF-8";

    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /*******************************************************************************
     LAYOUT INFORMATION: describes box model, positioning, z-order
    *******************************************************************************/

    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-sizex-small;
        
    cursor: default;
        
    width200;

    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
    ul.MenuBarActive
    {
        
    z-index1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-sizex-small;
        
    positionrelative;
        
    text-alignleft;
        
    cursorpointer;
        
    displayblock;
        
    width200;
        
    padding-left5px;
        
    padding-right5px;
        
    floatleft;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-sizex-small;
        
    z-index1020;
        
    cursor: default;
        
    width200;
        
    positionabsolute;
        
    left: -1000em;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
        
    floatleft;
        
    leftauto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
        
    width200;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
        
    positionabsolute;
        
    margin: -200 0 65%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    {
        
    leftauto;
        
    top0;
    }

    /*******************************************************************************
     DESIGN INFORMATION: describes color scheme, borders, fonts
    *******************************************************************************/

    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
        
    border0px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
        
    displayblock;
        
    cursor: default;
        
    background-color#000;
        
    padding5px 10px;
        
    color#333;
        
    text-decorationnone;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hoverul.MenuBarHorizontal a:focus
    {
        
    background-color#000;
        
    color#FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHoverul.MenuBarHorizontal a.MenuBarItemSubmenuHoverul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
        
    background-color#000;
        
    color#FFF;
    }

    /*******************************************************************************
     SUBMENU INDICATION: styles if there is a submenu under a given menu item
    *******************************************************************************/

    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    {
        
    background-imageurl(SpryMenuBarDown.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    {
        
    background-imageurl(SpryMenuBarRight.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    {
        
    background-imageurl(SpryMenuBarDownHover.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    {
        
    background-imageurl(SpryMenuBarRightHover.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }

    /*******************************************************************************
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    *******************************************************************************/

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
        
    positionabsolute;
        
    z-index1020;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screenprojection
    {
        
    ul.MenuBarHorizontal li.MenuBarItemIE
        
    {
            
    displayinline;
            
    floatleft;
            
    background#000;
        
    }
    }
    ul.MenuBarHorizontal li{position:relative!important}
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
        
    left:0!important;
        
    top2em!important;

    Ho una scadenza questa sera ed ho assolutamente bisogno del vostro aiuto!!!
    Grazie!
    Shryne
    --------------------------------------------------
    WebMaster di Loskabrones.net
    --------------------------------------------------

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.