This is a self-contained demo file, with HTML and CSS, that belongs to my article From sticky links to button hovering.
This Demo 04 is meant as an improved version of Demo 04. The “Naviga” button is now at the lower left of the screen. As a result, hovering the button moves the navigation links to a position near the button. Advantage: hovering the links at the end of an article leaves them more of less where they are, they do not ‘escape’ to a totally different position.
Further improvement, implemented in the whole site but not in the demos: where there is enough room, like on a laptop or desktop screen instead of a phablet, the button is next to the text, not over it.
Here we need some extra text, like a Latin Lorem ipsum, but in English for easier tests of readability. It is a filler so the ‘article’ contains more text than fits on a screen, and scrolling is necessary.
Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine.
Here we need some extra text, like a Latin Lorem ipsum, but in English for easier tests of readability. It is a filler so the ‘article’ contains more text than fits on a screen, and scrolling is necessary.
Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine.
Here we need some extra text, like a Latin Lorem ipsum, but in English for easier tests of readability. It is a filler so the ‘article’ contains more text than fits on a screen, and scrolling is necessary.
Hereinbelow follow the navigation links.