Sticky Vertical Menu, Bare-Bone

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.

See below for a lighter variant of this menu.

Download this component for 'mobile-up'

Download this component for 'desktop-down'

Section 2

Simpler Sticky Vertical Menu

This menu variant is the result of inputs from several CoffeeCup Forum members. 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. More menu links and sections can be added.

To edit one of the sections, you can select the one in question from the 'Inspector' pane. This is because each section has been given a height of 100vh which doesn't let you scroll the page at full width. Or you can just narrow the width a bit, then you'll be able to scroll the page. The page heigth may also be changed, maybe to e.g. just 80vh or 60vh, if that seems better.

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

Download the simpler component for 'mobile-up'

Download the simpler component for 'desktop-down'

Section 3

Early morning before sunrise.

Sample contents:
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