Sticky Vertical Menu, Materialize

Section 1

Sticky Vertical Menu

This menu has been found at w3schools.com and adapted to being edited in Coffeecup Site Designer. When scrolling the page, the navigation will stay pinned to the top and be visible all the time. Menu items can be added or removed. They consist of the actual menu item and a corresponding 'section'. The section needs an ID, and the text link has to be connected with it via an onclick attribute.

The top section can be edited to contain an image, for example a logo, and some tag-line. And the width of the container .everything (90% here) can be changed to your needs.

This component lends itself to be used on 'one-page' websites. It can also be used as a base for a template. It even contains a footer.

The second component is a stripped-down version; it doesn't have the header and footer.

Both menus need a certain height of the container .main-region to enable scrolling down to the lowest section.

Download this component (displayed)

Download the simpler component

Section 2

Early morning before sunrise.

Sample content:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Sticky Vertical Menu

Sticky Vertical Menu

Section 1

Sticky Vertical Menu

Section 2

Section 3

Section 4

Section 5

Section 6