This is a self-contained demo file, with HTML and CSS, that belongs to my article From sticky links to button hovering.
This demonstrates my first attempts to make a pop-up menu, replacing the unsatisfactory solution that was similar to Demo 02. It was inspired by this article, under “How to Make a Hoverable Dropdown Menu”.
Initially, the menu links are invisible because the class
.navilnks is set to display: none.
Hovering the “Naviga” button make them visible, by setting
display: block instead.
Disadvantage: the navigation links are not ‘seen’ by read aloud software for the visually impaired.
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.