CSS Pullout menu question

[jaelle]

I've created a css pullout menu for a site and it works fine. However, we realized that there is a problem on lower screen resolutions and more menu items. The menu has a tendency to go off the bottom of the page and you can't scroll down to get to it. I can think of two solutions. One would be having it pop up more towards the top of the screen instead of in line with the menu line. The other option would be to have it scroll when you approach the bottom or the top of the available browser area. I've been looking around for information on how to do both of these and really haven't found anything useful. Please help. Thanks.

Here are the links for references:

http://www.linnproductions.com/jaelle/rcas/index.html

http://www.linnproductions.com/jaelle/rcas/styles.css

 

[Vragabond]

Hmmmm, what it the lower resolution where the menu falls out? I checked 640x480 which is hardly used by anyone these days and was still browsable. If you really want, I would consider making it a tad smaller but that is all. I had absolutely no trouble using the menu at 800x600 which is the smallest reasonable resolution nowadays.

 

[jaelle]

Here is a link to a page showing actual some of the actual menu items:

http://www.rcas.org/linnproductions/

If you look @ 800x600 and try the lower menu items like Contact and Services, it goes right off the page. Also under the Parents & Students link there is going to be links to 16 schools, which definately will run off the page no matter how small I make them. *sigh*

 

[BillyRayPreachersSon]

Have you thought about using a different style of menu, rather than trying to modify this one?

I don't realistically think you can patch this one enough to cater for all eventualities that will occur at small resolutions.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

to make the menu scroll with the screen i use this javascript on my DIV tag

<script>
if (document.all){
    window.onscroll = floatinfo;
    }
else{setInterval ('floatinfo();', 100);}

function floatinfo() {
        if (document.all) {
             document.all.elementname.style.pixelTop = document.body.scrollTop + 1;
        }
        else if (document.layers) {
            document.elementname.top = window.pageYOffset;
        }
        else if (document.getElementById) {
            document.getElementById('elementid').style.top = window.pageYOffset + 'px';
        }
}
</script>

you will need to change (elementname & elementid) for your DIV and the offsets can be played with to get the positioning you require.

it works in IE, FF & Opera that i've tested.

hope it helps.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[jaelle]

Thanks for the replies. However I was referring to the pullout menu to scroll down by itself when your mouse approaches the bottom of the screen. The code snippet above will just scroll the menu down as I scroll down the page.

I have considered a few other options for making the menu layout. Another thing I would like to try is making it pop out so it comes out more in the middle or bottom elements lining up with the menu item the mouse is hovering over, instead of the top one. I don't suppose this can be done w/ straight CSS can it? I need it to test to make sure it doesn't end up going off the top of the page instead. So I guess it would try to align from the bottom element and if it was too tall, it would go aligning the top element with the top of the screen instead.

I don't know if that makes any sense. ^^;