Layers

**Dark-Skys99** · 08-25-2004, 08:21 PM

Ive create a nav menu so that when you hover over the link a layer is shown..

I thought it was all fine... Until I resized the browser window.. Now the layers appear all out of place...

is there a way to set the positions so they appear in the same place in any size window??

Thanks

-James

**Christopher** · 08-25-2004, 08:41 PM

Yes, you can assign an ID to the thing being clicked (like a link or a button), then you can get the layer 'hover' where the link was clicked. It's hard to tell how you're doing it, seeing as there are many ways to make a menu system, but I'll try and give you an example (I'm a big 'learn by example' kind of person

)

HTML Code:

<html>
<head>
    <title>Blah</title>
    <script language="javascript">
    function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];

        return itm;
    }

    
    function getItemInfo(itm, what)
    {
        if(what == 'all')
        {
            var pos = new Array();
            pos['left']   = getItemInfo(itm, 'left');
            pos['right']  = getItemInfo(itm, 'right');
            pos['top']    = getItemInfo(itm, 'top');
            pos['width']  = getItemInfo(itm, 'width');
            pos['height'] = getItemInfo(itm, 'height');

            return pos;
        }

        else if(what == 'left')
        {
            var offset = itm.offsetLeft;
            while((itm = itm.offsetParent) != null)
                offset += itm.offsetLeft;

            return offset;
        }

        else if(what == 'right')
        {
            var offset = itm.offsetRight;
            while((itm = itm.offsetParent) != null)
                offset += itm.offsetRight;

            return offset;
        }

        else if(what == 'top')
        {
            var offset = itm.offsetTop;
            while((itm = itm.offsetParent) != null)
                offset += itm.offsetTop;

            return offset;
        }

        else if(what == 'width')
            return itm.offsetWidth;

        else if(what == 'height')
            return itm.offsetHeight;

        else
            return false;
    }

    function toggleMenu(id, link_itm)
    {
        menu_itm = getItem(id);

        if(!menu_itm || !link_itm)
            return true;

        if(menu_itm.style.display == 'none')
        {
            menu_itm.style.position = 'absolute';
            menu_itm.style.left     = getItemInfo(link_itm, 'left') + 'px';
            menu_itm.style.top      = (getItemInfo(link_itm, 'top') + getItemInfo(link_itm, 'height')) + 'px';
            menu_itm.style.display  = '';
        }
        else
            menu_itm.style.display  = 'none';
        
        return false;
    }
    </script>
</head>
<body>
<a href="#" id="show_menu" onclick="toggleMenu('menu', this)">Toggle Menu</a>

<div id="menu" style="display:none; padding: 8px; width: 150px; border: 1px solid #000; background: #CCC">
    Testing 123
</div>

</body>
</html>

These are the parts that matter:

Code:

            menu_itm.style.left     = getItemInfo(link_itm, 'left') + 'px';
            menu_itm.style.top      = (getItemInfo(link_itm, 'top') + getItemInfo(link_itm, 'height')) + 'px';

(getItemInfo is just a little function I made to make things a bit easier)
The first one get's the location of the left side of the link and assigns it to your menu's 'left' property (so they align). Then the second one get's the position from the top of the link and adds the height of the link, making the menu appear just below it.

I hope I explained it okay

**Dark-Skys99** · 08-25-2004, 09:13 PM

Thanks

Quote:

I'm a big 'learn by example' kind of person

Yea.. More likely to understand quicker with an example

-James