Scroll this page and watch the menu
- The menu was defined with 'position:
fixed' in Menukit. This causes the menu to remain
in a fixed vertical position as the page is scrolled up and down.
Note. Since Internet Explorer 6 does not understand 'position: fixed', Menukit automatically inserts a piece of JavaScript that emulates it in IE6. - When a menu has 'position: fixed', its containing block is established
by the screen/ viewport and it is positioned in the same way as 'position:
abolute'.
Because the menu is absolutely positioned, it is taken out of the flow and does not affect the positioning of any element in normal flow. For this reason we created an empty spacer <div> with the same height as the menu and placed it in the left column where we wanted the menu to appear. This causes the content in the left column to flow around the menu when the page is loaded initially.
#spacer { height: 7.5em; }
Tutorials
| Learn how to... | ||
|---|---|---|
 |
create a multi-level menu with Menukit. | |
| |
create a 2-column divs-based page layout like this. | |
| |
place a Menukit CSS Flyout menu in the left column. | |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam nunc. Quisque leo tellus, fermentum at, commodo a, vehicula nec, mi. Etiam tristique. Quisque interdum, quam at sagittis iaculis, est tortor dignissim enim, a fringilla augue dui a lorem. Suspendisse auctor orci vel ligula. Etiam scelerisque lacus. Vestibulum sem nisl, consectetuer vitae, tempus vel, pharetra ut, magna. Praesent dignissim pulvinar tellus. Vestibulum rutrum. Aliquam vitae turpis quis augue porttitor consectetuer. Quisque ornare dictum augue. Cras vehicula velit ac ligula. Praesent laoreet magna ut leo. Nam tempor.
