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 03. The navigation links are initially visible, under the text block. This makes them accessible also by read aloud software for the visually impaired.
When the mouse pointer hovers over the “Naviga” button, the navigation
links obtain the setting position: fixed instead of
position: static. This moves them to a position near
the button, which in this demo is at the upper right of the screen.
(On phablets, that have no mouse, this also works, by tapping the
button.)
Disadvantage: the navigation cannot be clicked while still at the end of the web page. They disappear immediately when attempting this. The reason is that hovering moves the links from lower left to upper right. As a result, they cannot be clicked. And the mouse cursor is no longer over them, so the hovering is broken too.
Solution: see next demo.
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.