navigation menu causes vertical scroll bar to appear/disappear

[Larz]

I have an internal web page that uses a navigation system with drop
down menus with javascript library that I had downloaded. What I
noticed is that when I move the mouse over a tab that causes a drop
down to appear, it causes the browser to momentarily show a vertical
scroll bar as long as the drop down is there, even though the page
never changed size and the bar shows no space to scroll. I had
integrated my code with some other template and now this happens. It
makes the page sort of wiggle a little and is not to cool. Offhand I
am not sure what the obvious cause of that could be ..

 

[Larz]

Neither do we ...

Though using Javascript for drop-down menus is a little... 1990ish.  If
drop-downs are required, they can be written in pure HTML/CSS*

*Well, pure save for IEhover.htc -- which is needed for IE6.

I'm not sure if when there are many sub menus and so on that
javascript is a suitable approach. I had seemed to have that
impression from some books and websites, but I am not an expert on
these things. At any rate I have this menu system in place and it took
me a while to integrate it, but I am having some problems. I don't
know how to tell when the browser decides to put a scrollbar on the
page and why hovering can sometimes make the scrollbar appear/
dissapear.

 

[Jeremy J Starcher]

I'm not sure if when there are many sub menus and so on that
javascript is a suitable approach. I had seemed to have that impression
from some books and websites, but I am not an expert on these things. At
any rate I have this menu system in place and it took me a while to
integrate it, but I am having some problems. I don't know how to tell
when the browser decides to put a scrollbar on the page and why hovering
can sometimes make the scrollbar appear/ dissapear.

Ok, let me be clear:

The use of Javascript for menus (or any other form of navigation) is a
Bad Thing(tm) and should avoided.

Submenus can be made entirely[1] from good markup and proper CSS. For
example, see this page:

http://www.howtocreate.co.uk/tutorials/testMenu.html

[1] IE6 and below do need a bit of additional scripting to get
the :hover to work. I'm willing to require this in IE but be script-
free everywhere else.

 

[Larz]

 I'm not sure if when there are many sub menus and so on that
javascript is a suitable approach. I had seemed to have that impression
from some books and websites, but I am not an expert on these things. At
any rate I have this menu system in place and it took me a while to
integrate it, but I am having some problems. I don't know how to tell
when the browser decides to put a scrollbar on the page and why hovering
can sometimes make the scrollbar appear/ dissapear.

Ok, let me be clear:

The use of Javascript for menus (or any other form of navigation) is a
Bad Thing(tm) and should avoided.

Submenus can be made entirely[1] from good markup and proper CSS.  For
example, see this page:

http://www.howtocreate.co.uk/tutorials/testMenu.html

[1]  IE6 and below do need a bit of additional scripting to get
the :hover to work.   I'm willing to require this in IE but be script-
free everywhere else.

I see what you are saying, but I am not sure I can drop the IE
support for the website, it's not my website. That is interesting
however, I am a bit stuck because I am not a CSS type of expert.
Perhaps I could break my code into two different sections, one for IE
and the other for everything else. Maybe the menu would look different
or simpler for IE.

 

[Jeremy J Starcher]

Ok, let me be clear:

The use of Javascript for menus (or any other form of navigation) is a
Bad Thing(tm) and should avoided.

Submenus can be made entirely[1] from good markup and proper CSS.  For
example, see this page:

http://www.howtocreate.co.uk/tutorials/testMenu.html

[1]  IE6 and below do need a bit of additional scripting to get
the :hover to work.   I'm willing to require this in IE but be script-
free everywhere else.

I see what you are saying, but I am not sure I can drop the IE
support for the website, it's not my website. That is interesting
however, I am a bit stuck because I am not a CSS type of expert.
Perhaps I could break my code into two different sections, one for IE
and the other for everything else. Maybe the menu would look different
or simpler for IE.

Nooo....

You miss the point.

Create *ONE* set of menus, using CSS, as they show in that example page I
gave you.

Then, using a feature known as 'conditional comments' include the
special feature needed for IE6.

From the link I gave you:

<!--[if gt IE 5.0]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
ul.makeMenu li { /* the behaviour to mimic the li:hover rules in IE 5+ */
behavior: url( IEmen.htc );
}
ul.makeMenu ul { /* copy of above declaration without the > selector,
except left position is wrong */
display: none; position: absolute; top: 2px; left: 78px;
}
</style>
<![endif]><![endif]-->


This adds the needed features to bring IE up to snuff, and now the same
menu will work on IE and most other browsers.

Whether or not drop-down menus are a good idea or not is debated and I
will be removing them from my site when I have time to do a redesign.

 

[David Mark]

Ok, let me be clear:
The use of Javascript for menus (or any other form of navigation) is a
Bad Thing(tm) and should avoided.
Submenus can be made entirely[1] from good markup and proper CSS.  For
example, see this page:
http://www.howtocreate.co.uk/tutorials/testMenu.html
[1]  IE6 and below do need a bit of additional scripting to get
the :hover to work.   I'm willing to require this in IE but be script-
free everywhere else.

I see what you are saying, but I am not sure I can drop the IE
support for the website, it's not my website. That is interesting
however, I am a bit stuck because I am not a CSS type of expert.
Perhaps I could break my code into two different sections, one for IE
and the other for everything else. Maybe the menu would look different
or simpler for IE.

Nooo....

You miss the point.

Create *ONE* set of menus, using CSS, as they show in that example page I
gave you.

Then, using a feature known as 'conditional comments'  include the
special feature needed for IE6.

From the link I gave you:

<!--[if gt IE 5.0]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
ul.makeMenu li {  /* the behaviour to mimic the li:hover rules in IE 5+*/
  behavior: url( IEmen.htc );}

ul.makeMenu ul {  /* copy of above declaration without the > selector,
except left position is wrong */
  display: none; position: absolute; top: 2px; left: 78px;}

</style>
<![endif]><![endif]-->

Only need one directive (if lte IE 6).

This adds the needed features to bring IE up to snuff, and now the same
menu will work on IE and most other browsers.

Whether or not drop-down menus are a good idea or not is debated and I
will be removing them from my site when I have time to do a redesign.

They are certainly the wrong way to represent site structure. Small
wonder they've become the navigation of choice for many Web
"designers" (though not for their users.)