menu positioning problem

isheikh · June 1st, 2004, 04:32 PM

Yes if someone makes the window small, then there will be a problem.

richard.york · June 1st, 2004, 05:02 PM

Ok, here is the solution to your problem..

position the menu relative to the <table> element, not to the window itself.

It's very easy to do.. on the main <table> element add the following CSS

table {
position: relative;
}

Now all of your menus will position relative to the <table> instead of relative to the window, which results in your menus remaining in place no matter what the screen resolution. If you'd like to position relative to another element, perhaps the <td> element itself, add the position: relative; declaration to that element.

In fact, it is also quite possible to create very simple dynamic menus that require only a few lines of Javascript to work in MSIE and *no javascript* et all to work on Mozilla/Netscape, e.g. pure CSS menus. And this is the solution that I recommend.

Have a read of this article on a list apart:
http://www.alistapart.com/articles/dropdowns/

HTH!

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

jacob · June 1st, 2004, 06:24 PM

Richard, I do not think that this will do the trick either, since the JS specifies that the menu is placed 'absolute'. Or am I wrong!? Can you in fact override the fact that the menu is absolute by using the CSS that you posted?

Jacob.

Snib · June 1st, 2004, 06:31 PM

Why not just take out the line that defines it as 'absolute'???

Snib

<><

richard.york · June 1st, 2004, 10:04 PM

position: relative; placed on an element causes any child elements with position: absolute; to be positioned relative to the element containing the position: relative; declaration. So removing the position: absolute; declaration will not provide the desired rendering effect.

Here is a brief how-to for pure CSS dynamic menus. This technique works in NS, Mozilla, IE 5 +, Safari, and yes AOL too (since AOL just uses IE as its browser). Its a very clean approach to dynamic menus that requires no JavaScript at all. My approach here defines more class names for each element than is really necessary but I thought it might help you to follow what's going on. In short, with this approach you can get rid of your JS all together.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title></title>
             <!--
                Ok, here's the caveat, this approach to dynamic menus only works in
                standards-compliant browsers. IE doesn't handle the :hover pseudo-
                class on anything other than <a> elements. So to get around this
                I've included a fantastic program that fixes IE's handling of the
                :hover pseudo-class called IE7. http://dean.edwards.name/IE7
                I've unzipped the IE7 files to a directory called IE7, and as in
                the instructions on the website made the IE7 style sheet the
                first style sheet included. Whaalah, now IE 7 can handle pure CSS
                menus, as well as a multitude of other CSS 1, 2 & 3 features not
                previously supported.
            -->




            <style type='text/css'>

                /* The list-style property defines how the list is to appear, with the[list]
                 * element this refers to the style of bullet. With list-style: none, the
                 * bullets are removed. By default the[list] element has some margin applied
                 * in IE its padding, so to get rid of both I zero out the amount.
                */

                ul.menu {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                /* Lists are stacked vertically by default, so in order to get a side by side
                 * layout each <li> item of the 'menu'[list] is floated left. Then some styles
                 * are applied on each element to give the look of buttons. The <li> items
                 * are given a relative position, which does nothing to change the element's
                 * position, but rather tells any sub elements that have position: absolute to
                 * position relative to that item.
                */

                li.menu-item {
                    position: relative;
                    float: left;
                    padding: 10px;
                    margin: 10px;
                    border: 1px solid black;
                    background: gray;
                }

                /* I don't want the submenu to appear by default, only when a user's mouse hovers over
                 * the right menu item. So I use display: none to hide it. I again remove the
                 * default list-style and zero away the margins and padding.
                */

                ul.submenu {
                    display: none;
                    position: absolute;
                    list-style: none;
                    background: gray;
                    border: 1px solid black;
                    padding: 0;
                    margin: 0;
                    width: 200px;
                    z-index: 3;
                    top: 39px;
                    left: -1px;
                }

                li.submenu-item {
                    margin: 5px;
                    padding: 5px;
                }

                /* Ok, here's the part that gets rid of JavaScript in standards compliant browsers.
                 * When a user's mouse hover's over a menu item containing a submenu, that sub menu
                 * gets displayed.
                */

                li.menu-item:hover > ul.submenu {
                    display: block;
                }

                li.menu-item:hover, li.submenu-item:hover {
                    background: lightgrey;
                    border: 1px solid black;
                }

            </style>
        </head>
        <body>
            <ul class='menu'>
                <li class='menu-item'>item1
                    <ul class='submenu'>
                        <li class='submenu-item'>sub menu 1</li>
                        <li class='submenu-item'>sub menu 2</li>
                        <li class='submenu-item'>sub menu 3</li>
                    </ul>
                </li>
                <li class='menu-item'>item2
                    <ul class='submenu'>
                        <li class='submenu-item'>sub menu 1</li>
                        <li class='submenu-item'>sub menu 2</li>
                        <li class='submenu-item'>sub menu 3</li>
                    </ul>
                </li>
            </ul>
        </body>
    </html>

While I was preparing my response I noticed that the IE7 download links weren't available, I'm quite sure this is just temporary, just keep checking back till they are available.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

isheikh · June 1st, 2004, 11:33 PM

I added

table {
position: relative;
}
In my style sheet, but it did not make any difference, probably I missed something else.

The code which writes the main menu is

***************************************

addmenu(menu=[ // This is the array that contains your menu properties and details
"mainmenu", // Menu Name - This is needed in order for the menu to be called
, // Menu Top - The Top position of the menu in pixels
120, // Menu Left - The Left position of the menu in pixels
520, // Menu Width - Menus width in pixels
1, // Menu Border Width
, // Screen Position - here you can use "center;left;right;middle;top;bottom" or a combination of "center:middle"
style1, // Properties Array - this is set higher up, as above
1, // Always Visible - allows the menu item to be visible at all time (1=on/0=off)
"left", // Alignment - sets the menu elements text alignment, values valid here are: left, right or center
effect, // Filter - Text variable for setting transitional effects on menu activation - see above for more info
, // Follow Scrolling - Tells the menu item to follow the user down the screen (visible at all times) (1=on/0=off)
1, // Horizontal Menu - Tells the menu to become horizontal instead of top to bottom style (1=on/0=off)
0, // Keep Alive - Keeps the menu visible until the user moves over another menu or clicks elsewhere on the page (1=on/0=off)
, // Position of TOP sub image left:center:right
, // Set the Overall Width of Horizontal Menu to 100% and height to the specified amount (Leave blank to disable)
, // Right To Left - Used in Hebrew for example. (1=on/0=off)
, // Open the Menus OnClick - leave blank for OnMouseover (1=on/0=off)
, // ID of the div you want to hide on MouseOver (useful for hiding form elements)
, // Reserved for future use
, // Reserved for future use
, // Reserved for future use

,"About Us  ","http://test420.biz/aboutus.asp",,"About Us",1 // "Description Text", "URL", "Alternate URL", "Status", "Separator Bar"
,"Services  ","show-menu=Services",,"",1
,"Contact Us  ","http://test420.biz/contactus.asp",,"Contact Us",1 // "Description Text", "URL", "Alternate URL", "Status", "Separator Bar"
,"Home  ","http://test420.biz/design1.asp",,"Back to the home page",1 // "Description Text", "URL", "Alternate URL", "Status", "Separator Bar"
])
}

*****************

jacob · June 2nd, 2004, 03:19 AM

Richard, thats cool! I didn't know that about overriding. I actually just tried it with the isheikh setup and it seemed to be placed right; i.e. in the right cell, however there was some other problem. If i figure it out I will naturally post it.

It is like when I place it within a table cell it will not expand; it simply shows something like a little dot, but if I place it at the buttom of the page (outside a table) it looks right.

If you want to try it get the two js files and run this simple html file...

Code:

<html>
<head>
    <SCRIPT language=JavaScript src="menu_array.js" type=text/javascript></script>
</head>
<body>

<table width="100%" border="1">
<tr>
    <td width="100%" style="position:relative;">o 
        <SCRIPT language=JavaScript>dumpmenus();</SCRIPT>  
        <SCRIPT language=JavaScript src="mmenu.js" type=text/javascript></script>
    </td>
</tr>
</table>

</body>
</html>

The above code will display the dot-like representation, but if you move the two script lines to the buttom of the page the menu is shown!

Remember to change the menu top and menu left position to e.g. 5 and 5 in the menu_array.js file.

Jacob (just curious).

richard.york · June 2nd, 2004, 01:33 PM

Ok, what exactly is the other problem?

This solution doesn't use *any* JavaScript, neither the existing JavaScript or any additional Javascript, save for IE7 which is a different thing entirely. I don't know how to put it more clearly. Since it doesn't use any JavaScript this approach is cleaner, and since it makes use of CSS, its more dynamic. It isn't attempting to reposition a menu relative to the viewport, the menu is already positioned, and this time positioned relative to its containing element. Using CSS in a project by its very nature requires that you forget everything you think you know about HTML. The solution you are trying to use is bloated and poorly written especially when *better* methods exist. The solution I posted uses only CSS and HTML to create dynamic menus and I say again, without a single line of JavaScript, so toast all your references to JavaScript, you don't need it!

And all of this is without comment to isheikh's use of deprecated HTML, nor that he's left out a document type declaration. None of which are very good approaches to professional website design in this age of standards and modern browsers.

See:
http://p2p.wrox.com/topic.asp?TOPIC_ID=4028

Consider the very small style sheet and html snip that I posted compared to isheikh's lengthy JS files.

IE7 itself is smaller in size compared to all of these JS files you're trying to use.

I implore you to actually read my response, analyize the example and read the reference material.

If you are CSS novices, then I suggest you start reading up on it, as it is quite possibly the single most important component in designing web pages. Here are a few URLs:
http://www.alistapart.com
http://www.meyerweb.com
http://www.w3schools.com
http://www.w3.org/Style/CSS
http://www.google.com/search?q=CSS+tutorial

Furthermore, if you actually have questions about the code I posted I'd be thrilled to answer them. My apologizes if I come off ranting, but I feel like I'm whipping a dead horse over here ;).

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

isheikh · June 2nd, 2004, 01:58 PM

Hi Richard,

We certainly apprecate your patients. In you r first email you wrote.

*******

It's very easy to do.. on the main <table> element add the following CSS

table {
position: relative;
}
****************

I tried that but it did not make any difference, I mean did not change the posistion of the menu one bit.I believe because I am using JS file and you want us to use totally new approch using CSS , correct?

Thanks

jacob · June 2nd, 2004, 02:54 PM

Relax Richard! :(

I am actually trying to help another p2p user with a problem, and 'no' I am not a novice! Perhaps I am just a bit more modest than you are.

Actually I did try the source (CSS/HTML) that you posted, and it didn't work (I am using IE6). I am quite aware that you are able to do dynamic menus without using JS, however that was not the question asked. I was trying to make a dialog so that we were able to solve this problem, however that was apparently not possible.

Perhaps you should consider, Richard, that not all users of this forum is as smart as you! Therefore... go easy!

And for isheikh... When - and not 'if' - I come up with a solution to your problem I will let you know, however I am pretty busy at the moment, so I might not be able to look at it for a couple of days.

Jacob - over and out!